Publish your website online or export it to Github. Get all the power of graphic design tools and website builders. Choose from one of many pre-made blocksCreate Project
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Themes make it easy to give your website a unified appearance.
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Fine-tune your adaptive design
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Get creative with ready-made blocks: maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Different design solutions will be used for elements at breakpoints as your website automatically adapts to different screen sizes.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
Quickly traverse the hierarchy of elements by double clicking, and hold Ctrl/Cmd to delve into it.
Support of Flexbox and Grid
At Quarkly, we use the most advanced frontend coding techniques.
Configuring styles of pseudo-classes hover/active/focus, etc.
To modify the look of an element, such as its hover appearance, simply enable "hover" and customize the properties.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Experience the ease of using categorized style and functional properties.
Under this section, you can find element display properties.
To alter the appearance of your text, use the properties in this section.
To configure margins and paddings, open these settings.
This section contains props that help set element backgrounds.
This section allows you to adjust borders and border radius.
This category helps you configure the position and z-index settings of elements.
An element can transition from one state to another without interruption thanks to this property.
With the help of this property, you can rotate or zoom the element.
Create custom React components using the code editor
You can create your own React components using the Quarkly code editor and then 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 finish or host your project on your server, there is only one thing you need to do: export it as an archive using a 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
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can find all the entities of the page.
To find faults in the component code and pages, use our debug console.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
You can make a component act as a tag by setting the “as” property to the desired value.
You can set desired attributes to elements in the code editor.
A special property of the “Image” element.
Install unique icons for different devices and individual tile background color for Windows 10.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
Automated file creation with the option to edit as desired.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project