Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocks. Completely free — you should try it now
Create ProjectPrimitives
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
Themes
Create a consistent and professional-looking design with the help of themes.
Extended Styling
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Any combination of elements on the page or in a layer can be used to create reusable components. The component inherits all of its original properties when you add it to a page.
Ready-made Content
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own 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 drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
Text editor
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
Deep select
You can double-click to go up and down the hierarchy of your objects. If you need to get inside the hierarchy, hold down the Ctrl key on Windows or Cmd on MacOs.
Support of Flexbox and Grid
We're excited to offer you the best frontend coding practices around.
Configuring styles of pseudo-classes hover/active/focus, etc.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Unsplash images
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Props panel
Make use of organized and categorized style and functional properties to improve your project.
Layout
You can set the element display properties in this section.
Typography
Use the properties in this section to change the text's appearance.
Indents
Adjust margins and paddings with ease in these settings.
Background
Props in this section help create the backgrounds for the elements.
Borders
This section allows you to adjust borders and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
This property makes an element move smoothly from one state to another.
Transform
With the help of this property, you can rotate or zoom the element.
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.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, one of the most well-known web frameworks for static site generation.
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 with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor shows each and every entity that is present on the page.
Debugger
In the debug console, component code or page errors might be found.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
All changes made to the pages are displayed in the code and vice versa.
Collaboration
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Semantic tags
Component-to-tag transformation made simple with the right "as" property value selection.
Schema.org
In the code editor, you can assign desired attributes to any element.
Image ALT
A unique attribute of the "Image" element.
Favicons
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
Configure these settings for the correct display of your website in search engine results and social media.
User-friendly URL
You may create user-friendly page URLs with this capability.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project