Completely free — you should try it now. All-in-one website builder on React — Quarkly. Get all the power of graphic design tools and website buildersCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
With themes, you can craft a consistent site design
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
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.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.
You can select multiple elements and set their styles, drag to another place, remove, and more.
You can turn a part of the text into italic or bold, make it a link or convert to span, and use any style for it.
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.
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.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Use the library of over 990 font families to make your site look more beautiful
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
This provides categorized functional and stylistic attributes.
This is where you can locate element display properties.
You can apply the text style properties found here to your text.
To configure margins and paddings, open these settings.
This section consists of props for element backgrounds.
In this section, you can adjust borders and border radius.
This category lets you use position and z-index settings.
This property makes an element change smoothly from one state to another.
Use this property to seamlessly transform your element, for example, by rotating or zooming.
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.
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.
Optimize your site to promote it on search engines.
One step to complete your project or host it on your own server: export it into an archive with a create-react-app project.
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
Create a GitHub repository for your project and commit changes as you work.
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Monitor component code and page errors using the debug console.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
You can use every component as a tag. Just choose the “as” property value that you need.
Assign attributes to elements with ease in the code editor.
A separate property belonging to the “Image” element.
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
Enhance your site's visibility in search engines and ease of use with user-friendly URLs.
Robots.txt and sitemap.xml
These files are created automatically for you to edit further.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project