Publish your website online or export it to Github. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Complete design control, supports Grid and FlexboxCreate Project
Text, Image, Box — the most basic components similar to HTML tags.
Build a consistent design using themes
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Fine-tune your adaptive design
You can create reusable components from any selection of elements on the page or in a layer. When you add the component to a page, it inherit all of its original properties.
Make your page come alive with ready-made blocks like maps, videos, pop-ups, and many more.
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
Use your personal breakpoints or select one of the ones already in place.
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
At Quarkly, we support the latest and greatest in frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the way an element looks like, for example, how it appears on hover, just 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
Find the perfect image with ease on Unsplash, a highly regarded free image stock, through Quarkly.
This offers categorized style and functional properties.
Check out this section to use element display properties.
Use the special properties in this section to alter the text's style.
These settings allow you to change margins and paddings.
In this section, you can find props for element backgrounds.
Here you can adjust borders and border radius.
With this category, you can fine-tune element position and z-index settings.
The smooth movement from one state to another for an element is enabled by this property.
This property allows you to transform the element, for example, rotate or zoom.
Create custom React components using the code editor
You can design distinctive React components in the Quarkly code editor and then insert them on the page.
The pages are written in JSX code typical for React.js.
Hot import from NPM
With a few clicks, you can quickly import modules from NPM into your component.
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
One of the most popular static site generators, Gatsby, can be the destination for your exported projects.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
In the debug console, component code or page errors might be found.
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.
All components can act as a tag. Just select the necessary “as” property value.
In the code editor, you can provide items the required characteristics.
This is an individual property that belongs to the “Image” element.
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
Open graph and meta tags
Configure these settings for the correct display of your website in search engine results and social media.
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them as you think they fit in the future.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project