Web page editor for frontend developers.
Meet Quarkly.
All-in-one website builder on React — Quarkly. Completely free — you should try it now. Create your website from scratch or ready-to-use templates
Create Project
Total control over the design.
Primitives
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Themes
Create a consistent and professional-looking design with the help of themes.
Extended Styling
Use animation, effects, and transformations to make your web page come to life.
Adaptive design
Fine-tune your adaptive design
Components
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Ready-made Content
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
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 add custom breakpoints or edit existing ones in the project theme.
Drag'n'Drop
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
Multiselect
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
Text editor
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
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
The most cutting-edge frontend coding techniques are supported by Quarkly.
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
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Props panel
Here you will find categorized style and functional properties.
Layout
In this section, you can configure element display properties.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
Here you can configure margins and paddings, which control the space around elements.
Background
This section contains props that help you create element backgrounds.
Borders
Borders and border radius can be set up here.
Position
This category helps you configure element position and z-index settings.
Transition
This property makes an element move smoothly from one state to another.
Transform
This property allows you to manipulate the element, such as by rotating or zooming.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can make your own React components in the Quarkly code editor 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 from NPM to your component quickly and easily.
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
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor displays every entity on the page.
Debugger
To find faults in the component code and pages, use our debug console.
Tooltips in the code
Not sure about the spelling of a property? Start typing and the editor will provide assistance.
Synched pages and code editor
Pages and code are updated in real-time, displaying all changes made in both areas.
Stunning opportunities for business.
Collaboration
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
Make every component work as a tag by selecting the desired "as" property value.
Schema.org
You can specify desired attributes for elements in the code editor.
Image ALT
A unique attribute of the "Image" element.
Favicons
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
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 there for you to use. But you can change them and add to them as you see fit.
Web page editor for frontend developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project