Use pre-made React components or build your own. Unlimited customisation possibilities, no-code tools of a classic editor. Completely free — you should try it nowCreate Project
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
A consistent design for your site is attainable with the use of themes.
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
By utilizing various design approaches for elements at breakpoints, your website is completely responsive to mobile devices.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Move elements around, place them however you want on the page, or nest them in other elements.
You can remove, drag to a different location, style, remove, and more multiple elements simultaneously.
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
With the double click, you can go up and down the hierarchy of elements. If you need to get inside 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 change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Enjoy categorized style and functional properties.
You can find the element display properties under this section.
To change the style of your text, use special properties in this section.
Margin and padding configuration is available here.
Here you'll find some props to help you set up element backgrounds.
This section allows you to configure borders and border radius.
This category allows you to position elements and set their z-index values.
This property makes it easier for an element to change from one state to another.
With the help of this property, you can rotate or zoom the element.
Create custom React components using the code editor
Create your own React components in the Quarkly code editor and seamlessly integrate them into the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Modules from NPM can be imported into your component.
Optimize your site to promote it on search engines.
Your project can be finished or hosted on your server by exporting it into an archive using a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
Your projects can be easily exported to Gatsby, a well-liked static site generator.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
In the debug console, component code or page errors might be found.
Tooltips in the code
If you're unsure about how to spell a particular attribute, just start typing, and the editor will correct you.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Make every component work as a tag by selecting the desired "as" property value.
You can set desired attributes to elements in the code editor.
The "Image" element has a distinct property for this.
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project