Landing page maker for ux designers.
Meet Quarkly.
Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox. Create your website from scratch or ready-to-use templates
Create Project
Full creative control of your design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Utilize themes to build a consistent and attractive design for your website.
Extended Styling
With stylish animations, effects, and transformations, you can make your web page more exciting.
Adaptive design
Fine-tune your adaptive design
Components
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Ready-made Content
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
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 pick multiple elements, modify their styles, move them to a different location, delete them, and 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
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
We follow up-to-date frontend coding approaches at Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To make an element appear differently, such as with a hover state, enable the "hover" prop and configure the desired props.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash images
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Props panel
Enjoy a friendly interface with categorized styles and useful properties.
Layout
In this section, you can configure element display properties.
Typography
Use the properties in this section to change the text's appearance.
Indents
To configure margins and paddings, open these settings.
Background
For element backgrounds, look in this section for props.
Borders
Here you can configure border and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
An element can transition from one state to another more easily thanks to this property.
Transform
With the help of this property, you can rotate or zoom an element.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components 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
To wrap up your project or host it on your server, simply export it into an archive using a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
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 find all the entities of the page.
Debugger
Keep an eye on component code and page errors with the help of the debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
The pages and code maintain a dynamic relationship, showing any modifications made in both.
Wonderful opportunities for business.
Collaboration
Quickly invite teammates to work on your projects in Quarkly.
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
An individual property is provided for the "Image" element.
Favicons
You can install different icons for different devices, and you can also set a unique background color for Windows 10.
Open graph and meta tags
These settings will help your website look its best on social networks and in search engines.
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 you are free to change them as you choose.
Landing page maker for ux designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project