Web page maker for React developers.
Meet Quarkly.
Unlimited customisation possibilities, no-code tools of a classic editor. Publish your website online or export it to Github. Completely free — you should try it now
Create Project
Full control over the design.
Primitives
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes
It's simple to give your website a unified look with themes.
Extended Styling
Make your website unforgettable with creative layouts, dynamic animations, and exciting transformations.
Adaptive design
Fine-tune your adaptive design
Components
You can create reusable components from any selection of elements on the page or in a layer. When you add the component to a page, it inherit all of its original properties.
Ready-made Content
You can also add ready-made blocks: maps, videos, pop-ups and much more.
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your custom breakpoints or choose one of the existing ones.
Drag'n'Drop
Place elements exactly where you want them on the page, whether it be by dropping them, nesting them, or moving them.
Multiselect
You can select multiple elements and move them to another location, remove them, and more.
Text editor
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
Deep select
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or the Cmd key on MacOs.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
Google Fonts Connection
Make your website design look sleek and modern with the library of over 990 font families.
Unsplash images
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Props panel
Enjoy a friendly interface with categorized styles and useful properties.
Layout
You can set the element display properties in this section.
Typography
To find the text style properties, go to this section.
Indents
Margin and padding configuration is available here.
Background
Here you'll find some props to help you set up element backgrounds.
Borders
With these options, you can set up borders and border radius.
Position
The element position and z-index settings can be altered here.
Transition
This property helps an element move smoothly from one state to another.
Transform
With the help of this property, you can rotate or zoom an element.
Development capabilities.
Supercharged.
Create custom React components using the code editor
With the Quarkly code editor, you can create unique React components and then place them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM in a few clicks.
SEO
Optimize your site to promote it on search engines.
Export CRA
One step to complete your project or host it on your own server: export it into an archive with a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Debugger
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Fantastic opportunities for business.
Collaboration
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
Any element can serve as a tag. Simply select the "as" property value you require.
Schema.org
You can give any element the required characteristics in the code editor.
Image ALT
The "Image" element has a distinct property for this.
Favicons
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
User-friendly URL
Set up user-friendly URLs to improve your site position in the search engines and increase the usability of the resource.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
Web page maker for React developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project