Website editor for frontend engineers.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. All-in-one website builder on React — Quarkly. Create your website from scratch or ready-to-use templates
Create Project
Absolute creative control of your design.
Primitives
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Themes
Using themes will help your website's design remain consistent.
Extended Styling
Make your site stand out from the crowd with eye-catching layouts, animations, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Select a single element or multiple elements on the page or Layer panel and convert them into a component. Place component copies on the page and enjoy the inheritance of all properties.
Ready-made Content
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
Drag'n'Drop
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Multiselect
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
You can turn a part of the text into italic or bold, make it a link or convert to span, and use any style for it.
Deep select
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To modify the look of an element, such as its hover appearance, simply enable "hover" and customize the properties.
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
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Props panel
Take advantage of the categorized style and functional props.
Layout
You can find the element display properties under this section.
Typography
Explore text style properties here
Indents
Margin and padding configuration is available here.
Background
This section offers props for setting up element backgrounds.
Borders
Here you have access to the tools for adjusting borders and border radius.
Position
This category allows you to adjust 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.
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
You can import modules to your component from NPM.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
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 site on Netlify once you're ready for it to go live. A technical domain will be created automatically for it, like: https://inspiring-beaver-d128ed.netlify.app
Modern built-in code editor
The editor displays all the entities of the page.
Debugger
The debug console shows errors in the component code or pages.
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 code and pages both reflect any modifications made to the pages.
Remarkable opportunities for business.
Collaboration
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Semantic tags
You can use every component as a tag. Just choose the “as” property value that you need.
Schema.org
You can specify desired attributes for elements in the code editor.
Image ALT
A unique attribute that belongs to the "Image" element.
Favicons
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
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
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
Website editor for frontend engineers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project