All-in-one website builder on React — Quarkly. Complete design control, supports Grid and Flexbox. Get all the power of graphic design tools and website buildersCreate Project
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
With themes, you can craft a consistent site design
Use animation, effects, and transformations to make your web page come to life.
Fine-tune your adaptive design
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
You can select multiple elements and set their styles, drag to another place, remove, and more.
Edit the text in any way you like, make it bold or italic, create a link, convert to span, and apply any style.
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
We're excited to offer you the best frontend coding practices around.
Configuring styles of pseudo-classes hover/active/focus, etc.
Alter the appearance of an element, such as its hover behavior, by turning on "hover" and setting the required properties.
Google Fonts Connection
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Enjoy the convenience of having categorized style and functional properties at your fingertips.
Explore element display properties in this location.
Browse text style properties in this section
Open these settings to configure margins and paddings.
Props in this section help create the backgrounds for the elements.
You can define borders and border radius using these options.
Customize element position and z-index through these settings in this category.
An element can transition from one state to another more easily thanks to this property.
This property will help you transform the element, 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
It has never been simpler to import modules from NPM into your component.
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
You can export your projects to Gatsby, a popular static site generator (SSG).
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
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
You can keep track of component code and page errors with the debug console.
Tooltips in the code
If you don't know exactly how to spell a property, start typing and the editor will help you.
Synched pages and code editor
As you make changes to the pages, the changes display in the code and vice versa.
Quickly invite teammates to work on your projects in Quarkly.
Any part can serve as a tag. Just choose the "as" property's desired value.
You can edit the necessary attributes of elements 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
Get the right display for your website in search engines and social media through these settings.
You may create user-friendly page URLs with this capability.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project