Use pre-made React components or build your own. Get all the power of graphic design tools and website builders. Completely free — you should try it nowCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
Build a consistent design using themes
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Fine-tune your adaptive design
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can apply styles to multiple elements at once and move them around, as well as remove them.
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
You can go up and down the hierarchy of elements using the double click. If you want to dive into the hierarchy, on Windows hold down the Ctrl key and on MacOs the Cmd key.
Support of Flexbox and Grid
We're excited to offer you the best frontend coding practices around.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the way an element looks, such as its appearance on hover, enable the "hover" prop and set other desired props.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Unsplash is one of the most popular free image stocks. Search and select images directly from the Quarkly interface
Make use of the categorized style and props to your advantage.
Here you will find the element display properties.
In this section, you can change text styles using special properties
Here you can configure margins and paddings, which control the space around elements.
This section offers props for setting up element backgrounds.
Here you can set up borders and border radius.
With this category, you can fine-tune element position and z-index settings.
This property makes an element change smoothly from one state to another.
This property allows you to transform the element, for example, rotate or zoom.
Building custom React components in the code editor
With the Quarkly code editor, you can create unique React components and then place them on the page.
The pages are written in JSX code typical for React.js
Hot import from NPM
Import modules to your component with ease, if needed.
Optimize your site to promote it on search engines
If you need to complete or host your project on your own server, it's easy: just export it into an archive with a create-react-app project.
Fine-tune elements in the code editor
Export to Gatsby Project
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays all the entities of the page.
Errors in the component code or pages will show up in the debug console.
Start typing and the editor will give you a list of suggestions.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
You can use each component as a tag. Just choose the needed value of the “as” property.
You can set attributes to elements in the code editor.
A special property of the “Image” element.
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project