All-in-one website builder on React — Quarkly. Create your website from scratch or ready-to-use templates. Completely free — you should try it nowCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes make it easy to create a consistent look for your website.
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
You can also add ready-made blocks: maps, videos, pop-ups and much more.
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
Use your own breakpoints or choose one of the ones that are already there.
Place elements however you want on the page — that is your choice. You can drop them in the desired area, or nest them in other ones.
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
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
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash is one of the most trending free image stocks. Browse its collection and choose images directly from the Quarkly interface.
Enjoy categorized styles and functional properties in a friendly interface.
You can find the element display properties under this section.
You can apply the text style properties found here to your text.
Here you can configure margins and paddings, which control the space around elements.
Here, you will have access to props for element background setup.
In this section, you can adjust borders and border radius.
This category lets you use position and z-index settings.
This property makes it possible for elements to move smoothly from one state to another.
This property lets you transform the element, for example, zoom or rotate.
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
Import modules from NPM quickly, if you need to.
Optimize your site to promote it on search engines.
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, one of the most well-known web frameworks for static site generation.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Component code or page errors can be detected in the debug console.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
All components can act as a tag. Just select the necessary “as” property value.
You can give elements the desired attributes through the code editor.
This is a separate property of the “Image” element.
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
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
You can further change these automatically generated files.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project