Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox. Create your website from scratch or ready-to-use templatesCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Utilize themes to build a consistent and attractive design for your website.
With stylish animations, effects, and transformations, you can make your web page more exciting.
Fine-tune your adaptive design
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can pick multiple elements, modify their styles, move them to a different location, delete them, 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.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
We follow up-to-date frontend coding approaches at Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To make an element appear differently, such as with a hover state, enable the "hover" prop and configure the desired props.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Enjoy a friendly interface with categorized styles and useful properties.
In this section, you can configure element display properties.
Use the properties in this section to change the text's appearance.
To configure margins and paddings, open these settings.
For element backgrounds, look in this section for props.
Here you can configure border and border radius.
With this category, you can fine-tune element position and z-index settings.
An element can transition from one state to another more easily thanks to this property.
With the help of this property, you can rotate or zoom an element.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and then add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
With a few clicks, you can quickly import modules from NPM into your component.
Optimize your site to promote it on search engines.
To wrap up your project or host it on your server, simply export it into an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
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
In the Quarkly editor, you can find all the entities of the page.
Keep an eye on component code and page errors with the help of the debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Quickly invite teammates to work on your projects in Quarkly.
Make every component work as a tag by selecting the desired "as" property value.
Assign attributes to elements with ease in the code editor.
An individual property is provided for the "Image" element.
You can install different icons for different devices, and you can also set a unique background color for Windows 10.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project