Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editor. Get all the power of graphic design tools and website buildersCreate Project
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Text, Image, Box — the most basic components similar to HTML tags.
Creating components on a page
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Displaying custom props on the panel
All custom component properties can be shown on the right panel.
Build a consistent design using themes
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 custom breakpoints or choose one of the existing ones.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
You can choose multiple elements, set their styles, move to another place, delete, 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.
Double-click to go up and down the hierarchy of elements. To dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 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.
Go to this section to find text style properties.
Open these settings to configure margins and paddings.
This section contains props that help set element backgrounds.
This section allows you to adjust borders and border radius.
With this category, you can fine-tune element position and z-index settings.
This property offers additional design opportunities.
This property lets you configure the element shadow.
This property helps an element move smoothly from one state to another.
This property allows you to transform the element, for example, rotate or zoom.
With this property, you can set up a wide variety of visual effects.
Making custom React components in the code editor
You can build custom React components in the Quarkly code editor and after that add them to the page.
How-to instructions with detailed information about developing components for Quarkly, building apps, and more.
Hot import of NPM modules
Import modules to your component from NPM in no time, if needed.
Export to Create React App
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.
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. It'll have a technical domain, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays all the entities of the page.
Component code or page errors can be detected in the debug console.
Tooltips in the code
If you are not sure how to spell a property, start typing and the editor will help you.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Work together as a team
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Make use of the ready-made blocks: 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.
Over 40 components in the catalog, and the collection is constantly growing.
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.
This is an individual property that belongs to the “Image” element.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
We give you Quarkly for free as long as we can, and then offer the lowest price among our competitors.Create project