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

Web app editor for prototype designers.
Meet Quarkly.

Unlimited customisation possibilities, no-code tools of a classic editor. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Choose from one of many pre-made blocks

Create Project
Video from YouTube
FOR WEB DESIGNERS

Ultimate control over the design.

Primitives

Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.

Themes

Themes make it easy to create a consistent look for your website.

Extended Styling

Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.

Adaptive design

Fine-tune your adaptive design

Components

On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.

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

Ensure your website is fully responsive by using tailored design solutions for elements at breakpoints.

Quarkly Features. Part of Quarkly interface featuring  breakpoint settings

Adding and editing breakpoints

Add your own breakpoints or modify existing ones in the project theme.

Quarkly Features. Drag'n'Drop of elements

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.

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

Double clicking allows you to move up and down the element hierarchy, while holding Ctrl/Cmd lets you access deeper levels.

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.

Quarkly Features. Google Fonts Logo

Google Fonts Connection

Use fonts from a library that has over 990 font families in it to make your website look more colorful.

Quarkly Features. Unsplash Logo

Unsplash images

Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.

Quarkly Features. Part of Quarkly interface featuring the props panel

Props panel

Take advantage of the categorized style and props.

Quarkly Features. Example of changing properties from Layout group

Layout

Here you will find the element display properties.

Quarkly Features. Example of changing properties from Typography group

Typography

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

Quarkly Features. Example of changing properies from the Indents group

Indents

To set margins and paddings, open these settings.

Quarkly Features. Example of changing properies from Background group

Background

Here, you will have access to props for element background setup.

Quarkly Features. Example of changing properies from Borders group

Borders

Here you can set up borders and border radius.

Quarkly Features. Example of changing properies from Position group

Position

This category contains settings for configuring the position and z-index of elements.

Quarkly Features. Example of changing Transition property from Effects group

Transition

This property makes it easier for an element to change from one state to another.

Quarkly Features. Example of changing Transform property from Effects group

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

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

It has never been simpler to import modules from NPM into your component.

Semantic tags

SEO

Optimize your site to promote it on search engines.

Export CRA

Your project can be finished or hosted on your server by exporting it into an archive using a create-react-app project.

Code Editor

Fine-tune elements in the code editor.

Quarkly Features. Gatsby logo

Export to Gatsby Project

You can easily export your projects to Gatsby, which is 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 build a GitHub repository for your projects if necessary and commit updates there.

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

Publication on Netlify

Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.

Quarkly Features. Code in Quarkly editor

Modern built-in code editor

All of the page's entities are visible in the editor.

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

If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.

Quarkly Features. Example of synchronization between code and page

Synched pages and code editor

No matter what changes are made to the pages or code, both are always in sync.

Create project
WEB Entrepreneur

Stunning opportunities for business.

Collaboration

Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.

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

Semantic tags

Any part can serve as a tag. Just choose the "as" property's desired value.

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

Schema.org

You can give elements the desired attributes through the code editor.

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

Image ALT

A unique attribute of the "Image" element.

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

Favicons

Customize your device icons and set individual tile background color on Windows 10.

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

Open graph and meta tags

These settings will help your site display correctly on social networks and in search engines.

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

User-friendly URL

Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.

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

Robots.txt and sitemap.xml

These files are automatically generated. You can edit these files to suit your needs for the future.

Web app editor for prototype designers.
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