Choose from one of many pre-made blocks. Unlimited customisation possibilities, no-code tools of a classic editor. Get all the power of graphic design tools and website buildersCreate Project
Supercharge your sites with unique layouts, animations, effects, and transformations
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Creating components on a page
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
Displaying custom props on the panel
Any property belonging to a custom component can be shown on the right panel.
Using themes you can create a consistent design for your site
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
Use your custom breakpoints or choose one of the existing ones.
Move elements around, place them however you want on the page, or nest them in other elements.
You can select multiple elements and set their styles, drag to another place, remove, and more.
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
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, the way it behaves on hover, just enable "hover" and set up the 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 trending free image stocks. Browse its collection and choose images directly from the Quarkly interface.
Take advantage of the categorized style and functional props.
Check out this section to use element display properties.
Check out this section to take advantage of text style properties.
Open these settings to configure margins and paddings.
This section contains props that help set element backgrounds.
Here you can set up borders and border radius.
This category allows you to adjust element position and z-index settings.
This property gives you additional design opportunities.
This property allows you to set the element shadow.
This property makes an element move smoothly from one state to another.
With this property, you can transform the element, for instance, rotate or zoom.
With this property, you can apply a wide range of visual effects.
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.
Guide for developers
Useful information about creating Quarkly components, building applications, and more
Hot import of NPM modules
You can import modules to your component from NPM in a few clicks.
Export to Create React App
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
Export to Gatsby Project
You can easily export your projects to Gatsby, which is a popular static site generator.
Pushing commits to your GitHub repository
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
Publication on Netlify
When your site is ready, publish it on Netlify with a technical domain name such as 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.
Component code or page errors can be detected in the debug console.
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
Use the ready-made blocks such as pop-ups, maps, videos, and many more!
No need to climb a steep learning curve since you deal with the workflow you already know
Ready-to-go themed blocks
These are groups of components with thematic content. You can do whatever you want with blocks, just as you do with regular components.
A rich library of more than 40 components which is updated on a regular basis
All components can act as a tag. Just select the necessary “as” property value.
In the code editor, you can assign necessary attributes to elements.
A special property of the “Image” element.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Configure these settings for the correct display of your website in search engine results and social media.
Make sure you use human-readable URLs to improve your site's SEO.
Sitemap.xml and robots.txt
These files are created automatically. But you can edit them as you think they fit in the future.
We give you Quarkly for free as long as we can, and then offer the lowest price among our competitors.Create project