Create your website from scratch or ready-to-use templates. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocksCreate Project
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Build a professional-looking design using themes
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
Choose an element or a group of elements on the page or on the Layer panel and turn them into a component. Add component 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
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
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 and move them to another location, remove them, and more.
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.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Enjoy the convenience of having categorized style and functional properties at your fingertips.
Here you can change the way elements appear.
Check out this section to take advantage of text style properties.
Adjust margins and paddings with ease in these settings.
Here, you will have access to props for element background setup.
The properties for borders and border radius can be found here.
In this category, you can change the settings for element position and z-index.
This property helps an element move smoothly from one state to another.
You can use this property to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
The Quarkly code editor allows you to create unique React components and then place them on the page.
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.
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor.
Export to Gatsby Project
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
Making a GitHub repository for your project and committing changes can be done with ease.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
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.
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Any element can serve as a tag. Simply choose the required "as" property value.
You can set attributes to elements in the code editor.
The "Image" element has a distinct property for this.
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
Automated file creation with the option to edit as desired.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project