What do you think about us? Fill out the survey! 🤗⚡️ We are hiring! Check out our vacancies ⚡️

Website maker for React coders.
Meet Quarkly.

All-in-one website builder on React — Quarkly. Choose from one of many pre-made blocks. Complete design control, supports Grid and Flexbox

Create Project

FOR WEB DESIGNERS

Absolute control over the design.

Primitives

Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.

Themes

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

Extended Styling

Make your websites more useful by adding original layouts, animations, effects, and transformations.

Adaptive design

Fine-tune your adaptive design

Components

Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.

Ready-made Content

Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more

Quarkly Features. Example of how page looks with different breakpoints

Customizing design with breakpoints

By utilizing various design approaches for elements at breakpoints, your website is completely responsive to mobile devices.

Quarkly Features. Part of Quarkly interface featuring breakpoint settings

Adding and editing breakpoints

Use your own breakpoints or choose one of the ones that are already there.

Drag'n'Drop

Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.

Multiselect

You can select multiple elements and set their styles, drag to another place, remove, and more.

Quarkly Features. Partly styled text with text edit panel

Text editor

A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.

Deep select

Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.

Quarkly Features. Abstract examples of flexbox and grid

Support of Flexbox and Grid

Quarkly supports the most modern methods of 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 way an element looks, such as its appearance on hover, enable the "hover" prop and set other desired props.

Google Fonts Connection

If you want your site design to look more professional, consider using a library of more than 990 font families.

Unsplash images

Unsplash is one of the most popular websites for free photos. You can look for and select images using the Quarkly interface.

Props panel

Take advantage of the categorized style and props.

Layout

Get access to element display properties in this section.

Typography

To alter the appearance of your text, use the properties in this section.

Indents

Here you can configure margins and paddings.

Background

This section contains props that help set element backgrounds.

Borders

Here you can configure border and border radius.

Position

In this category, you can change the settings for element position and z-index.

Transition

This property makes an element transit smoothly from one state to another.

Transform

This property allows you to manipulate the element, such as by rotating or zooming.

Create project

FOR WEB DEVELOPERS

Development capabilities.
Supercharged.

Create custom React components using the code editor

Custom React components can be made in Quarkly's code editor and then inserted onto the page.

React.js

The pages are written in JSX code typical for React.js.

Hot import from NPM

You can easily import modules from NPM to your component.

Semantic tags

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.