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

Web page editor for full stack coders.
Meet Quarkly.

Get all the power of graphic design tools and website builders. All-in-one website builder on React — Quarkly. Publish your website online or export it to Github

Create Project

FOR WEB DESIGNERS

Ultimate control over the design.

Primitives

The simplest, most basic components similar to HTML tags. For example, Text, Image, and Вох.

Themes

Create a professional-looking design easily by using themes.

Extended Styling

Make your site stand out from the crowd with eye-catching layouts, animations, 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

Enhance your page with ready-made blocks including 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

You can customize the breakpoints in your project theme by adding or editing them.

Drag'n'Drop

You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.

Multiselect

You can remove, drag to a different location, style, remove, and more multiple elements simultaneously.

Quarkly Features. Partly styled text with text edit panel

Text editor

You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.

Deep select

You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.

Quarkly Features. Abstract examples of flexbox and grid

Support of Flexbox and Grid

Here at Quarkly, we support the most advanced 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, the way it behaves on hover, just enable "hover" and set up the desired props.

Google Fonts Connection

By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.

Unsplash images

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

Props panel

Here you will find categorized style and functional properties.

Layout

Element display properties can be found here.

Typography

Here you'll find text style properties that can be applied to your text.

Indents

To set margins and paddings, open these settings.

Background

For element backgrounds, look in this section for props.

Borders

Here you can adjust borders and border radius.

Position

Customize element position and z-index through these settings in this category.

Transition

You can ensure a smooth transition between states of an element with this property.

Transform

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

Create project

FOR WEB DEVELOPERS

Development capabilities.
Supercharged.

Create custom React components using the code editor

You can build and add custom React components to your Quarkly pages using the code editor.

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

Simply export it as an archive using a create-react-app project if you need to finish or host your project on your own server.

Code Editor

Fine-tune elements in the code editor.

Export to Gatsby Project

You can easily export your work to Gatsby, a popular static site generator.

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

Pushing commits to your GitHub repository

You can store your project in a GitHub repository and make changes to it.

Publication on Netlify

Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.