Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocks
Create ProjectPrimitives
Text, Image, Box — the most basic components similar to HTML tags.
Themes
You can use themes to create a consistent design for your site.
Extended Styling
Supercharge your sites with unique layouts, animations, effects, and transformations
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
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
Customize or edit breakpoints in the project theme as desired.
Drag'n'Drop
You choose where to put the elements. You can move them around or nest them in other elements.
Multiselect
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
Text editor
You can turn a part of the text into italic or bold, make it a link or convert to span, and use any style for it.
Deep select
You can go up and down the hierarchy of elements using the double click. If you want to dive into the hierarchy, on Windows hold down the Ctrl key and on MacOs the Cmd key.
Support of Flexbox and Grid
We're thrilled to provide you with the top frontend coding techniques available.
Configuring styles of pseudo-classes hover/active/focus, etc.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Experience the ease of using categorized style and functional properties.
Layout
Get access to element display properties in this section.
Typography
Go to this section to find text style properties.
Indents
Configure margins and paddings using these settings.
Background
Here you'll find some props to help you set up element backgrounds.
Borders
This section allows you to configure borders and border radius.
Position
Customize element position and z-index through these settings in this category.
Transition
This property makes an element change smoothly from one state to another.
Transform
With the help of this property, you can rotate or zoom an element.
Create custom React components using the code editor
You can create your own React components using the Quarkly code editor and then add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if 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 famous static-site generation web frameworks
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
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
The editor displays every entity on the page.
Debugger
Component code or page errors can be detected in the debug console.
Tooltips in the code
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Collaboration
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Semantic tags
Every component has the ability to act like a tag. Simply select the necessary value for the "as" field.
Schema.org
In the code editor, you can assign necessary attributes to elements.
Image ALT
A unique attribute of the "Image" element.
Favicons
Create unique device icons and a unique Windows tile backdrop color.
Open graph and meta tags
Configure these settings to display your website correctly 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
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