All-in-one website builder on React — Quarkly. Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and FlexboxCreate Project
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
You can make your site's design consistent by using themes.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Different design solutions will be used for elements at breakpoints as your website automatically adapts to different screen sizes.
Adding and editing breakpoints
You can use your own custom breakpoints, or select one of the existing ones.
Drag and drop elements to arrange them on the page, or nest them in other elements.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
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
We follow up-to-date frontend coding approaches at Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
Alter the appearance of an element, such as its hover behavior, by turning on "hover" and setting the required properties.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Style and utility characteristics are categorized here.
You can set the element display properties in this section.
Go to this section to find text style properties.
These settings offer options to change margins and paddings.
This section has props you can use to set up element backgrounds.
Here you can adjust borders and border radius.
This category contains settings for configuring the position and z-index of elements.
This property makes an element change 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
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
Importing modules from NPM to your component is a breeze.
Optimize your site to promote it on search engines.
If you need to complete or host your project on your own server, it's easy: just export it into an archive with a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there if necessary.
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
In the Quarkly editor, you can monitor all the entities that are present on the page.
Use our debug console to track errors in the component code and pages.
Tooltips in the code
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Quickly invite teammates to work on your projects in Quarkly.
Any element can serve as a tag. Simply choose the required "as" property value.
You can give any element the required characteristics in the code editor.
A unique attribute 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
These settings will help your website look its best on social networks and in search engines.
Make sure your site's URLs are human-readable to improve search engine optimization.
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