Publish your website online or export it to Github. Get all the power of graphic design tools and website builders. Create your website from scratch or ready-to-use templatesCreate Project
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Create a consistent and professional-looking design with the help of themes.
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
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 maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Ensure your website is fully responsive by using tailored design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your personal breakpoints or select one of the ones already in place.
You choose where to put the elements. You can move them around or nest them in other elements.
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
Quickly traverse the hierarchy of elements by double clicking, and hold Ctrl/Cmd to delve into it.
Support of Flexbox and Grid
Quarkly embraces the latest and greatest in frontend coding methods.
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.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Here you can find all the styles and functional properties.
Under this section, you can find element display properties.
To alter the appearance of your text, use the properties in this section.
Here you can configure margins and paddings, which control the space around elements.
This section contains props for setting up element backgrounds.
Here you can configure border and border radius.
This category helps you configure the position and z-index settings of elements.
This property makes an element move smoothly from one state to another.
This property will help you transform the element, for instance, rotate or zoom.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and then 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.
One step to complete your project or host it on your own server: export 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
Effortlessly, you can make a GitHub repository for your project and commit changes.
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
The Quarkly editor lets you see all the entities that are present on the page.
Our debug console will help you track errors in the component code and pages.
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
All edits you apply to the pages are shown in the code and vice versa.
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
All components can act as a tag. Just select the necessary “as” property value.
In the code editor, you can add attributes to elements as necessary.
The "Image" element features a separate property.
Install unique icons for different devices and individual tile background color for Windows 10.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
You may create user-friendly page URLs with this capability.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them as you think they fit in the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project