Publish your website online or export it to Github. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Completely free — you should try it nowCreate Project
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Using themes will help your website's design remain consistent.
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Fine-tune your adaptive design
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
The choice is yours on how to arrange elements on the page — nest them, move them, or drop them in the desired area.
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
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.
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or the Cmd key 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.
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
Add a personal touch to your website with the use of 990+ font families available in the library.
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Here you'll find categorized collections of style and functional properties.
This is where you can locate element display properties.
To change the style of your text, use special properties in this section.
Margin and padding configuration is available here.
This section contains props that help you create element backgrounds.
In this section, you can adjust borders and border radius.
The element position and z-index settings can be altered here.
This property makes it possible for elements to move smoothly from one state to another.
This property lets you transform the element, for example, zoom or rotate.
Create custom React components using the code editor
Create your own React components in the Quarkly code editor and seamlessly integrate them into the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Modules from NPM can be imported into your component.
Optimize your site to promote it on search engines.
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
When there are errors in the component code or pages, they can be seen 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
All changes made to the pages are displayed in the code and vice versa.
Quickly invite teammates to work on your projects in Quarkly.
You can use each component as a tag. Just choose the needed value of the “as” property.
In the code editor, you can give items the desired attributes.
A unique attribute that belongs to the "Image" element.
This feature helps you to install unique icons for all devices.
Open graph and meta tags
Your site will display appropriately thanks to these settings on social media and search engines.
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project