Use pre-made React components or build your own. All-in-one website builder on React — Quarkly. Create your website from scratch or ready-to-use templatesCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes make it easy to give your website a unified appearance.
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
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
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
Move elements around, place them however you want on the page, or nest them in other elements.
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
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
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the way an element looks, such as its appearance on hover, enable the "hover" prop and set other desired props.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Style and utility characteristics are categorized here.
Here you can find element display properties.
To find the text style properties, go to this section.
You can configure margins and paddings in these settings.
This section offers props for setting up element backgrounds.
In this section, you can adjust borders and border radius.
This category contains settings for configuring the position and z-index of elements.
By using this property, you can make the transition between states of an element smooth.
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 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 export a create-react-app project into an archive file that you can host on your own server.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, a highly regarded 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
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
All of the entities that are present on the page are displayed by the editor.
Use our debug console to track errors in the component code and pages.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
You can use every component as a tag. Just choose the “as” property value that you need.
Assign attributes to elements with ease in the code editor.
A unique attribute that belongs to 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 will help your site display correctly on social networks and in search engines.
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
These files are automatically produced. However, you are free to modify them as you see fit in the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project