Web page editor for React developers.
Meet Quarkly.
Create your website from scratch or ready-to-use templates. Unlimited customisation possibilities, no-code tools of a classic editor. Use pre-made React components or build your own
Create Project
Full creative control of your design.
Primitives
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
With stylish animations, effects, and transformations, you can make your web page more exciting.
Adaptive design
Fine-tune your adaptive design
Components
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
Ready-made Content
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
By utilizing various design approaches for elements at breakpoints, your website is completely responsive to mobile devices.
Adding and editing breakpoints
You can create, edit, or delete custom breakpoints in the project theme.
Drag'n'Drop
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Multiselect
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
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
Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.
Support of Flexbox and Grid
At Quarkly, we use the most advanced frontend coding techniques.
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
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Unsplash images
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Props panel
Style and utility characteristics are categorized here.
Layout
This section allows you to configure the display properties of elements.
Typography
Use the special properties in this section to alter the text's style.
Indents
In these settings, you can set margins and paddings.
Background
This section contains props that help you create element backgrounds.
Borders
You can set borders and border radius in this section.
Position
You can modify the settings for element position and z-index in this category.
Transition
This property makes an element move smoothly from one state to another.
Transform
With the help of this property, you can rotate or zoom an element.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can design distinctive React components in the Quarkly code editor and then insert 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 with ease.
SEO
Optimize your site to promote it on search engines.
Export CRA
If your goal is to host a project on your server, here's the one thing you have to do: 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 most popular static site generators, Gatsby, can be the destination for your exported projects.
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Publish your site on Netlify whenever it's ready. A custom domain will be automatically generated for you, for example: https://inspiring-beaver-d128ed.netlify.com
Modern built-in code editor
In the Quarkly editor, you can find all the entities of the page.
Debugger
To find faults in the component code and pages, use our debug console.
Tooltips in the code
Start typing if you're unsure of how to spell a word, and the editor will fill in the blanks for you.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Remarkable opportunities for business.
Collaboration
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Semantic tags
You can use each component as a tag. Just choose the needed value of the “as” property.
Schema.org
In the code editor, you can assign necessary attributes to elements.
Image ALT
The "Image" element has a distinct property for this.
Favicons
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your website look its best 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
These files are automatically produced. However, you are free to modify them as you see fit in the future.
Web page editor for React developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project