Use pre-made React components or build your own. Get all the power of graphic design tools and website builders. Unlimited customisation possibilities, no-code tools of a classic editorCreate Project
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
With themes, you can craft a consistent site design
Bring life into your web page with stylish animations, effects, and transformations.
Fine-tune your adaptive design
You can create reusable components from any selection of elements on the page or in a layer. When you add the component to a page, it inherit all of its original properties.
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can change current breakpoints in the project theme or add new ones.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
You can double-click to go up and down the hierarchy of your objects. If you need to get inside the hierarchy, hold down the Ctrl key on Windows or Cmd on MacOs.
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.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
Google Fonts Connection
Make your website look more vibrant by using fonts from a library with over 990 font families.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Enjoy a friendly interface with categorized styles and useful properties.
Check out this section to use element display properties.
Here you'll find text style properties that can be applied to your text.
Adjust margins and paddings with ease in these settings.
This section contains props that help set element backgrounds.
Borders and border radius can be set up here.
With this category, you can fine-tune element position and z-index settings.
You can ensure a smooth transition between states of an element with this property.
With this property, you can transform the element, for instance, rotate or zoom.
Create custom React components using the code editor
You can make your own React components in the Quarkly code editor and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if needed.
Optimize your site to promote it on search engines.
If you want to host your project on your server, you can export it into an archive with create-react-app.
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
You can build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
Publish your site on Netlify once you're ready for it to go live. A technical domain will be created automatically for it, 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
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
When you make changes to the page, you can see those same edits reflected in the code.
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
Component-to-tag transformation made simple with the right "as" property value selection.
In the code editor, you can add attributes to elements as necessary.
A special property of the “Image” element.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Your site will display appropriately thanks to these settings on social media and search engines.
This feature allows you to set user-friendly page URLs.
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