Unlimited customisation possibilities, no-code tools of a classic editor. Use pre-made React components or build your own. All-in-one website builder on React — QuarklyCreate Project
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
You can use themes to create a consistent design for your site.
Make your site stand out from the crowd with eye-catching layouts, animations, and transformations.
Fine-tune your adaptive design
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.
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
Choose from the preset breakpoints or use your own.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
You can select multiple elements and set their styles, drag to another place, remove, and more.
You can make part of the text bold or italic, turn it into a link or convert to span, and apply any style to it.
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Enjoy categorized style and functional properties.
Here you can change the way elements appear.
To change the style of your text, use special properties in this section.
To configure margins and paddings, open these settings.
This section contains props that help set element backgrounds.
Here you can set up borders and border radius.
This category contains settings for configuring the position and z-index of elements.
This property makes an element move smoothly from one state to another.
This property will help you transform the element, for instance, rotate or zoom.
Creating custom React components in the code editor
In Quarkly, you can create custom React components in the code editor and then place them on the page.
The pages are written in JSX code typical for React.js
Hot import from NPM
Import modules to your component from NPM in no time, if needed.
Optimize your site to promote it on search engines
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!
Fine-tune elements in the code editor
Export to Gatsby Project
You can export your projects to Gatsby — one of the best open source Static Site Generators.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and commit changes as you work.
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
The editor displays all the entities of the page.
Our debug console will help you track errors in the component code and pages.
Tips in the code
If you are not sure how to spell a property, start typing and the editor will help you.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Work together as a team
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
You can make a component act as a tag by setting the “as” property to the desired value.
You can edit the necessary attributes of elements in the code editor.
This is an individual property that belongs to the “Image” element.
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 settings are meant for the correct display of your website in search engine results and social media
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
These files are automatically generated. You can edit these files to suit your needs for the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project