Web page maker for frontend developers.
Meet Quarkly.
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 CSS
Create Project
Absolute control over the design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
You can make your site's design consistent by using themes.
Extended Styling
Add some flash to your web pages with stylish animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
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.
Drag'n'Drop
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Multiselect
You can select multiple elements and move them to another location, remove them, and more.
Text editor
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.
Deep select
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.
Unsplash images
Select stunning images from the Unsplash library directly through the Quarkly interface.
Props panel
Make use of organized and categorized style and functional properties to improve your project.
Layout
Here you will find the element display properties.
Typography
In this section, you can change text styles using special properties
Indents
Open these settings to configure margins and paddings.
Background
This section has props you can use to set up element backgrounds.
Borders
You can define borders and border radius using these options.
Position
This category helps you configure element position and z-index settings.
Transition
This property makes an element transit smoothly from one state to another.
Transform
This property can be used to rotate or zoom the element, for example.
Development capabilities.
Supercharged.
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.
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
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.
Debugger
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.
Unbeatable opportunities for business.
Collaboration
Quickly invite teammates to work on your projects in Quarkly.
Semantic tags
Transform components into tags with ease by choosing the right "as" property value.
Schema.org
In the code editor, you can assign necessary attributes to elements.
Image ALT
This particular property is a part of the "Image" element.
Favicons
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.
User-friendly URL
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.
Web page maker for frontend developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project