Unlimited customisation possibilities, no-code tools of a classic editor. Use pre-made React components or build your own. Completely free — you should try it nowCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
Using themes you can create a consistent design for your site
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Fine-tune your adaptive design
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, 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 can add custom breakpoints or edit existing ones in the project theme.
You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.
This option allows you to select multiple elements and change their styles, place them on the page, etc.
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.
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
At Quarkly, we use the most advanced frontend coding techniques.
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
Use the library of over 990 font families to make your site look more beautiful
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Make use of the categorized style and props to your advantage.
Here you will find the element display properties.
To change the style of your text, use special properties in this section.
You can configure margins and paddings in these settings.
This section contains props that help you create element backgrounds.
Here you can configure border and border radius.
This category allows you to position elements and set their z-index values.
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.
Make custom React components in 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
You can import modules to your component from NPM.
Optimize your site to promote it on search engines
If you need to complete or host your project on your own server, it's easy: just export it into an archive with a create-react-app project.
Fine-tune elements in the code editor
Export to Gatsby Project
You can easily export your projects to Gatsby, which is a popular static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and commit changes as you work.
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.
When there are errors in the component code or pages, they can be seen in the debug console.
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
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.
You can use each component as a tag. Just choose the needed value of the “as” property.
You can specify desired attributes for elements in the code editor.
This is an individual property that belongs to the “Image” element.
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 are meant for the correct display of your website in search engine results and social media
Set up user-friendly URLs to improve your site position in the search engines and increase the usability of the resource.
Robots.txt and sitemap.xml
These files are created automatically for you to edit further.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project