Website maker for web designers.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Publish your website online or export it to Github. Choose from one of many pre-made blocks
Create Project
Full creative control of your design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Using themes will help your website's design remain consistent.
Extended Styling
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
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
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
Customizing design with breakpoints
By utilizing various design approaches for elements at breakpoints, your website is completely responsive to mobile devices.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
Drag'n'Drop
Place elements however you want on the page — that is your choice. You can drop them in the desired area, or nest them in other ones.
Multiselect
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
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
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
We're excited to offer you the best frontend coding practices around.
Configuring styles of pseudo-classes hover/active/focus, etc.
To make an element appear differently, such as with a hover state, enable the "hover" prop and configure the desired props.
Google Fonts Connection
Use the library of over 990 font families to make your site look more beautiful
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 functional props.
Layout
Here you can find element display properties.
Typography
Use the special properties in this section to alter the text's style.
Indents
You can configure margins and paddings in these settings.
Background
This section offers props for setting up element backgrounds.
Borders
Here you can set up borders and border radius.
Position
Element position and z-index settings can be adjusted in this category.
Transition
Elements can easily transition from one state to another thanks to this property.
Transform
With this property, you can 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 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 in no time, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
One of the final steps to complete your project is to 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
You can build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
When your site is ready, publish it on Netlify. It'll have a technical domain, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor shows all the entities that are present on the page.
Debugger
You can keep track of component code and page errors with the debug console.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
As you make changes to the pages, the changes display in the code and vice versa.
Unbeatable opportunities for business.
Collaboration
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
In the code editor, you can assign desired attributes to any element.
Image ALT
This is an individual property that belongs to 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
Enhance your site's visibility in search engines and ease of use with user-friendly 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.
Website maker 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