Choose from one of many pre-made blocks. Unlimited customisation possibilities, no-code tools of a classic editor. All-in-one website builder on React — Quarkly
Create ProjectPrimitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
With themes, you can craft a consistent site design
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Ready-made Content
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
Drag'n'Drop
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
Multiselect
You can select multiple elements and move them to another location, remove them, and more.
Text editor
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
Deep select
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
At Quarkly, we keep up with the up-to-date frontend coding approaches.
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
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Unsplash images
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Props panel
Experience the ease of using categorized style and functional properties.
Layout
Check out this section to use element display properties.
Typography
Explore text style properties here
Indents
You can modify the padding and margins in these settings.
Background
This section offers props for setting up element backgrounds.
Borders
With these options, you can set up borders and border radius.
Position
This category allows you to adjust element position and z-index settings.
Transition
This property makes it easier for an element to change from one state to another.
Transform
You can use this property to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
You can design distinctive React components in the Quarkly code editor and then insert them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM to your component quickly and easily.
SEO
Optimize your site to promote it on search engines.
Export CRA
Easily complete or host your project on your server by exporting it into an archive with a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby — one of the best open source Static Site Generators.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Debugger
You can keep track of component code and page errors with 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
All of the edits you make to the site are shown in the code and vice versa.
Collaboration
Quickly invite teammates to work on your projects in Quarkly.
Semantic tags
Every component can act as a tag. Just choose the “as” property value that you need.
Schema.org
In the code editor, you can give items the desired attributes.
Image ALT
The "Image" element has a unique property.
Favicons
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project