Unlimited customisation possibilities, no-code tools of a classic editor. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Create your website from scratch or ready-to-use templatesCreate Project
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Themes make it easy to give your website a unified appearance.
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Fine-tune your adaptive design
Choose an element or a group of elements on the page or on the Layer panel and turn them into a component. Add component copies to the page and they will inherit all the props.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
Different design solutions will be used for elements at breakpoints as your website automatically adapts to different screen sizes.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs.
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 element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Here you will find categorized style and functional properties.
Explore element display properties in this location.
To change text styles, use special properties in this section
You can configure margins and paddings in these settings.
The section contains props that enable you to set element backgrounds.
Here you have access to the tools for adjusting borders and border radius.
This category lets you fine-tune element position and z-index settings.
An element can transition from one state to another more easily thanks to this property.
Transform your element with ease using this property, for example, rotate or zoom.
Create custom React components using the code editor
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Modules from NPM can be imported into your component.
Optimize your site to promote it on search engines.
If you want to finish or host your project on your server, you can export it into an archive with a create-react-app project
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most popular static site generators, Gatsby, can be the destination for your exported projects.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
You can keep an eye on every entity on the page in the Quarkly editor.
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Any part can serve as a tag. Just choose the "as" property's desired value.
You can provide elements the appropriate characteristics in the code editor.
A special property of the “Image” element.
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
Open graph and meta tags
Your site will display appropriately thanks to these settings on social media and 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