Web app maker for ui designers.
Meet Quarkly.
Unlimited customisation possibilities, no-code tools of a classic editor. 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 creative control of your design.
Primitives
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
Themes
Build a consistent design using themes
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
Select a single element or multiple elements on the page or Layer panel and convert them into a component. Place component copies on the page and enjoy the inheritance of all properties.
Ready-made Content
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
Drag'n'Drop
You choose where to put the elements. You can move them around or nest them in other elements.
Multiselect
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
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
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
The most cutting-edge frontend coding techniques are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the way an element looks, such as its appearance on hover, enable the "hover" prop and set other desired props.
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 one of the most popular websites for free photos. You can look for and select images using the Quarkly interface.
Props panel
This provides categorized functional and stylistic attributes.
Layout
If you want to use element display properties, look at this section.
Typography
To find the text style properties, go to this section.
Indents
You can configure margins and paddings in these settings.
Background
Props for element backgrounds can be found in this section.
Borders
Here you can adjust borders and border radius.
Position
In this category, you can change the settings for element position and z-index.
Transition
Elements can easily transition from one state to another thanks to this property.
Transform
You can transform the element using this property, for instance, rotate or zoom.
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 from NPM with ease.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to host your project on your server, you can export it into an archive with create-react-app.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most popular static site generators, Gatsby, can be the destination for your exported projects.
Pushing commits to your GitHub repository
Effortlessly, you can make a GitHub repository for your project and commit changes.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
The editor displays every entity on the page.
Debugger
The debug console shows errors in the component code or pages.
Tooltips in the code
If you don't know exactly how to spell a property, start typing and the editor will help you.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Wonderful opportunities for business.
Collaboration
Quickly invite teammates to work on your projects in Quarkly.
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
You can set desired attributes to elements in the code editor.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
User-friendly URL
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
These files are automatically produced. However, you are free to modify them as you see fit in the future.
Web app maker for ui designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project