Complete design control, supports Grid and Flexbox. Use pre-made React components or build your own. All-in-one website builder on React — Quarkly
Create ProjectPrimitives
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Themes
Using themes you can create a consistent design for your site
Extended Styling
Boost your websites' functionality with distinctive layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
Ready-made Content
Add ready-made blocks: maps, videos, pop-ups, and many 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 have an opportunity to use breakpoints of the project theme or download your own ones.
Drag'n'Drop
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
Multiselect
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Deep select
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.
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.
Transform the appearance of an element, including its hover behavior, by turning on "hover" and adjusting the desired properties.
Google Fonts Connection
Use the library of over 990 font families to make your site look more beautiful
Unsplash images
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
Enjoy a friendly interface with categorized styles and useful properties.
Layout
You can set the element display properties in this section.
Typography
You can apply the text style properties found here to your text.
Indents
Margin and padding configuration is available here.
Background
Here you'll find some props to help you set up element backgrounds.
Borders
This section allows you to configure borders and border radius.
Position
You can modify the settings for element position and z-index in this category.
Transition
This property makes an element transition smoothly from one state to another.
Transform
This property will help you transform the element, for instance, rotate or zoom.
Create custom React components using the code editor
In Quarkly, you can create custom React components in the code editor and then place them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, one of the most well-known web frameworks for static site generation.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the page's entities can be found in the Quarkly editor.
Debugger
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Collaboration
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
Component-to-tag transformation made simple with the right "as" property value selection.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
This is a separate property of the “Image” element.
Favicons
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
Your site will display appropriately thanks to these settings on social media and search engines.
User-friendly URL
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 generated. You can edit these files to suit your needs for the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project