Website editor for marketer.
Meet Quarkly.
All-in-one website builder on React — Quarkly. Get all the power of graphic design tools and website builders. Complete design control, supports Grid and Flexbox
Create Project
Absolute control over the design.
Primitives
Text, Image, Box — the most basic components similar to HTML tags.
Themes
You can use themes to create a consistent design for your site.
Extended Styling
Use animation, effects, and transformations to make your web page come to life.
Adaptive design
Fine-tune your adaptive design
Components
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Ready-made Content
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
Drag'n'Drop
You choose where to put the elements. You can move them around 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
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Deep select
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or the Cmd key on MacOs.
Support of Flexbox and Grid
We follow up-to-date frontend coding approaches at Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
Unsplash images
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Props panel
Style and utility characteristics are categorized here.
Layout
You can set the element display properties in this section.
Typography
You can change text styles by using special properties in this section.
Indents
You can configure margins and paddings in these settings.
Background
Props for setting up element backgrounds can be found in this section.
Borders
Here you have access to the tools for adjusting borders and border radius.
Position
You can change the element position and z-index settings in this category.
Transition
An element can transition from one state to another without interruption thanks to this property.
Transform
You can rotate or zoom the element using this property, for example.
Development capabilities.
Supercharged.
Create custom React components using the code editor
The Quarkly code editor allows you to 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
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
If you want to host your project on your server, you can export it into an archive with create-react-app.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
You can build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
Publish your ready site on Netlify to receive a technical domain name, such as https://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
To find faults in the component code and pages, use our debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Remarkable opportunities for business.
Collaboration
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
You can edit the necessary attributes of elements in the code editor.
Image ALT
A unique attribute of the "Image" element.
Favicons
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
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
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
Website editor for marketer.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project