Use pre-made React components or build your own. Publish your website online or export it to Github. Complete design control, supports Grid and FlexboxCreate Project
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes make it easy to create a consistent look for your website.
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
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.
You can also add ready-made blocks: maps, videos, pop-ups and much more.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
Drag and drop elements to arrange them on the page, or nest them in other elements.
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
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
The most cutting-edge frontend coding techniques are supported by 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
Use the library of over 990 font families to make your site look more beautiful
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Here you will find categorized style and functional properties.
This is where you can locate element display properties.
To alter the appearance of your text, use the properties in this section.
In these settings, you can set margins and paddings.
This section contains props that help set element backgrounds.
Here you can configure borders and border radius.
This category contains settings for configuring the position and z-index of elements.
This property makes an element move smoothly from one state to another.
With the help of this property, you can rotate or zoom an element.
Create custom React components using 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
If necessary, quickly import modules into your component through NPM.
Optimize your site to promote it on search engines.
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby — one of the most famous static-site generation web frameworks
Pushing commits to your GitHub repository
Effortlessly, you can make a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
The debug console shows errors in the component code or pages.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
You can make a component act as a tag by setting the “as” property to the desired value.
In the code editor, you can provide items the required characteristics.
An individual property is provided for the "Image" element.
Make your devices stand out with unique icons and personalized tile background color on Windows 10.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project