Complete design control, supports Grid and Flexbox. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Completely free — you should try it nowCreate Project
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
Create a consistent and professional-looking design with the help of themes.
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Fine-tune your adaptive design
Make a component out of a single element or a collection of elements on the page or in the Layers panel. All of the props will be inherited by component copies that are added to the page.
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
You can select multiple elements and modify their styles or drag'n'drop them to change their location.
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
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
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Here you will find categorized style and functional properties.
Under this section, you can find element display properties.
Here you'll find text style properties that can be applied to your text.
To configure margins and paddings, open 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 change the element position and z-index settings in this category.
With this property, you can make an element move 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
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 with ease, if needed.
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
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
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Keep an eye on component code and page errors with the help of the debug console.
Tooltips in the code
Start typing and the editor will give you a list of suggestions.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Any part can serve as a tag. Just choose the "as" property's desired value.
In the code editor, you can add attributes to elements as necessary.
This particular property is a part of the "Image" element.
This feature helps you to install unique icons for all devices.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project