Choose from one of many pre-made blocks. Complete design control, supports Grid and Flexbox. Create your website from scratch or ready-to-use templatesCreate 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.
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Fine-tune your adaptive design
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
Choose from the preset breakpoints or use your own.
Place elements exactly where you want them on the page, whether it be by dropping them, nesting them, or moving them.
You can select multiple elements and modify their styles or drag'n'drop them to change their location.
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
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
At Quarkly, we use the most advanced frontend coding techniques.
Configuring styles of pseudo-classes hover/active/focus, etc.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Take advantage of the categorized style and functional props.
Check out this section to use element display properties.
Go to this section to find text style properties.
Open these settings to configure margins and paddings.
This section consists of props for element backgrounds.
Here you can configure border and border radius.
You can change the element position and z-index settings in this category.
This property makes an element move smoothly from one state to another.
With this property, you can transform the element, for instance, rotate or zoom.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and add them to the page.
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 your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
You can build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
To find faults in the component code and pages, use our debug console.
Tooltips in the code
If you're unsure about how to spell a particular attribute, just start typing, and the editor will correct you.
Synched pages and code editor
No matter what changes are made to the pages or code, both are always in sync.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
You can use each component as a tag. Just choose the needed value of the “as” property.
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
Get the right display for your website in search engines and social media through these settings.
You may increase the SEO of your site by using clean URLs.
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