Web page maker for ux designers.
Meet Quarkly.
All-in-one website builder on React — Quarkly. Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox
Create Project
Ultimate control over the design.
Primitives
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
Themes
You can make your site's design consistent by using themes.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
Ready-made Content
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Different design solutions will be used for elements at breakpoints as your website automatically adapts to different screen sizes.
Adding and editing breakpoints
You can use your own custom breakpoints, or select one of the existing ones.
Drag'n'Drop
Drag and drop elements to arrange them on the page, or nest them in other elements.
Multiselect
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or the Cmd key on MacOs.
Support of Flexbox and Grid
We follow up-to-date frontend coding approaches at Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
Alter the appearance of an element, such as its hover behavior, by turning on "hover" and setting the required properties.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Unsplash images
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Props panel
Style and utility characteristics are categorized here.
Layout
You can set the element display properties in this section.
Typography
Go to this section to find text style properties.
Indents
These settings offer options to change margins and paddings.
Background
This section has props you can use to set up element backgrounds.
Borders
Here you can adjust borders and border radius.
Position
This category contains settings for configuring the position and z-index of elements.
Transition
This property makes an element change smoothly from one state to another.
Transform
With the help of this property, you can rotate or zoom an element.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Importing modules from NPM to your component is a breeze.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you need to complete or host your project on your own server, it's easy: just export it into an archive with a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there if necessary.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Debugger
Use our debug console to track errors in the component code and pages.
Tooltips in the code
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Unbeatable opportunities for business.
Collaboration
Quickly invite teammates to work on your projects in Quarkly.
Semantic tags
Any element can serve as a tag. Simply choose the required "as" property value.
Schema.org
You can give any element the required characteristics in the code editor.
Image ALT
A unique attribute of the "Image" element.
Favicons
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
User-friendly URL
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
Automated file creation with the option to edit as desired.
Web page maker for ux designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project