Completely free — you should try it now. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocksCreate Project
Basic components which are similar to HTML tags like Text, Image, Box, and others.
It's simple to give your website a unified look with themes.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
At Quarkly, we support the latest and greatest in frontend coding.
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
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Here you will find categorized style and functional properties.
Get access to element display properties in this section.
To change the style of your text, use special properties in this section.
You can configure margins and paddings in these settings.
Here, you will have access to props for element background setup.
Here you can configure border and border radius.
This category helps you configure element position and z-index settings.
This property makes it easier for an element to change from one state to another.
This property allows you to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Importing modules from NPM to your component is a breeze.
Optimize your site to promote it on search engines.
One step to complete your project or host it on your own 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, a highly regarded static site generator.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays all the entities of the page.
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips in the code
Start typing and the editor will give you a list of suggestions.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Any element can serve as a tag. Simply select the "as" property value you require.
In the code editor, you can provide items the required characteristics.
A separate property belonging to 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
Optimize the display of your site in search engine results and on social media with these settings.
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project