Choose from one of many pre-made blocks. All-in-one website builder on React — Quarkly. Use pre-made React components or build your ownCreate Project
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
It's simple to give your website a unified look with themes.
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
Fine-tune your adaptive design
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
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
Quarkly supports the most advanced approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Enjoy categorized styles and functional properties in a friendly interface.
Check out this section to use element display properties.
Use this section to customize text styles
These settings allow you to change margins and paddings.
This section contains props for setting up element backgrounds.
The properties for borders and border radius can be found here.
Customize element position and z-index through these settings in this category.
This property makes an element transit smoothly from one state to another.
This property allows you to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
You can build and add custom React components to your Quarkly pages using the code editor.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
Optimize your site to promote it on search engines.
Simply export it as an archive using a create-react-app project if you need to finish or host your project on your own server.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby — one of the most famous static-site generation web frameworks
Pushing commits to your GitHub repository
Create a GitHub repository for your project and commit changes as you work.
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.
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Component-to-tag transformation made simple with the right "as" property value selection.
In the code editor, you can give items the desired attributes.
A special property of the “Image” element.
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project