Web page editor for teams.
Meet Quarkly.
All-in-one website builder on React — Quarkly. Get all the power of graphic design tools and website builders. Completely free — you should try it now
Create Project
Full control over the design.
Primitives
The simplest, most basic components similar to HTML tags. For example, Text, Image, and Вох.
Themes
Build a professional-looking design using themes
Extended Styling
Bring life into your web page with stylish animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
Ready-made Content
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to 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
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Multiselect
You can choose multiple elements, set their styles, move to another place, delete, and more.
Text editor
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
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
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
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
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Here you can find all the styles and functional properties.
Layout
This is where you can locate element display properties.
Typography
Browse text style properties in this section
Indents
These settings allow you to change margins and paddings.
Background
This section consists of props for element backgrounds.
Borders
With these options, you can set up borders and border radius.
Position
This category allows you to position elements and set their z-index values.
Transition
This property makes an element transition smoothly from one state to another.
Transform
Transform your element with ease using this property, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique 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
Import modules to your component from NPM with ease.
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 export your projects to Gatsby — one of the most popular static site generators.
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
You can keep an eye on every entity on the page in the Quarkly editor.
Debugger
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
No matter what changes are made to the pages or code, both are always in sync.
Remarkable opportunities for business.
Collaboration
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
A separate property belonging to the “Image” element.
Favicons
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
User-friendly URL
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
Web page editor for teams.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project