Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. All-in-one website builder on React — Quarkly. Choose from one of many pre-made blocksCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
Create a professional-looking design easily by using themes.
Add some flash to your web pages with stylish animations, effects, 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 premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
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
Here at Quarkly, we support the most advanced approaches to frontend coding.
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
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Make use of the categorized style and props to your advantage.
Here you will find the element display properties.
Explore text style properties here
You can modify the padding and margins in these settings.
This section contains props for setting up element backgrounds.
Find the options for borders and border radius configuration in this section.
This category helps you configure the position and z-index settings of elements.
Elements can easily transition from one state to another thanks to this property.
This property allows you to manipulate the element, such as by rotating or zooming.
Create custom React components using the code editor
You can make your own React components in the Quarkly code editor 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 want to host your project on your server, you can export it into an archive with create-react-app.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
You can track issues in the component code and pages with the aid of our 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
All changes made to the pages are displayed in the code and vice versa.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
You can make a component act as a tag by setting the “as” property to the desired value.
You can specify desired attributes for elements in the code editor.
A special property of the “Image” element.
Set up custom icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
Set up user-friendly URLs to improve your site position in the search engines and increase the usability of the resource.
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