Web page editor for web agencies.
Meet Quarkly.
Get all the power of graphic design tools and website builders. Complete design control, supports Grid and Flexbox. All-in-one website builder on React — Quarkly
Create Project
Absolute creative control of your design.
Primitives
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Themes
Build a professional-looking design using themes
Extended Styling
Make your website unforgettable with creative layouts, dynamic animations, and exciting transformations.
Adaptive design
Fine-tune your adaptive design
Components
You can create reusable components from any selection of elements on the page or in a layer. When you add the component to a page, it inherit all of its original properties.
Ready-made Content
Add ready-made blocks: maps, videos, pop-ups, and many more
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
Choose from the preset breakpoints or use your own.
Drag'n'Drop
The choice is yours on how to arrange elements on the page — nest them, move them, or drop them in the desired area.
Multiselect
You can drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
Text editor
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
Deep select
Quickly traverse the hierarchy of elements by double clicking, and hold Ctrl/Cmd to delve into it.
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 appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Connecting fonts from a library with more than 990 font families will help your website design express the personality of your brand.
Unsplash images
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Props panel
Here you will find categorized style and functional properties.
Layout
Here you can change the way elements appear.
Typography
To find the text style properties, go to this section.
Indents
To set margins and paddings, open these settings.
Background
The section contains props that enable you to set element backgrounds.
Borders
The properties for borders and border radius can be found here.
Position
This category lets you fine-tune element position and z-index settings.
Transition
The smooth movement from one state to another for an element is enabled by this property.
Transform
This property lets you transform the element, for example, zoom or rotate.
Development capabilities.
Supercharged.
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.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
It has never been simpler to import modules from NPM into your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
Simply export it as an archive using a create-react-app project if you need to finish or host your project on your own server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
With just a few clicks, export your projects to Gatsby, a well-known 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
When your site is ready, publish it on Netlify. It'll have a technical domain, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the page's entities are visible in the editor.
Debugger
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Remarkable opportunities for business.
Collaboration
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
You can add necessary attributes to elements in the code editor.
Image ALT
A special property of the “Image” element.
Favicons
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Your site will display appropriately thanks to these settings on social media and search engines.
User-friendly URL
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Web page editor for web agencies.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project