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

Landing page builder for frontend coders.
Meet Quarkly.

Publish your website online or export it to Github. Get all the power of graphic design tools and website builders. Choose from one of many pre-made blocks

Create Project

FOR WEB DESIGNERS

Full control over the design.

Primitives

The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.

Themes

Themes make it easy to give your website a unified appearance.

Extended Styling

By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.

Adaptive design

Fine-tune your adaptive design

Components

Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.

Ready-made Content

Get creative with ready-made blocks: maps, videos, pop-ups, and much more.

Quarkly Features. Example of how page looks with different breakpoints

Customizing design with breakpoints

Different design solutions will be used for elements at breakpoints as your website automatically adapts to different screen sizes.

Quarkly Features. Part of Quarkly interface featuring breakpoint settings

Adding and editing breakpoints

You can add custom breakpoints or edit existing ones in the project theme.

Drag'n'Drop

You can move the elements wherever you want. Nest them in other elements, or leave them as they are.

Multiselect

Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.

Quarkly Features. Partly styled text with text edit panel

Text editor

You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.

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

At Quarkly, we use the most advanced frontend coding techniques.

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

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

To modify the look of an element, such as its hover appearance, simply enable "hover" and customize the properties.

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 a popular free image stock. You can search and select images directly from the Quarkly interface.

Props panel

Experience the ease of using categorized style and functional properties.

Layout

Under this section, you can find element display properties.

Typography

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

Indents

To configure margins and paddings, open these settings.

Background

This section contains props that help set element backgrounds.

Borders

This section allows you to adjust borders and border radius.

Position

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

Transition

An element can transition from one state to another without interruption 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 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

Import modules to your component with ease, if needed.

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.