Landing page maker for product designers.
Meet Quarkly.
Use pre-made React components or build your own. Choose from one of many pre-made blocks. All-in-one website builder on React — Quarkly
Create Project
Total control over the design.
Primitives
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes
Themes can help you design your website consistently.
Extended Styling
Make your site stand out from the crowd with eye-catching layouts, animations, 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
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
Drag'n'Drop
Elements can be dropped anywhere on the page, stacked however you like, and nested inside other elements.
Multiselect
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
Text editor
You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
Deep select
Use the double click to move up and down the hierarchy of elements in your document. If you need to go inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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.
Activate the "hover" prop and set up the desired props to change how an element appears, for example, in a hover state.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
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 change the style of your text, use special properties in this section.
Indents
To configure margins and paddings, open these settings.
Background
Props for setting up element backgrounds can be found in this section.
Borders
Find the options for borders and border radius configuration in this section.
Position
This category allows you to adjust element position and z-index settings.
Transition
This property makes an element transition smoothly from one state to another.
Transform
You can use this property to transform the element, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
Custom React components can be made in Quarkly's code editor and then inserted onto the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM quickly, if you need to.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to host your project on your server, you can export it into an archive with create-react-app.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your work to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there if necessary.
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
In the Quarkly editor, you can keep an eye on each thing on the page.
Debugger
Our debug console will help you track errors in the component code and pages.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Wonderful opportunities for business.
Collaboration
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Semantic tags
Any element can serve as a tag. Simply select the "as" property value you require.
Schema.org
In the code editor, you can give items the desired attributes.
Image ALT
This is a separate property of the “Image” element.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
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 automatically produced. But if necessary, you can alter them.
Landing page maker for product designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project