Web app editor for React coders.
Meet Quarkly.
Completely free — you should try it now. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocks
Create Project
Full creative control of your design.
Primitives
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Themes
It's simple to give your website a unified look with themes.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
Ready-made Content
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
Drag'n'Drop
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
Multiselect
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
Text editor
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
Deep select
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
At Quarkly, we support the latest and greatest in frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
Transform the appearance of an element, including its hover behavior, by turning on "hover" and adjusting the desired properties.
Google Fonts Connection
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Unsplash images
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
Here you will find categorized style and functional properties.
Layout
Get access to element display properties in this section.
Typography
To change the style of your text, use special properties in this section.
Indents
You can configure margins and paddings in these settings.
Background
Here, you will have access to props for element background setup.
Borders
Here you can configure border and border radius.
Position
This category helps you configure element position and z-index settings.
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
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
Importing modules from NPM to your component is a breeze.
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
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
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 displays all the entities of the page.
Debugger
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips in the code
Start typing and the editor will give you a list of suggestions.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Wonderful opportunities for business.
Collaboration
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Semantic tags
Any element can serve as a tag. Simply select the "as" property value you require.
Schema.org
In the code editor, you can provide items the required characteristics.
Image ALT
A separate property belonging to the “Image” element.
Favicons
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Optimize the display of your site in search engine results and on social media with these settings.
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
You can further change these automatically generated files.
Web app 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