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 now
Create ProjectPrimitives
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Themes
Utilize themes to build a consistent and attractive design for your website.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
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.
Drag'n'Drop
Arrange elements however you want on the page, drop them on the desired area, or nest them in other elements.
Multiselect
You can select multiple elements and set their styles, drag to another place, remove, and more.
Text editor
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.
Deep select
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.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Take advantage of the categorized style and props.
Layout
Here you will find the element display properties.
Typography
In this section, you can change text styles using special properties
Indents
Adjust margins and paddings with ease in these settings.
Background
This section consists of props for element backgrounds.
Borders
This section allows you to adjust borders and border radius.
Position
Customize element position and z-index through these settings in this category.
Transition
This property helps an element move smoothly from one state to another.
Transform
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.
React.js
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.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to host your project on your server, you can export it into an archive with create-react-app.
Code Editor
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.
Debugger
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.
Collaboration
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
Semantic tags
Any element can serve as a tag. Simply choose the required "as" property value.
Schema.org
Assign attributes to elements with ease in the code editor.
Image ALT
The "Image" element has a distinct property for this.
Favicons
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.
User-friendly URL
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