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 ownCreate Project
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
You can use themes to create a consistent design for your site.
Bring life into your web page with stylish 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.
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 and drop elements to arrange them on the page, or nest them in other elements.
You can select multiple elements and set their styles, drag to another place, remove, 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.
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.
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Here you will find categorized style and functional properties.
This section allows you to configure the display properties of elements.
In this section, you can change text styles using special properties
Here you can configure margins and paddings, which control the space around elements.
This section offers props for setting up element backgrounds.
Here you can adjust borders and border radius.
With this category, you can fine-tune element position and z-index settings.
This property makes an element transit smoothly from one state to another.
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.
The pages are written in JSX code typical for React.js
Hot import from NPM
Import modules to your component from NPM with ease.
Optimize your site to promote it on search engines
One step to complete your project or host it on your own server: export 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, 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.
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.
All components can act as a tag. Just select the necessary “as” property value.
You can set attributes to elements in the code editor.
This is an individual property that belongs to the “Image” element.
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.
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