All-in-one website builder on React — Quarkly. Unlimited customisation possibilities, no-code tools of a classic editor. Choose from one of many pre-made blocksCreate Project
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
You can make your site's design consistent by using themes.
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can remove, drag to a different location, style, remove, and more multiple elements simultaneously.
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.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into 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.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Take advantage of the categorized style and props.
Element display properties can be found here.
Use the special properties in this section to alter the text's style.
To set margins and paddings, open these settings.
Props for element backgrounds can be found in this section.
With these options, you can set up borders and border radius.
This category contains settings for configuring the position and z-index of elements.
The smooth movement from one state to another for an element is enabled by this property.
This property will help you transform the element, for instance, rotate or zoom.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
It has never been simpler to import modules from NPM into your component.
Optimize your site to promote it on search engines.
If you need to complete or host your project on your own server, it's easy: just export it into an archive with a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Every component has the ability to act like a tag. Simply select the necessary value for the "as" field.
You can customize elements with the necessary attributes in the code editor.
A unique attribute of the "Image" element.
This feature helps you to install unique icons for all devices.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
Clean URLs will help you improve your site's SEO.
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