Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editor. Completely free — you should try it nowCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
Themes make it easy to create a consistent look for your website.
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Fine-tune your adaptive design
On the page, you can select an element (or a collection of elements) and turn them into a component. All the props will be passed on to copies that are added to the page.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Choose from the preset breakpoints or use your own.
Drag and drop elements to arrange them on the page, or nest them in other elements.
You can apply styles to multiple elements at once and move them around, as well as remove them.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
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
Quarkly embraces the latest and greatest in frontend coding methods.
Configuring styles of pseudo-classes hover/active/focus, etc.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Here you can find all the styles and functional properties.
This section allows you to configure the display properties of elements.
Here you'll find text style properties that can be applied to your text.
You can modify the padding and margins in these settings.
This section contains props that help set element backgrounds.
In this section, you can adjust borders and border radius.
This category helps you configure the position and z-index settings of elements.
This property makes an element transition smoothly from one state to another.
Transform your element with ease using this property, for example, rotate or zoom.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component from NPM in no time, if needed.
Optimize your site to promote it on search engines.
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
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
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the entities that are present on the page are displayed by the editor.
Keep an eye on component code and page errors with the help of the debug console.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
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.
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Every component can act as a tag. Just choose the “as” property value that you need.
You can edit the necessary attributes of elements in the code editor.
A special property of the “Image” element.
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project