Choose from one of many pre-made blocks. Completely free — you should try it now. Use pre-made React components or build your ownCreate Project
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Using themes you can create a consistent design for your site
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Fine-tune your adaptive design
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.
You can also add ready-made blocks: maps, videos, pop-ups and much more.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
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.
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
You can turn a part of the text into italic or bold, make it a link or convert to span, and use any style for it.
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
We follow up-to-date frontend coding approaches at Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Enjoy the convenience of having categorized style and functional properties at your fingertips.
If you want to use element display properties, look at this section.
Here you'll find text style properties that can be applied to your text.
Here you can configure margins and paddings, which control the space around elements.
Here, you will have access to props for element background setup.
You can set borders and border radius in this section.
You can change the element position and z-index settings in this category.
This property makes it possible for elements to move smoothly from one state to another.
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 custom React components and then use them on a webpage.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Importing modules to your component from NPM has never been easier.
Optimize your site to promote it on search engines.
If you want to host your project on your server, you can export it into an archive with create-react-app.
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
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor allows you to see all the entities on the page.
Errors in the component code or pages will show up in the debug console.
Tooltips in the code
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Make every component work as a tag by selecting the desired "as" property value.
You can set desired attributes to elements in the code editor.
The "Image" element has a unique property.
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.
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
These files are automatically produced. But if necessary, you can alter them.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project