Create your website from scratch or ready-to-use templates. All-in-one website builder on React — Quarkly. Publish your website online or export it to GithubCreate Project
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Create a professional-looking design easily by using themes.
Supercharge your sites with unique layouts, animations, effects, and transformations
Fine-tune your adaptive design
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
You can also add ready-made blocks: maps, videos, pop-ups and much 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
You can change current breakpoints in the project theme or add new ones.
Place elements however you want on the page — that is your choice. You can drop them in the desired area, or nest them in other ones.
You can select multiple elements and move them to another location, remove them, and more.
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
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
Quarkly embraces the latest and greatest in frontend coding methods.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
Give your website a more vibrant look by using fonts from a library that contains over 990 font families.
Select stunning images from the Unsplash library directly through the Quarkly interface.
Here you'll find categorized collections of style and functional properties.
This is where you can locate element display properties.
Use the properties in this section to change the text's appearance.
You can modify the padding and margins using these settings.
Props for element backgrounds can be found in this section.
This section allows you to configure borders and border radius.
With this category, you can fine-tune element position and z-index settings.
An element can transition from one state to another more easily thanks to this property.
With this property, you can transform the element, for instance, rotate or zoom.
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
With a few clicks, you can quickly import modules from NPM into your component.
Optimize your site to promote it on search engines.
Easily complete or host your project on your server by exporting it into an archive with a create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, 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 complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
All changes made to the pages are displayed in the code and vice versa.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Any element can serve as a tag. Simply choose the required "as" property value.
You can give elements the desired attributes through the code editor.
This is a separate property of the “Image” element.
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
These files are automatically generated. You can edit these files to suit your needs for the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project