Unlimited customisation possibilities, no-code tools of a classic editor. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Get all the power of graphic design tools and website buildersCreate Project
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Using themes you can create a consistent design for your site
Put the power of animation, effects, and transformations at your fingertips.
Fine-tune your adaptive design
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
By creating various solutions for elements at breakpoints, you can ensure that your website is mobile-friendly.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can apply styles to multiple elements at once and move them around, as well as remove them.
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding 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
Make your website look more vibrant by using fonts from a library with over 990 font families.
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Experience the ease of using categorized style and functional properties.
If you want to use element display properties, look at this section.
Browse text style properties in this section
You can configure margins and paddings in these settings.
This section has props you can use to set up element backgrounds.
You can change the border radius and borders in this section.
You can modify the settings for element position and z-index in this category.
This property makes an element transition smoothly from one state to another.
With this property, you can transform the element, for instance, rotate or zoom.
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 from NPM quickly, if you need to.
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
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
You can build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
You can keep track of component code and page errors with the debug console.
Tooltips in the code
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
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.
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
You can use each component as a tag. Just choose the needed value of the “as” property.
In the code editor, you can give items the desired attributes.
A unique attribute of the "Image" element.
Set up custom icons for all 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.
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project