Choose from one of many pre-made blocks. Create your website from scratch or ready-to-use templates. Get all the power of graphic design tools and website buildersCreate Project
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
You can use themes to create a consistent design for your site.
Put the power of animation, effects, and transformations at your fingertips.
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.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
Move elements around, place them however you want on the page, or nest them in other elements.
You can apply styles to multiple elements at once and move them around, as well as remove them.
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.
With the double click, you can go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Quarkly supports the most advanced approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Here you can find all the styles and functional properties.
This section allows you to configure the display properties of elements.
To change text styles, use special properties in this section
These settings allow you to change margins and paddings.
This section has props you can use to set up element backgrounds.
Here you can set up borders and border radius.
This category allows you to position elements and set their z-index values.
This property makes it possible for elements to move smoothly from one state to another.
With this property, you can transform the element, for instance, 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 from NPM with ease.
Optimize your site to promote it on search engines
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor
Export to Gatsby Project
You can easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your site on Netlify once you're ready for it to go live. A technical domain will be created automatically for it, like: https://inspiring-beaver-d128ed.netlify.app
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
When there are errors in the component code or pages, they can be seen in the debug console.
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Work together as a team
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
You can use each component as a tag. Just choose the needed value of the “as” property.
You can specify desired attributes for elements in the code editor.
This is a separate property of the “Image” element.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
These files are created automatically for you to edit further.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project