What do you think about us? Fill out the survey! πŸ€—βš‘οΈ We are hiring! Check out our vacancies ⚑️

Web page editor for React engineers.
Meet Quarkly.

Publish your website online or export it to Github. Use pre-made React components or build your own. Create your website from scratch or ready-to-use templates

Create Project
Video from YouTube
FOR WEB DESIGNERS

Absolute creative control of your design.

Primitives

Basic elements that resemble HTML tags: Text, Image, Box, and others.

Themes

You can make your site's design consistent by using themes.

Extended Styling

Now your website will be noticed! Use our unique animations, catchy layouts, 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 videos, pop-ups, customized blocks, and much more to your site.

Quarkly Features. Example of how page looks with different breakpoints

Customizing design with breakpoints

Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.

Quarkly Features. Part of Quarkly interface featuring  breakpoint settings

Adding and editing breakpoints

You can create, edit, or delete custom breakpoints in the project theme.

Quarkly Features. Drag'n'Drop of elements

Drag'n'Drop

The choice is yours on how to arrange elements on the page β€” nest them, move them, or drop them in the desired area.

Quarkly Features. Select of multiple elements (button and text)

Multiselect

Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.

Quarkly Features. Partly styled text with text edit panel

Text editor

Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.

Quarkly Features. Spacing display

Deep select

Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.

Quarkly Features. Abstract examples of flexbox and grid

Support of Flexbox and Grid

Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.

Quarkly Features. Example of buttons with different styles depending on pseudo-class

Configuring styles of pseudo-classes hover/active/focus, etc.

To change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.

Quarkly Features. Google Fonts Logo

Google Fonts Connection

Make your website design more expressive by connecting fonts from a library with more than 990 font families.

Quarkly Features. Unsplash Logo

Unsplash images

Unsplash is one of the most popular free image stocks. Search and select images directly from the Quarkly interface

Quarkly Features. Part of Quarkly interface featuring the props panel

Props panel

Style and utility characteristics are categorized here.

Quarkly Features. Example of changing properties from Layout group

Layout

Get access to element display properties in this section.

Quarkly Features. Example of changing properties from Typography group

Typography

To change text styles, use special properties in this section

Quarkly Features. Example of changing properies from the Indents group

Indents

These settings offer options to change margins and paddings.

Quarkly Features. Example of changing properies from Background group

Background

This section contains props that help you create element backgrounds.

Quarkly Features. Example of changing properies from Borders group

Borders

Find the options for borders and border radius configuration in this section.

Quarkly Features. Example of changing properies from Position group

Position

This category helps you configure the position and z-index settings of elements.

Quarkly Features. Example of changing Transition property from Effects group

Transition

Elements can easily transition from one state to another thanks to this property.

Quarkly Features. Example of changing Transform property from Effects group

Transform

This property will help you transform the element, for instance, rotate or zoom.

Create project
FOR WEB DEVELOPERS

Development capabilities.
Supercharged.

Create custom React components using the code editor

In Quarkly, you can create custom React components in the code editor 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 quickly, if you need to.

Semantic tags

SEO

Optimize your site to promote it on search engines.

Export CRA

Easily complete or host your project on your server by exporting it into an archive with a create-react-app project.

Code Editor

Fine-tune elements in the code editor.

Quarkly Features. Gatsby logo

Export to Gatsby Project

One of the most popular static site generators, Gatsby, can be the destination for your exported projects.

Quarkly Features. Part of Quarkly interface featuring list of layers and contextual menu

Pushing commits to your GitHub repository

If you'd like to keep track of your changes, you can create a GitHub repository and commit them.

Quarkly Features. Part of Quarkly interface featuring list of layers and contextual menu

Publication on Netlify

Once your site is ready, you can publish it on Netlify with a technical domain name like https://inspiring-beaver-d128ed.netlify.app.

Quarkly Features. Code in Quarkly editor

Modern built-in code editor

The Quarkly editor lets you see all the entities that are present on the page.

Quarkly Features. Example of errors in Debugger

Debugger

Errors in the component code or pages can be tracked by viewing the debug console.

Quarkly Features.  Example of hint in Quarkly code editor

Tooltips in the code

Don't let spelling uncertainties hold you back β€” start typing and the editor will guide you.

Quarkly Features. Example of synchronization between code and page

Synched pages and code editor

When you edit a page, the changes are applied to the code and vice versa.

Create project
WEB Entrepreneur

Incredible opportunities for business.

Collaboration

Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.

Quarkly Features. Part of Quarkly interface featuring "as" property of Text element

Semantic tags

Component-to-tag transformation made simple with the right "as" property value selection.

Quarkly Features. Quarkly code editor, adding Schema.org attributes to Box element

Schema.org

You can specify desired attributes for elements in the code editor.

Quarkly Features. Part of Quarkly editor, editing value of  Alt property of Image attribute

Image ALT

The "Image" element has a distinct property for this.

Quarkly Features. Part of Quarkly interface featuring list of layers and contextual menu

Favicons

Install distinctive device icons and a customized Windows tile backdrop color.

Quarkly Features. Part of Quarkly interface featuring list of layers and contextual menu

Open graph and meta tags

These settings will help your website look its best on social networks and in search engines.

Quarkly Features. Part of Quarkly interface featuring list of layers and contextual menu

User-friendly URL

This feature allows you to set user-friendly page URLs.

Quarkly Features. Part of Quarkly interface featuring list of layers and contextual menu

Robots.txt and sitemap.xml

These files are there for you to use. But you can change them and add to them as you see fit.

Web page 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
Join the community
Connect with our team & other users to discuss the latest updates, ask questions, request new features & share your projects with Quarkly community.
Quarkly - Design tool to create sites & web apps on React | Product Hunt