Complete design control, supports Grid and Flexbox. Publish your website online or export it to Github. Choose from one of many pre-made blocksCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Using themes will help your website's design remain consistent.
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Fine-tune your adaptive design
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.
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.
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.
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
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
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Take advantage of the categorized style and functional props.
Here you can find element display properties.
Use the special properties in this section to alter the text's style.
You can configure margins and paddings in these settings.
This section offers props for setting up element backgrounds.
Here you can set up borders and border radius.
Element position and z-index settings can be adjusted in this category.
Elements can easily transition from one state to another thanks to this property.
With this property, you can transform the element, for instance, rotate or zoom.
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.
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.
Optimize your site to promote it on search engines.
One of the final steps to complete your project is to export it into an archive with a create-react-app project.
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.
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.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
All components can act as a tag. Just select the necessary “as” property value.
In the code editor, you can assign desired attributes to any element.
This is an individual property that belongs to the “Image” element.
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.
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.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project