Get all the power of graphic design tools and website builders. Complete design control, supports Grid and Flexbox. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSSCreate Project
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
You can make your site's design consistent by using themes.
Add some flash to your web pages with stylish animations, effects, and transformations.
Fine-tune your adaptive design
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
You can use your own custom breakpoints, or select one of the existing ones.
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
You can select multiple elements and move them to another location, remove them, and more.
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.
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
Quarkly supports the most advanced approaches to 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
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Select stunning images from the Unsplash library directly through the Quarkly interface.
Make use of organized and categorized style and functional properties to improve your project.
Here you will find the element display properties.
In this section, you can change text styles using special properties
Open these settings to configure margins and paddings.
This section has props you can use to set up element backgrounds.
You can define borders and border radius using these options.
This category helps you configure element position and z-index settings.
This property makes an element transit smoothly from one state to another.
This property can be used to rotate or zoom the element, for example.
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
With a few clicks, you can quickly import modules from NPM into your component.
Optimize your site to promote it on search engines.
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
Making a GitHub repository for your project and committing changes can be done with ease.
Publication on Netlify
When your site is ready, publish it on Netlify. It'll have a technical domain, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Component code or page errors can be detected in the debug console.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Quickly invite teammates to work on your projects in Quarkly.
Transform components into tags with ease by choosing the right "as" property value.
In the code editor, you can assign necessary attributes to elements.
This particular property is a part of the "Image" element.
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
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
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