All-in-one website builder on React — Quarkly. Create your website from scratch or ready-to-use templates. Complete design control, supports Grid and FlexboxCreate Project
Bring life into your web page with stylish animations, effects, and transformations.
Text, Image, Box — the most basic components similar to HTML tags.
Creating components on a page
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Displaying custom props on the panel
All custom component properties can be shown on the right panel.
With themes, you can craft a consistent site design
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
Move elements around, place them however you want on the page, or nest them in other elements.
You can choose multiple elements, set their styles, move to another place, delete, and more.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and 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.
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
Make your website design more expressive by connecting fonts from a library with 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
Take advantage of the categorized style and functional props.
Under this section, you can find element display properties.
In this section, you can change text styles using special properties
Open these settings to configure margins and paddings.
This section contains props for setting up element backgrounds.
Here you can set up borders and border radius.
This category lets you fine-tune element position and z-index settings.
This property comes with extra design opportunities.
This property helps you choose the element shadow.
With this property, you can make an element move smoothly from one state to another.
This property lets you transform the element, for example, zoom or rotate.
This property allows you to set up a lot of various visual effects.
Building custom React components in the code editor
With the Quarkly code editor, you can create unique React components and then place them on the page.
Useful information about creating Quarkly components, building applications, and more
Hot import of NPM modules
You can import modules to your component from NPM in a few clicks.
Export to Create React App
One step to complete your project or host it on your own server: export it into an archive with a create-react-app project.
Export to Gatsby Project
You can easily export your projects to Gatsby, which is a popular static site generator.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
Publication on Netlify
When your site is ready, publish it on Netlify. It'll have a technical domain, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can find all the entities of the page.
Our debug console will help you track errors in the component code and pages.
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Сode editor and synched pages
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Use the ready-made blocks such as pop-ups, maps, videos, and many more!
No need to climb a steep learning curve since you deal with the workflow you already know
Ready-to-go themed blocks
You can take advantage of components with themed content. Work with them just as with regular components.
Contains over 40 components, and the catalog never stops growing.
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
In the code editor, you can assign necessary attributes to elements.
A special property of the “Image” element.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
Make sure you use human-readable URLs to improve your site's SEO.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
We give you Quarkly for free as long as we can, and then offer the lowest price among our competitors.Create project