Completely free — you should try it now. All-in-one website builder on React — Quarkly. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSSCreate Project
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
You can use themes to create a consistent design for your site.
Put the power of animation, effects, and transformations at your fingertips.
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.
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
Use your personal breakpoints or select one of the ones already in place.
You choose where to put the elements. You can move them around or nest them in other elements.
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or the Cmd key on MacOs.
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.
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
The library of over 990 font families will help make your site look more beautiful.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
This provides categorized functional and stylistic attributes.
Here you will find the element display properties.
Here you'll find text style properties that can be applied to your text.
You can modify the padding and margins using these settings.
Here, you will have access to props for element background setup.
The properties for borders and border radius can be found here.
This category allows you to position elements and set their z-index values.
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
In the Quarkly code editor, you can create your own React components and then add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
With a few clicks, you can quickly import modules from NPM into your component.
Optimize your site to promote it on search engines.
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a create-react-app project!
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
You can keep an eye on every entity on the page in the Quarkly editor.
Use our debug console to track errors in the component code and pages.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Each component can act as a tag. Just select the desired value of the “as” property.
You can give elements the desired attributes through the code editor.
A unique attribute that belongs to the "Image" element.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Here are some settings that will help your site appear correctly on social networks and in search engines.
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project