Get all the power of graphic design tools and website builders. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Choose from one of many pre-made blocksCreate Project
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Themes make it easy to create a consistent look for your website.
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
Add ready-made blocks: maps, videos, pop-ups, and much more
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
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 go up and down the hierarchy of elements using the double click. If you want to dive into the hierarchy, on Windows hold down the Ctrl key and on MacOs the Cmd key.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Make use of organized and categorized style and functional properties to improve your project.
Here you can find element display properties.
Use the properties in this section to change the text's appearance.
In these settings, you can set margins and paddings.
Props for element backgrounds can be found in this section.
With these options, you can set up borders and border radius.
With this category, you can fine-tune element position and z-index settings.
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
If necessary, quickly import modules into your component through NPM.
Optimize your site to promote it on search engines.
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby — one of the best open source Static Site Generators.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
You can track issues in the component code and pages with the aid of 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
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
You can make a component act as a tag by setting the “as” property to the desired value.
Assign attributes to elements with ease in the code editor.
The "Image" element has a unique property.
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
Use human-readable URLs to increase the SEO of your website.
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