Unlimited customisation possibilities, no-code tools of a classic editor. Create your website from scratch or ready-to-use templates. Get all the power of graphic design tools and website builders
Create ProjectPrimitives
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Themes
Build a professional-looking design using themes
Extended Styling
Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Components are reusable design elements. To create a component, select an element or group of elements on the page or in the Layers panel and group them into component. Add copies of the component to the page, and they will inherit all their properties from the original.
Ready-made Content
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can use your own custom breakpoints, or select one of the existing ones.
Drag'n'Drop
Drag and drop elements to arrange them on the page, or nest them in other elements.
Multiselect
You can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
Text editor
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
Deep select
You can go up and down the hierarchy of elements using the double click. If you want to dive into the hierarchy, on Windows hold down the Ctrl key and on MacOs the Cmd key.
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 element appearance, for example, the way it behaves on hover, enable "hover" and apply 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.
Unsplash images
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Here you'll find categorized collections of style and functional properties.
Layout
Under this section, you can find element display properties.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
In these settings, you can set margins and paddings.
Background
This section consists of props for element backgrounds.
Borders
Here you can set up borders and border radius.
Position
This category lets you fine-tune element position and z-index settings.
Transition
This property helps an element move smoothly from one state to another.
Transform
This property allows you to transform the element, for example, rotate or zoom.
Making custom React components in the code editor
The Quarkly code editor allows you to create unique React components and then place them on the page.
React.js
The pages are written in JSX code typical for React.js
Hot import from NPM
You can easily import modules from NPM to your component.
SEO
Optimize your site to promote it on search engines
Export CRA
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
Code Editor
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
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
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
In the Quarkly editor, you can monitor all the entities that are present on the page.
Debugger
Errors in the component code or pages can be seen in the debug console.
Code tips
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
As you make changes to the pages, the changes display in the code and vice versa.
Work together as a team
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
In the code editor, you can assign desired attributes to any element.
Image ALT
A special property of the “Image” element.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
These files are created automatically for you to edit further.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project