Choose from one of many pre-made blocks. Use pre-made React components or build your own. Completely free — you should try it nowCreate Project
Essential building blocks modeled after HTML tags, like Text, Image, Box, and others.
You can make your site's design consistent by using themes.
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Fine-tune your adaptive design
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
This option allows you to select multiple elements and change their styles, place them on the page, etc.
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
Quarkly embraces the latest and greatest in frontend coding methods.
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
If you want your site design to look more professional, consider using a library of more than 990 font families.
Select stunning images from the Unsplash library directly through the Quarkly interface.
Take advantage of the categorized style and props.
This section allows you to configure the display properties of elements.
Use the special properties in this section to alter the text's style.
These settings offer options to change margins and paddings.
This section has props you can use to set up element backgrounds.
Here you can adjust borders and border radius.
This category lets you use position and z-index settings.
This property makes an element transition smoothly from one state to another.
With the help of this property, you can rotate or zoom an element.
Create custom React components using the code editor
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component from NPM in no time, if needed.
Optimize your site to promote it on search engines.
Your project can be finished or hosted on your server by exporting it into an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby — one of the most popular static site generators.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
The editor shows each and every entity that is present on the page.
Component code or page errors can be detected in the debug console.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
Synched pages and code editor
When you edit a page, the changes are applied to the code and vice versa.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Make every component work as a tag by selecting the desired "as" property value.
In the code editor, you can provide items the required characteristics.
A unique attribute of the "Image" element.
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them as you think they fit in the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project