Choose from one of many pre-made blocks. Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
Create a professional-looking design easily by using themes.
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
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.
You can also add ready-made blocks: maps, videos, pop-ups and much more.
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
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 link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.
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
Give your website a more vibrant look by using fonts from a library that contains over 990 font families.
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Enjoy a friendly interface with categorized styles and useful properties.
This is where you can locate element display properties.
Check out this section to take advantage of text style properties.
To configure margins and paddings, open these settings.
Here you'll find some props to help you set up element backgrounds.
Here you can adjust borders and border radius.
With this category, you can fine-tune element position and z-index settings.
This property makes an element transition smoothly from one state to another.
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if needed.
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
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit 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 editor displays all the entities of the page.
Monitor component code and page errors using the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Any element can serve as a tag. Simply select the "as" property value you require.
You can give elements the desired attributes through the code editor.
This is an individual property that belongs to the “Image” element.
You can install different icons for different devices, and you can also set a unique background color for Windows 10.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project