Website editor for React developers.
Meet Quarkly.
All-in-one website builder on React — Quarkly. Complete design control, supports Grid and Flexbox. Get all the power of graphic design tools and website builders
Create Project
Full control over the design.
Primitives
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
Themes
With themes, you can craft a consistent site design
Extended Styling
Use animation, effects, and transformations to make your web page come to life.
Adaptive design
Fine-tune your adaptive design
Components
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Ready-made Content
Add ready-made blocks: maps, videos, pop-ups, and many 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
Customize or edit breakpoints in the project theme as desired.
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 select multiple elements and set their styles, drag to another place, remove, and more.
Text editor
Edit the text in any way you like, make it bold or italic, create a link, convert to span, and apply any style.
Deep select
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
We're excited to offer you the best frontend coding practices around.
Configuring styles of pseudo-classes hover/active/focus, etc.
Alter the appearance of an element, such as its hover behavior, by turning on "hover" and setting the required properties.
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
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Props panel
Enjoy the convenience of having categorized style and functional properties at your fingertips.
Layout
Explore element display properties in this location.
Typography
Browse text style properties in this section
Indents
Open these settings to configure margins and paddings.
Background
Props in this section help create the backgrounds for the elements.
Borders
You can define borders and border radius using these options.
Position
Customize element position and z-index through these settings in this category.
Transition
An element can transition from one state to another more easily thanks to this property.
Transform
This property will help you transform the element, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique 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
It has never been simpler to import modules from NPM into your component.
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
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: 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 don't know exactly how to spell a property, start typing and the editor will help you.
Synched pages and code editor
As you make changes to the pages, the changes display in the code and vice versa.
Fantastic opportunities for business.
Collaboration
Quickly invite teammates to work on your projects in Quarkly.
Semantic tags
Any part can serve as a tag. Just choose the "as" property's desired value.
Schema.org
You can edit the necessary attributes of elements in the code editor.
Image ALT
A unique attribute that belongs to the "Image" element.
Favicons
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
User-friendly URL
You may create user-friendly page URLs with this capability.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
Website editor for React developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project