Choose from one of many pre-made blocks. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Publish your website online or export it to GithubCreate Project
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
You can use themes to create a consistent design for your site.
Use animation, effects, and transformations to make your web page come to life.
Fine-tune your adaptive design
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
Bold, italic, link, span, and other styles, all options to make your text stand out.
Double clicking allows you to move up and down the element hierarchy, while holding Ctrl/Cmd lets you access deeper levels.
Support of Flexbox and Grid
Quarkly embraces the latest and greatest in frontend coding methods.
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
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Experience the ease of using categorized style and functional properties.
Under this section, you can find element display properties.
You can change text styles by using special properties in this section.
Here you can configure margins and paddings, which control the space around elements.
Props for setting up element backgrounds can be found in this section.
In this section, you can adjust borders and border radius.
This category contains settings for configuring the position and z-index of elements.
Elements can easily transition from one state to another thanks to this property.
This property will help you transform the element, for instance, rotate or zoom.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and add them to the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
Optimize your site to promote it on search engines.
If you want to host your project on your server, you can export it into an archive with create-react-app.
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby — one of the best open source Static Site Generators.
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
The editor shows each and every entity that is present on the page.
Component code or page errors can be detected 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
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
Every component has the ability to act like a tag. Simply select the necessary value for the "as" field.
You can give elements the desired attributes through the code editor.
The "Image" element has a unique property.
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
To improve your site's SEO, make sure the URLs are readable by humans.
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