Web app editor for web designers.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Publish your website online or export it to Github. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS
Create Project
Full control over the design.
Primitives
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Themes
Utilize themes to build a consistent and attractive design for your website.
Extended Styling
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
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
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
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.
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
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.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
Unsplash images
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
Take advantage of the categorized style and props.
Layout
Under this section, you can find element display properties.
Typography
Use this section to customize text styles
Indents
Here you can configure margins and paddings.
Background
This section offers props for setting up element backgrounds.
Borders
You can change the border radius and borders in this section.
Position
In this category, you can change the settings for element position and z-index.
Transition
An element can transition from one state to another without interruption thanks to this property.
Transform
You can rotate or zoom the element using this property, for example.
Development capabilities.
Supercharged.
Create custom React components using the code editor
With the Quarkly code editor, you can create custom React components and then use them on a webpage.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM in a few clicks.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
In the Quarkly editor, you can find all the entities of the page.
Debugger
Component code or page errors can be detected in the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
No matter what changes are made to the pages or code, both are always in sync.
Remarkable opportunities for business.
Collaboration
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
You can give any element the required characteristics in the code editor.
Image ALT
This particular property is a part of the "Image" element.
Favicons
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
Web app editor for web designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project