Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox. Publish your website online or export it to GithubCreate Project
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Themes make it easy to create a consistent look for your website.
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Make your page come alive with ready-made blocks like 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
In the project theme, you may want to add custom breakpoints or edit existing ones.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
You can select multiple elements and modify their styles or drag'n'drop them to change their location.
You can turn a part of the text into italic or bold, make it a link or convert to span, and use any style for it.
Quickly traverse the hierarchy of elements by double clicking, and hold Ctrl/Cmd to delve into it.
Support of Flexbox and Grid
We're thrilled to provide you with the top frontend coding techniques available.
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
Add a personal touch to your website with the use of 990+ font families available in the library.
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Take advantage of the categorized style and functional props.
Get access to element display properties in this section.
Use the properties in this section to change the text's appearance.
Configure margins and paddings using these settings.
This section contains props for setting up element backgrounds.
In this section, you can adjust borders and border radius.
Customize element position and z-index through these settings in this category.
This property makes an element transition smoothly from one state to another.
This property lets you transform the element, for example, zoom or rotate.
Create custom React components using the code editor
The Quarkly code editor allows you to create unique React components and then place them on 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.
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
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
In the Quarkly editor, you can monitor all the entities that are present on the page.
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Utilize the Quarkly collaboration tool to work on a project with your teammates; all you need to do is invite them.
Every component has the ability to act like a tag. Simply select the necessary value for the "as" field.
You can add necessary attributes to elements in the code editor.
The "Image" element features a separate property.
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
Set up user-friendly URLs to improve your site position in the search engines and increase the usability of the resource.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project