Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox. Use pre-made React components or build your ownCreate Project
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
With themes, you can craft a consistent site design
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
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.
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
Use your personal breakpoints or select one of the ones already in place.
Drag and drop elements to arrange them on the page, or nest them in other elements.
You can drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
You can double-click to go up and down the hierarchy of your objects. If you need to get inside the hierarchy, hold down the Ctrl key on Windows or Cmd on MacOs.
Support of Flexbox and Grid
The most cutting-edge frontend coding techniques are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
Transform the appearance of an element, including its hover behavior, by turning on "hover" and adjusting the desired properties.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Here you'll find categorized collections of style and functional properties.
Check out this section to use element display properties.
In this section, you can change text styles using special properties
In these settings, you can set margins and paddings.
Props in this section help create the backgrounds for the elements.
Here you can configure border and border radius.
This category helps you configure the position and z-index settings of elements.
This property makes an element transit smoothly from one state to another.
You can transform the element using this property, for instance, rotate or zoom.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM quickly, if you need to.
Optimize your site to promote it on search engines.
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Fine-tune elements in the code editor.
Export to Gatsby Project
Your projects can be easily exported to Gatsby, a well-liked static site generator.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
Publish your ready site on Netlify to receive a technical domain name, such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
When you edit a page, the changes are applied to the code and vice versa.
Quickly invite teammates to work on your projects in Quarkly.
Any part can serve as a tag. Just choose the "as" property's desired value.
You can specify desired attributes for elements in the code editor.
A special property of the “Image” element.
Create unique device icons and a unique Windows tile backdrop color.
Open graph and meta tags
Configure these settings to display your website correctly 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 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