Web page editor for frontend coders.
Meet Quarkly.
Completely free — you should try it now. All-in-one website builder on React — Quarkly. Get all the power of graphic design tools and website builders
Create Project
Ultimate control over the design.
Primitives
Text, Image, Box — the most basic components similar to HTML tags.
Themes
With themes, you can craft a consistent site design
Extended Styling
Put the power of animation, effects, and transformations at your fingertips.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
Drag'n'Drop
You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.
Multiselect
You can select multiple elements and set their styles, drag to another place, remove, and more.
Text editor
You can turn a part of the text into italic or bold, make it a link or convert to span, and use any style for it.
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
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Use the library of over 990 font families to make your site look more beautiful
Unsplash images
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Props panel
This provides categorized functional and stylistic attributes.
Layout
This is where you can locate element display properties.
Typography
You can apply the text style properties found here to your text.
Indents
To configure margins and paddings, open these settings.
Background
This section consists of props for element backgrounds.
Borders
In this section, you can adjust borders and border radius.
Position
This category lets you use position and z-index settings.
Transition
This property makes an element change smoothly from one state to another.
Transform
Use this property to seamlessly transform your element, for example, by rotating or zooming.
Development capabilities.
Supercharged.
Create custom React components using the code editor
The Quarkly code editor allows you to create unique React components 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 from NPM to your component quickly and easily.
SEO
Optimize your site to promote it on search engines.
Export CRA
One step to complete your project or host it on your own server: export 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, which is a popular static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and commit changes as you work.
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
You can monitor all the entities on the page in the Quarkly editor.
Debugger
Monitor component code and page errors using 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
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Stunning opportunities for business.
Collaboration
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
Semantic tags
You can use every component as a tag. Just choose the “as” property value that you need.
Schema.org
Assign attributes to elements with ease in the code editor.
Image ALT
A separate property belonging to the “Image” element.
Favicons
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
Enhance your site's visibility in search engines and ease of use with user-friendly URLs.
Robots.txt and sitemap.xml
These files are created automatically for you to edit further.
Web page editor for frontend coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project