Complete design control, supports Grid and Flexbox. Publish your website online or export it to Github. Get all the power of graphic design tools and website buildersCreate Project
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Themes make it easy to give your website a unified appearance.
Boost your websites' functionality with distinctive layouts, animations, effects, and transformations.
Fine-tune your adaptive design
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.
You can also add ready-made blocks: maps, videos, pop-ups and much more.
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
Customize or edit breakpoints in the project theme as desired.
Drag and drop elements to arrange them on the page, or nest them in other elements.
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
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
Advanced frontend coding is at the forefront of Quarkly's approach.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
Find the perfect image with ease on Unsplash, a highly regarded free image stock, through Quarkly.
Here you'll find categorized collections of style and functional properties.
You can find the element display properties under this section.
Use the special properties in this section to alter the text's style.
Margin and padding configuration is available here.
In this section, you can find props for element backgrounds.
You can change the border radius and borders in this section.
This category helps you configure element position and z-index settings.
This property makes an element transition smoothly from one state to another.
You can transform the element using this property, for instance, rotate or zoom.
Create custom React components using the code editor
Create your own React components in the Quarkly code editor and seamlessly integrate them into the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM in a few clicks.
Optimize your site to promote it on search engines.
Easily complete or host your project on your server by exporting it into an archive with a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby — one of the most famous static-site generation web frameworks
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
Publish your site on Netlify once you're ready for it to go live. A technical domain will be created automatically for it, like: https://inspiring-beaver-d128ed.netlify.app
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
To find faults in the component code and pages, use our 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
Every change you make to a page is reflected in the code, and vice versa.
Join forces with your team using the Quarkly collaboration tool, all it takes is an invitation.
Any part can serve as a tag. Just choose the "as" property's desired value.
You can set desired attributes to elements in the code editor.
This is a separate property of the “Image” element.
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
Set these options appropriately to ensure that your website appears as intended in social media and search engine results.
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project