Create your website from scratch or ready-to-use templates. Publish your website online or export it to Github. Completely free — you should try it now
Create ProjectPrimitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Themes can help you design your website consistently.
Extended Styling
Make your site stand out from the crowd with eye-catching layouts, animations, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
Ready-made Content
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
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
Use your own breakpoints or choose one of the ones that are already there.
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 select multiple elements and modify their styles or drag'n'drop them to change their location.
Text editor
You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
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 frontend coding techniques are supported by 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
The library of over 990 font families will help make your site look more beautiful.
Unsplash images
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Style and utility characteristics are categorized here.
Layout
This section allows you to configure the display properties of elements.
Typography
To change the style of your text, use special properties in this section.
Indents
Open these settings to configure margins and paddings.
Background
For element backgrounds, look in this section for props.
Borders
In this section, you can adjust borders and border radius.
Position
This category lets you use position and z-index settings.
Transition
Elements can easily transition from one state to another thanks to this property.
Transform
This property will help you transform the element, for instance, rotate or zoom.
Create custom React components using the code editor
With the Quarkly code editor, you can create unique React components and then place them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
It has never been simpler to import modules from NPM into your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
There is just one thing to do if you want to finish or host your project on your server: 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, which is a popular static site generator.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
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
You can keep track of component code and page errors with the debug console.
Tooltips in the code
If you are not sure how to spell a property, start typing and the editor will help you.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Collaboration
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
Assign attributes to elements with ease in the code editor.
Image ALT
The "Image" element has a distinct property for this.
Favicons
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
User-friendly URL
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project