Create your website from scratch or ready-to-use templates. All-in-one website builder on React — Quarkly. Publish your website online or export it to Github
Create ProjectPrimitives
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Supercharge your sites with unique 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
You can also add ready-made blocks: maps, videos, pop-ups and much more.
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
You can change current breakpoints in the project theme or add new ones.
Drag'n'Drop
Place elements however you want on the page — that is your choice. You can drop them in the desired area, or nest them in other ones.
Multiselect
You can select multiple elements and move them to another location, remove them, and more.
Text editor
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.
Deep select
With the double click, you can go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Quarkly embraces the latest and greatest in frontend coding methods.
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
Give your website a more vibrant look by using fonts from a library that contains over 990 font families.
Unsplash images
Select stunning images from the Unsplash library directly through the Quarkly interface.
Props panel
Here you'll find categorized collections of style and functional properties.
Layout
This is where you can locate element display properties.
Typography
Use the properties in this section to change the text's appearance.
Indents
You can modify the padding and margins using these settings.
Background
Props for element backgrounds can be found in this section.
Borders
This section allows you to configure borders and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
An element can transition from one state to another more easily thanks to this property.
Transform
With this property, you can transform the element, for instance, rotate or zoom.
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.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
With a few clicks, you can quickly import modules from NPM into your component.
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 easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
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
The Quarkly editor contains all of the page's entities.
Debugger
Errors in the component code or pages 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
All changes made to the pages are displayed in the code and vice versa.
Collaboration
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Semantic tags
Any element can serve as a tag. Simply choose the required "as" property value.
Schema.org
You can give elements the desired attributes through the code editor.
Image ALT
This is a separate property of the “Image” element.
Favicons
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
Use these settings for the correct display of your site 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 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