Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. All-in-one website builder on React — Quarkly. Completely free — you should try it nowCreate Project
Essential building blocks modeled after HTML tags, like Text, Image, Box, and others.
Build a professional-looking design using themes
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can remove, drag to a different location, style, remove, and more multiple elements simultaneously.
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.
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside 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.
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Style and utility characteristics are categorized here.
Get access to element display properties in this section.
You can change text styles by using special properties in this section.
To set margins and paddings, open these settings.
This section has props you can use to set up element backgrounds.
This section allows you to configure borders and border radius.
With this category, you can fine-tune element position and z-index settings.
This property makes an element change 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
With the Quarkly code editor, you can 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
Import modules to your component from NPM with ease.
Optimize your site to promote it on search engines.
If you want to finish or host your project on your server, there is only one thing you need to do: export it as an archive using 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
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing 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
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
When you make changes to the page, you can see those same edits reflected in the code.
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
In the code editor, you can assign necessary attributes to elements.
The "Image" element has a unique property.
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
Enhance your site's visibility in search engines and ease of use with user-friendly URLs.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project