Complete design control, supports Grid and Flexbox. Create your website from scratch or ready-to-use templates. Use pre-made React components or build your ownCreate Project
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
You can make your site's design consistent by using themes.
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
By creating various solutions for elements at breakpoints, you can ensure that your website is mobile-friendly.
Adding and editing breakpoints
You can change current breakpoints in the project theme or add new ones.
Move elements around, place them however you want on the page, or nest them in other elements.
You can remove, drag to a different location, style, remove, and more multiple elements simultaneously.
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
Double-click to go up and down the hierarchy of elements. To dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Quarkly embraces the latest and greatest in frontend coding methods.
Configuring styles of pseudo-classes hover/active/focus, etc.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
Make your website design look sleek and modern with the library of over 990 font families.
Unsplash is one of the most popular websites for free photos. You can look for and select images using the Quarkly interface.
This provides categorized functional and stylistic attributes.
In this section, you can configure element display properties.
To alter the appearance of your text, use the properties in this section.
To configure margins and paddings, open these settings.
This section consists of props for element backgrounds.
Here you can set up borders and border radius.
This category helps you configure the position and z-index settings of elements.
With this property, you can make an element move smoothly from one state to another.
Use this property to seamlessly transform your element, for example, by rotating or zooming.
Create custom React components using the code editor
You can design distinctive React components in the Quarkly code editor and then insert them on the page.
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.
Optimize your site to promote it on search engines.
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!
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
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
The editor displays all the entities of the page.
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Component-to-tag transformation made simple with the right "as" property value selection.
In the code editor, you can assign necessary attributes to elements.
A special property of the “Image” element.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project