Web page builder for product designers.
Meet Quarkly.
Create your website from scratch or ready-to-use templates. Choose from one of many pre-made blocks. All-in-one website builder on React — Quarkly
Create Project
Full control over the design.
Primitives
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes
With themes, you can craft a consistent site design
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
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Ready-made Content
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can use your own custom breakpoints, or select one of the existing ones.
Drag'n'Drop
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
Multiselect
You can select multiple elements and set their styles, drag to another place, remove, and more.
Text editor
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Deep select
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs.
Support of Flexbox and Grid
At Quarkly, we keep up with the up-to-date frontend coding approaches.
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
To make your site design look more professional go and use a library of more than 990 font families.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Enjoy categorized styles and functional properties in a friendly interface.
Layout
Under this section, you can find element display properties.
Typography
You can change text styles by using special properties in this section.
Indents
Adjust margins and paddings with ease in these settings.
Background
The section contains props that enable you to set element backgrounds.
Borders
Here you can configure borders and border radius.
Position
This category lets you fine-tune element position and z-index settings.
Transition
This property makes an element transition smoothly from one state to another.
Transform
This property will help you transform the element, for instance, rotate or zoom.
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
You can easily import modules from NPM to your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
If your goal is to host a project on your server, here's the one thing you have to do: 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 work to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
Making a GitHub repository for your project and committing changes can be done with ease.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
The editor displays every entity on the page.
Debugger
Component code or page errors can be detected in the debug console.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
The code and pages both reflect any modifications made to the pages.
Unbeatable opportunities for business.
Collaboration
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
A special property of the “Image” element.
Favicons
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are automatically produced. But if necessary, you can alter them.
Web page builder for product designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project