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

Web page maker for web agencies.
Meet Quarkly.

Complete design control, supports Grid and Flexbox. Completely free — you should try it now. All-in-one website builder on React — Quarkly

Create Project

FOR WEB DESIGNERS

Total control over the design.

Primitives

These are the most basic components similar to HTML tags: Text, Image, Box, and others.

Themes

Create a professional-looking design easily by using themes.

Extended Styling

Bring life into your web page with stylish animations, effects, and transformations.

Adaptive design

Fine-tune your adaptive design

Components

You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.

Ready-made Content

With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.

Quarkly Features. Example of how page looks with different breakpoints

Customizing design with breakpoints

Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.

Quarkly Features. Part of Quarkly interface featuring breakpoint settings

Adding and editing breakpoints

In the project theme, you can modify already-existing breakpoints or add new ones.

Drag'n'Drop

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

Multiselect

This option allows you to select multiple elements and change their styles, place them on the page, etc.

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.

Deep select

Quickly traverse the hierarchy of elements by double clicking, and hold Ctrl/Cmd to delve into it.

Quarkly Features. Abstract examples of flexbox and grid

Support of Flexbox and Grid

We're thrilled to provide you with the top frontend coding techniques available.

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

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

If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.

Google Fonts Connection

To make your site design look more professional go and use a library of more than 990 font families.

Unsplash images

Select stunning images from the Unsplash library directly through the Quarkly interface.

Props panel

Make use of the categorized style and props to your advantage.

Layout

Here you will find the element display properties.

Typography

Use the properties in this section to change the text's appearance.

Indents

You can modify the padding and margins using these settings.

Background

This section contains props that help set element backgrounds.

Borders

Here you can configure borders and border radius.

Position

This category allows you to position elements and set their z-index values.

Transition

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

Transform

With the help of this property, you can rotate or zoom the element.

Create project

FOR WEB DEVELOPERS

Development capabilities.
Supercharged.

Create custom React components using the code editor

You can design distinctive React components in the Quarkly code editor and then insert 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.

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.