Publish your website online or export it to Github. Use pre-made React components or build your own. Get all the power of graphic design tools and website buildersCreate Project
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
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
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
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
You can change current breakpoints in the project theme or add new ones.
Move elements around, place them however you want on the page, or nest them in other elements.
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
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.
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
At Quarkly, we support the latest and greatest in frontend coding.
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
Use the library of over 990 font families to make your site look more beautiful
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Style and utility characteristics are categorized here.
This section lets you control how elements appear.
Browse text style properties in this section
Here you will find the settings for margins and paddings.
For element backgrounds, look in this section for props.
Here you can adjust borders and border radius.
This category contains settings for configuring the position and z-index of elements.
Elements can easily transition from one state to another thanks to this property.
This property allows you to manipulate the element, such as by rotating or zooming.
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
Import modules from NPM quickly, if you need to.
Optimize your site to promote it on search engines.
If you want to host your project on your server, you can export it into an archive with create-react-app.
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
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
If you are not sure how to spell a property, start typing and the editor will help you.
Synched pages and code editor
When you edit a page, the changes are applied to the code and vice versa.
Join forces with your team using the Quarkly collaboration tool, all it takes is an invitation.
Every component has the ability to act like a tag. Simply select the necessary value for the "as" field.
In the code editor, you can give items the desired attributes.
This is an individual property that belongs to 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
These options are designed to ensure that your website appears properly in search engine results and on social media.
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project