Choose from one of many pre-made blocks. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
The simplest, most basic components similar to HTML tags. For example, Text, Image, and Вох.
Build a professional-looking design using themes
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
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.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and 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 use your own custom breakpoints, or select one of the existing ones.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can select multiple elements and modify their styles or drag'n'drop them to change their location.
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.
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs.
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 like, for example, how it appears on hover, just enable "hover" and configure the desired props.
Google Fonts Connection
Give your website a more vibrant look by using fonts from a library that contains over 990 font families.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Here you will find categorized style and functional properties.
Under this section, you can find 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.
In this section, you can find props for element backgrounds.
Here you can configure borders and border radius.
This category helps you configure element position and z-index settings.
This property helps an element move smoothly from one state to another.
With this property, you can transform the element, for instance, rotate or zoom.
Create custom React components using the code editor.
You can build and add custom React components to your Quarkly pages using the code editor.
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
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!
Fine-tune elements in the code editor
Export to Gatsby Project
Export your projects to Gatsby — one of the most famous static-site generation web frameworks
Pushing commits to your GitHub repository
You can create a GitHub repository for your project 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
In the Quarkly editor, you can monitor all the entities that are present on the page.
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
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.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
You can make a component act as a tag by setting the “as” property to the desired value.
You can edit the necessary attributes of elements in the code editor.
This is a separate 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
Use these settings for the correct display of your site on social networks and in search engines.
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
These files are automatically generated. You can edit these files to suit your needs for the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project