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 editor
Create ProjectPrimitives
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Themes
With themes, you can craft a consistent site design
Extended Styling
Bring life into your web page with stylish animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
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.
Drag'n'Drop
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Multiselect
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
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.
Unsplash images
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Props panel
Enjoy a friendly interface with categorized styles and useful properties.
Layout
Check out this section to use element display properties.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
Adjust margins and paddings with ease in these settings.
Background
This section contains props that help set element backgrounds.
Borders
Borders and border radius can be set up here.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
You can ensure a smooth transition between states of an element with this property.
Transform
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.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules to your component with ease, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to host your project on your server, you can export it into an archive with create-react-app.
Code Editor
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.
Debugger
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.
Collaboration
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
Semantic tags
Component-to-tag transformation made simple with the right "as" property value selection.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
A special property of the “Image” element.
Favicons
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.
User-friendly URL
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