Landing page builder for product managers.
Meet Quarkly.
Completely free — you should try it now. Unlimited customisation possibilities, no-code tools of a classic editor. All-in-one website builder on React — Quarkly
Create Project
Full control over the design.
Primitives
Essential building blocks modeled after HTML tags, like Text, Image, Box, and others.
Themes
You can make your site's design consistent by using themes.
Extended Styling
Bring life into your web page with stylish animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
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.
Ready-made Content
Get creative with ready-made blocks: maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Ensure your website is fully responsive by using tailored design solutions for elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones 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
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
Double clicking allows you to move up and down the element hierarchy, while holding Ctrl/Cmd lets you access deeper levels.
Support of Flexbox and Grid
We're thrilled to provide you with the top frontend coding techniques available.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Use fonts from a library that has over 990 font families in it to make your website look more colorful.
Unsplash images
Use Unsplash, one of the most popular free image stocks that provide images you can use directly without downloading.
Props panel
Enjoy the convenience of having categorized style and functional properties at your fingertips.
Layout
You can set the element display properties in this section.
Typography
You can apply the text style properties found here to your text.
Indents
To configure margins and paddings, open these settings.
Background
The section contains props that enable you to set element backgrounds.
Borders
Borders and border radius can be set up here.
Position
This category helps you configure the position and z-index settings of elements.
Transition
Elements can easily transition from one state to another thanks to this property.
Transform
Transform your element with ease using this property, for example, rotate or zoom.
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
Importing modules to your component from NPM has never been easier.
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
If you'd like to keep track of your changes, you can create a GitHub repository and commit them.
Publication on Netlify
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
Debugger
Our debug console will help you track errors in the component code and pages.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
The code and pages both reflect any modifications made to the pages.
Remarkable 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
Assign attributes to elements with ease in the code editor.
Image ALT
This is a separate property of the “Image” element.
Favicons
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
User-friendly URL
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them as you think they fit in the future.
Landing page builder for product managers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project