Website editor for web engineers.
Meet Quarkly.
Unlimited customisation possibilities, no-code tools of a classic editor. Use pre-made React components or build your own. Complete design control, supports Grid and Flexbox
Create Project
Ultimate control over the design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
You can use themes to create a consistent design for your site.
Extended Styling
Make your website unforgettable with creative layouts, dynamic animations, and exciting transformations.
Adaptive design
Fine-tune your adaptive design
Components
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
Ready-made Content
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Drag'n'Drop
Move elements around, place them however you want on the page, or nest them in other elements.
Multiselect
You can choose multiple elements, set their styles, move to another place, delete, and more.
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
With the double click, you can go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Advanced frontend coding is at the forefront of Quarkly's approach.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Here you will find categorized 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
Here you can configure margins and paddings.
Background
In this section, you can find props for element backgrounds.
Borders
You can change the border radius and borders in this section.
Position
Customize element position and z-index through these settings in this category.
Transition
This property makes an element move smoothly from one state to another.
Transform
Use this property to seamlessly transform your element, for example, by rotating or zooming.
Development capabilities.
Supercharged.
Create custom React components using the code editor
With the Quarkly code editor, you can 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
Import modules to your component from NPM in no time, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
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!
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there if necessary.
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
The editor shows all the entities that are present on the page.
Debugger
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Amazing opportunities for business.
Collaboration
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
All components can be used as a tag. Just select the tag's “as” property value.
Schema.org
You can specify desired attributes for elements in the code editor.
Image ALT
The "Image" element features a separate property.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
User-friendly URL
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are created automatically, but you can edit them as you see fit.
Website editor for web engineers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project