Completely free — you should try it now. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
You can make your site's design consistent by using themes.
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Fine-tune your adaptive design
Select a single element or multiple elements on the page or Layer panel and convert them into a component. Place component copies on the page and enjoy the inheritance of all properties.
Add ready-made blocks: maps, videos, pop-ups, and much more
Customizing design with breakpoints
Make sure your site is 100% adaptive by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.
You can choose multiple elements, set their styles, move to another place, delete, 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.
Double-click to go up and down the hierarchy of elements. To dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
We follow up-to-date frontend coding approaches at Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Enjoy a friendly interface with categorized styles and useful properties.
Here you can change the way elements appear.
You can apply the text style properties found here to your text.
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 borders and border radius.
You can change the element position and z-index settings in this category.
Elements can easily transition from one state to another thanks to this property.
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 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 from NPM with ease.
Optimize your site to promote it on search engines.
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your work to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
If needed, you can create 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.
Errors in the component code or pages can be seen in the 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
When you make changes to the page, you can see those same edits reflected in the code.
Work on a project together with your team using the Quarkly collaboration tool, simply send them an invitation.
All components can act as a tag. Just select the necessary “as” property value.
In the code editor, you can give items the desired attributes.
This is a separate property of the “Image” element.
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
To improve your site's SEO, make sure the URLs are readable by humans.
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