Completely free — you should try it now. Choose from one of many pre-made blocks. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSSCreate Project
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Themes can help you design your website consistently.
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Fine-tune your adaptive design
Select a single element or multiple elements on the page or Layer panel and convert them into a component. Place component copies on the page and enjoy the inheritance of all properties.
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Customizing or editing breakpoints is possible in the project theme.
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
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
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
Alter the appearance of an element, such as its hover behavior, by turning on "hover" and setting the required properties.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
This provides categorized functional and stylistic attributes.
You can set the element display properties in this section.
To find the text style properties, go to this section.
To configure margins and paddings, open these settings.
Here you'll find some props to help you set up element backgrounds.
Here you can set up borders and border radius.
This category helps you configure the position and z-index settings of elements.
By using this property, you can make the transition between states of an element smooth.
You can transform the element using this property, for instance, rotate or zoom.
Create custom React components using the code editor
You can make your own React components in the Quarkly code editor and 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
You can easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
The editor shows all the entities that are present on the page.
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
Not sure about the spelling of a property? Start typing and the editor will provide assistance.
Synched pages and code editor
Pages and code are updated in real-time, displaying all changes made in both areas.
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Make every component work as a tag by selecting the desired "as" property value.
In the code editor, you can add attributes to elements as necessary.
A separate property belonging to 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 create user-friendly page URLs with this capability.
Robots.txt and sitemap.xml
These files are created automatically, but you can edit them as you see fit.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.Create project