Unlimited customisation possibilities, no-code tools of a classic editor. Publish your website online or export it to Github. Completely free — you should try it nowCreate Project
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Utilize themes to build a consistent and attractive design for your website.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
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
You can use your own custom breakpoints, or select one of the existing ones.
Arrange elements however you want on the page, drop them on the desired area, or nest them in other elements.
You can select multiple elements and set their styles, drag to another place, remove, and more.
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Double clicking allows you to move up and down the element hierarchy, while holding Ctrl/Cmd lets you access deeper levels.
Support of Flexbox and Grid
Advanced frontend coding is at the forefront of Quarkly's approach.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Take advantage of the categorized style and props.
Here you will find the element display properties.
In this section, you can change text styles using special properties
Adjust margins and paddings with ease in these settings.
This section consists of props for element backgrounds.
This section allows you to adjust borders and border radius.
Customize element position and z-index through these settings in this category.
This property helps an element move smoothly from one state to another.
This property allows you to manipulate the element, such as by rotating or zooming.
Create custom React components using the code editor
The Quarkly code editor allows you to create unique React components and then place them on the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM to your component quickly and easily.
Optimize your site to promote it on search engines.
If you want to host your project on your server, you can export it into an archive with create-react-app.
Fine-tune elements in the code editor.
Export to Gatsby Project
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
Effortlessly, you can make a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your site on Netlify once you're ready for it to go live. A technical domain will be created automatically for it, like: https://inspiring-beaver-d128ed.netlify.app
Modern built-in code editor
The editor displays all the entities of the page.
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
Any element can serve as a tag. Simply choose the required "as" property value.
Assign attributes to elements with ease in the code editor.
The "Image" element has a distinct property for this.
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
Make sure your site's URLs are human-readable to improve search engine optimization.
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