Web page maker for frontend engineers.
Meet Quarkly.
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 CSS
Create Project
Full creative control of your design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Themes
Themes can help you design your website consistently.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
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.
Drag'n'Drop
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Multiselect
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
Text editor
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.
Deep select
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.
Unsplash images
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Props panel
This provides categorized functional and stylistic attributes.
Layout
You can set the element display properties in this section.
Typography
To find the text style properties, go to this section.
Indents
To configure margins and paddings, open these settings.
Background
Here you'll find some props to help you set up element backgrounds.
Borders
Here you can set up borders and border radius.
Position
This category helps you configure the position and z-index settings of elements.
Transition
By using this property, you can make the transition between states of an element smooth.
Transform
You can transform the element using this property, for instance, rotate or zoom.
Development capabilities.
Supercharged.
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.
React.js
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.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Code Editor
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.
Debugger
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.
Unbeatable opportunities for business.
Collaboration
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
Make every component work as a tag by selecting the desired "as" property value.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
A separate property belonging to the “Image” element.
Favicons
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.
User-friendly URL
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.
Web page maker for frontend engineers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project