All-in-one website builder on React — Quarkly. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Completely free — you should try it nowCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
Create a consistent and professional-looking design with the help of themes.
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can select multiple elements and move them to another location, remove them, and more.
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.
Support of Flexbox and Grid
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
Activate the "hover" prop and set up the desired props to change how an element appears, for example, in a hover state.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Make use of the categorized style and props to your advantage.
Element display properties can be found here.
Explore text style properties here
These settings offer options to change margins and paddings.
This section consists of props for element backgrounds.
Here you can configure borders and border radius.
This category contains settings for configuring the position and z-index of elements.
With this property, you can make an element move smoothly from one state to another.
You can transform the element using this property, for instance, rotate or zoom.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Importing modules from NPM to your component is a breeze.
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, which is a popular static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and commit changes as you work.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Component code or page errors can be detected in the debug console.
Tooltips in the code
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
You can use each component as a tag. Just choose the needed value of the “as” property.
In the code editor, you can add attributes to elements as necessary.
A special property of the “Image” element.
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
You may increase the SEO of your site by using clean URLs.
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