Choose from one of many pre-made blocks. Publish your website online or export it to Github. Completely free — you should try it nowCreate Project
Basic elements that resemble HTML tags: Text, Image, Box, and others.
You can make your site's design consistent by using themes.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
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.
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
Place elements exactly where you want them on the page, whether it be by dropping them, nesting them, or moving them.
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Double-click to go up and down the hierarchy of elements. To dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Enjoy categorized styles and functional properties in a friendly interface.
Under this section, you can find element display properties.
Use the special properties in this section to alter the text's style.
Adjust margins and paddings with ease in these settings.
Use the props in this section to customize element backgrounds.
Find the options for borders and border radius configuration in this section.
Element position and z-index settings can be adjusted in this category.
An element can transition from one state to another without interruption thanks to this property.
This property allows you to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components 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 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
Export your projects to Gatsby, one of the most well-known web frameworks for static site generation.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
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
You can keep an eye on every entity on the page in the Quarkly editor.
Errors in the component code or pages will show up in the debug console.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Any part can serve as a tag. Just choose the "as" property's desired value.
You can set desired attributes to elements in the code editor.
The "Image" element features a separate property.
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Here are some settings that will help your site appear correctly on social networks and in search engines.
Clean URLs will help you improve your site's SEO.
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