Website editor for web agencies.
Meet Quarkly.
Get all the power of graphic design tools and website builders. All-in-one website builder on React — Quarkly. Create your website from scratch or ready-to-use templates
Create Project
Ultimate control over the design.
Primitives
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Themes
Utilize themes to build a consistent and attractive design for your website.
Extended Styling
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Adaptive design
Fine-tune your adaptive design
Components
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Ready-made Content
Enhance your page with ready-made blocks including 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
Use your own breakpoints or choose one of the ones that are already there.
Drag'n'Drop
You decide where to place the elements. Move them wherever you want, 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 in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
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
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
Transform the appearance of an element, including its hover behavior, by turning on "hover" and adjusting the desired 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
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
Enjoy the convenience of having categorized style and functional properties at your fingertips.
Layout
Check out this section to use element display properties.
Typography
To find the text style properties, go to this section.
Indents
Here you will find the settings for margins and paddings.
Background
This section contains props that help you create element backgrounds.
Borders
Find the options for borders and border radius configuration in this section.
Position
The element position and z-index settings can be altered here.
Transition
By using this property, you can make the transition between states of an element smooth.
Transform
With the help of this property, you can rotate or zoom the element.
Development capabilities.
Supercharged.
Create custom React components using the code editor
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Modules from NPM can be imported into your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
One step to complete your project or host it on your own 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
You can easily export your projects to Gatsby, which is a popular static site generator.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like 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
Mistakes in the component code can be identified 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 code and pages both reflect any modifications made to the pages.
Wonderful opportunities for business.
Collaboration
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
Semantic tags
Any element can serve as a tag. Simply select the "as" property value you require.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
This is a separate 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
Optimize the display of your site in search engine results and on social media with these settings.
User-friendly URL
Make sure you use human-readable URLs to improve your site's SEO.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
Website 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