Landing page editor for product designers.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Get all the power of graphic design tools and website builders. Choose from one of many pre-made blocks
Create Project
Full control over the design.
Primitives
The simplest, most basic components similar to HTML tags. For example, Text, Image, and Вох.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Use animation, effects, and transformations to make your web page come to life.
Adaptive design
Fine-tune your adaptive design
Components
On the page, you can select an element (or a collection of elements) and turn them into a component. All the props will be passed on to copies that are added to the page.
Ready-made Content
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
Drag'n'Drop
You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.
Multiselect
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
Bold, italic, link, span, and other styles, all options to make your text stand out.
Deep select
Navigate the hierarchy of elements with a double click. Hold down Ctrl on Windows or Cmd on MacOS to dive deeper.
Support of Flexbox and Grid
The most cutting-edge frontend coding techniques are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
Unsplash images
Find the perfect image with ease on Unsplash, a highly regarded free image stock, through Quarkly.
Props panel
Take advantage of the categorized style and functional props.
Layout
Element display properties can be found here.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
These settings offer options to change margins and paddings.
Background
Props in this section help create the backgrounds for the elements.
Borders
The properties for borders and border radius can be found here.
Position
Here, element position and z-index can be adjusted through these settings.
Transition
This property makes an element move smoothly from one state to another.
Transform
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
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
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 export a create-react-app project into an archive file that you can host on your own server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
If you need, you can create a GitHub repository for your projects and commit changes.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
In the Quarkly editor, you can find all the entities of the page.
Debugger
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
If you are not sure how to spell a property, start typing and the editor will help you.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Incredible opportunities for business.
Collaboration
Work on a project together with your team using the Quarkly collaboration tool, simply send them an invitation.
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
You can give any element the required characteristics in the code editor.
Image ALT
A special 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
Set these options appropriately to ensure that your website appears as intended in social media and search engine results.
User-friendly URL
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
Landing page editor 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