Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editor. All-in-one website builder on React — QuarklyCreate Project
The simplest, most basic components similar to HTML tags. For example, Text, Image, and Вох.
Themes can help you design your website consistently.
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.
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
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 customize the breakpoints in your project theme by adding or editing them.
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
Advanced frontend coding is at the forefront of Quarkly's approach.
Configuring styles of pseudo-classes hover/active/focus, etc.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
Google Fonts Connection
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Here you will find categorized style and functional properties.
You can set the element display properties in this section.
You can change text styles by using special properties in this section.
To set margins and paddings, open these settings.
This section consists of props for element backgrounds.
Here you can set up borders and border radius.
With this category, you can fine-tune element position and z-index settings.
This property makes an element change smoothly from one state to another.
With this property, you can transform the element, for instance, rotate or zoom.
Create custom React components using the code editor
With the Quarkly code editor, you can 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.
If you want to finish or host your project on your server, there is only one thing you need to do: export it as an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your work to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor shows each and every entity that is present on the page.
The debug console shows errors in the component code or pages.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
As you make changes to the pages, the changes display in the code and vice versa.
Quickly invite teammates to work on your projects in Quarkly.
Any part can serve as a tag. Just choose the "as" property's desired value.
You can give elements the desired attributes through the code editor.
A special property of the “Image” element.
Set up exclusive icons for various devices and individual tile background color for 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
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.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project