Choose from one of many pre-made blocks. Unlimited customisation possibilities, no-code tools of a classic editor. Use pre-made React components or build your own
Create ProjectPrimitives
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Themes
You can use themes to create a consistent design for your site.
Extended Styling
Bring life into your web page with stylish animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
Add ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
Drag'n'Drop
Drag and drop elements to arrange them on the page, or nest them in other elements.
Multiselect
You can select multiple elements and set their styles, drag to another place, remove, and more.
Text editor
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.
Deep select
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs.
Support of Flexbox and Grid
We follow up-to-date frontend coding approaches at Quarkly.
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
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash images
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
Here you will find categorized style and functional properties.
Layout
This section allows you to configure the display properties of elements.
Typography
In this section, you can change text styles using special properties
Indents
Here you can configure margins and paddings, which control the space around elements.
Background
This section offers props for setting up element backgrounds.
Borders
Here you can adjust borders and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
This property makes an element transit smoothly from one state to another.
Transform
You can use this property to transform the element, for example, rotate or zoom.
Creating custom React components in the code editor
With the Quarkly code editor, you can create custom React components and then use them on a webpage.
React.js
The pages are written in JSX code typical for React.js
Hot import from NPM
Import modules to your component from NPM with ease.
SEO
Optimize your site to promote it on search engines
Export CRA
One step to complete your project or host it on your own server: export it into an archive with a create-react-app project.
Code Editor
Fine-tune elements in the code editor
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 store your project in a GitHub repository and make changes to it.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The editor shows all the entities that are present on the page.
Debugger
Errors in the component code or pages will show up in the debug console.
Tooltips in the code
Start typing and the editor will give you a list of suggestions.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Work together as a team
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
You can set attributes to elements in the code editor.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
Configure these settings to display your website correctly in search engine results and social media.
User-friendly URL
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project