Website editor for React engineers.
Meet Quarkly.
Unlimited customisation possibilities, no-code tools of a classic editor. Use pre-made React components or build your own. Complete design control, supports Grid and Flexbox
Create Project
Full control over the design.
Primitives
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
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
Add premade blocks, including videos, pop-ups, maps, 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
You can customize the breakpoints in your project theme by adding or editing them.
Drag'n'Drop
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Multiselect
You can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
Text editor
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
Deep select
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs.
Support of Flexbox and Grid
We're thrilled to provide you with the top frontend coding techniques available.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Unsplash images
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Enjoy categorized styles and functional properties in a friendly interface.
Layout
In this section, you can configure element display properties.
Typography
Use this section to customize text styles
Indents
Here you can configure margins and paddings, which control the space around elements.
Background
Here, you will have access to props for element background setup.
Borders
With these options, you can set up borders and border radius.
Position
In this category, you can change the settings for element position and z-index.
Transition
This property makes it easier for an element to change from one state to another.
Transform
This property allows you to transform the element, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can create your own React components using the Quarkly code editor and then add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
If necessary, quickly import modules into your component through NPM.
SEO
Optimize your site to promote it on search engines.
Export CRA
Your project can be finished or hosted on your server by exporting it into an archive using a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
When your site is ready, publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor shows all the entities that are present on the page.
Debugger
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Remarkable opportunities for business.
Collaboration
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Semantic tags
You can make a component act as a tag by setting the “as” property to the desired value.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
This particular property is a part of the "Image" element.
Favicons
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
User-friendly URL
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
These files are automatically produced. But if necessary, you can alter them.
Website editor for React engineers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project