All-in-one website builder on React — Quarkly. Create your website from scratch or ready-to-use templates. Choose from one of many pre-made blocksCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
You can use themes to create a consistent design for your site.
Use animation, effects, and transformations to make your web page come to life.
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.
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Ensure your website is fully responsive by using tailored design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
You can select multiple elements and move them to another location, remove them, and more.
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
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
At Quarkly, we use the most advanced frontend coding techniques.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Make your website design look sleek and modern with the library of over 990 font families.
Unsplash is one of the most popular websites for free photos. You can look for and select images using the Quarkly interface.
Enjoy categorized styles and functional properties in a friendly interface.
In this section, you can configure element display properties.
To change the style of your text, use special properties in this section.
Here you can configure margins and paddings.
This section has props you can use to set up element backgrounds.
Find the options for borders and border radius configuration in this section.
This category contains settings for configuring the position and z-index of elements.
This property makes an element transition smoothly from one state to another.
With the help of this property, you can rotate or zoom an element.
Create custom React components using the code editor
With the Quarkly code editor, you can create custom React components and then use them on a webpage.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if needed.
Optimize your site to promote it on search engines.
Your project can be finished or hosted on your server by exporting it into an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
You can build a GitHub repository for your projects if necessary and commit updates there.
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 all the entities of the page.
Our debug console will help you track errors in the component code and pages.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
Pages and code are updated in real-time, displaying all changes made in both areas.
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
Make every component work as a tag by selecting the desired "as" property value.
In the code editor, you can provide items the required characteristics.
This is a separate property of the “Image” element.
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project