Web page editor for React coders.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editor. All-in-one website builder on React — Quarkly
Create Project
Ultimate control over the design.
Primitives
The simplest, most basic components similar to HTML tags. For example, Text, Image, and Вох.
Themes
Themes can help you design your website consistently.
Extended Styling
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Ready-made Content
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
Customizing design with breakpoints
By utilizing various design approaches for elements at breakpoints, your website is completely responsive to mobile devices.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
Drag'n'Drop
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Multiselect
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
Advanced frontend coding is at the forefront of Quarkly's approach.
Configuring styles of pseudo-classes hover/active/focus, etc.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
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
Here you will find categorized style and functional properties.
Layout
You can set the element display properties in this section.
Typography
You can change text styles by using special properties in this section.
Indents
To set margins and paddings, open these settings.
Background
This section consists of props for element backgrounds.
Borders
Here you can set up borders and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
This property makes an element change smoothly from one state to another.
Transform
With this property, you can transform the element, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
With the Quarkly code editor, you can 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
If you want to finish or host your project on your server, there is only one thing you need to do: export it as an archive using a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your work to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor shows each and every entity that is present on the page.
Debugger
The debug console shows errors in the component code or pages.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
As you make changes to the pages, the changes display in the code and vice versa.
Wonderful 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 give elements the desired attributes through the code editor.
Image ALT
A special property of the “Image” element.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
User-friendly URL
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
These files are automatically produced. However, you are free to modify them as you see fit in the future.
Web page editor for React coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project