Website editor for digital agencies.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editor. Completely free — you should try it now
Create Project
Total control over the design.
Primitives
Text, Image, Box — the most basic components similar to HTML tags.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Adaptive design
Fine-tune your adaptive design
Components
On the page, you can select an element (or a collection of elements) and turn them into a component. All the props will be passed on to copies that are added to the page.
Ready-made Content
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Choose from the preset breakpoints or use your own.
Drag'n'Drop
Drag and drop elements to arrange them on the page, or nest them in other elements.
Multiselect
You can apply styles to multiple elements at once and move them around, as well as remove them.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
You can double-click to go up and down the hierarchy of your objects. If you need to get inside the hierarchy, hold down the Ctrl key on Windows or Cmd on MacOs.
Support of Flexbox and Grid
Quarkly embraces the latest and greatest in frontend coding methods.
Configuring styles of pseudo-classes hover/active/focus, etc.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Here you can find all the styles and functional properties.
Layout
This section allows you to configure the display properties of elements.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
You can modify the padding and margins in these settings.
Background
This section contains props that help set element backgrounds.
Borders
In this section, you can adjust borders and border radius.
Position
This category helps you configure the position and z-index settings of elements.
Transition
This property makes an element transition smoothly from one state to another.
Transform
Transform your element with ease using this property, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component from NPM in no time, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Code Editor
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
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
All of the entities that are present on the page are displayed by the editor.
Debugger
Keep an eye on component code and page errors with the help of the debug console.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Amazing opportunities for business.
Collaboration
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Semantic tags
Every component can act as a tag. Just choose the “as” property value that you need.
Schema.org
You can edit the necessary attributes of elements in the code editor.
Image ALT
A special property of the “Image” element.
Favicons
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
User-friendly URL
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
Website editor for digital agencies.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project