All-in-one website builder on React — Quarkly. Publish your website online or export it to Github. Complete design control, supports Grid and Flexbox
Create ProjectPrimitives
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Ready-made Content
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
Drag'n'Drop
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
Multiselect
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
Text editor
Any style, a hyperlink, a span, an italicized or bolded section of the text, or other formatting options are available.
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
The most cutting-edge methods of front-end coding are supported by Quarkly.
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
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
Unsplash images
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
This provides categorized functional and stylistic attributes.
Layout
You can set the element display properties in this section.
Typography
Go to this section to find text style properties.
Indents
These settings offer options to change margins and paddings.
Background
The section contains props that enable you to set element backgrounds.
Borders
The properties for borders and border radius can be found here.
Position
In this category, you can change the settings for element position and z-index.
Transition
Elements can easily transition from one state to another thanks to this property.
Transform
This property allows you to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
You can build custom React components in the Quarkly code editor and after that add them to the page.
React.js
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.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to finish or host your project on your server, you can export it into an archive with a create-react-app project
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
Effortlessly, you can make a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Debugger
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
Any adjustments you make to the pages will also be reflected 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
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
You can customize elements with the necessary attributes in the code editor.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
User-friendly URL
You may create user-friendly page URLs with this capability.
Robots.txt and sitemap.xml
These files are automatically produced. However, you are free to modify them as you see fit in the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project