Landing page editor for web agencies.
Meet Quarkly.
Choose from one of many pre-made blocks. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Complete design control, supports Grid and Flexbox
Create Project
Full creative control of your design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Themes
Create a consistent and professional-looking design with the help of themes.
Extended Styling
Boost your websites' functionality with distinctive layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Components are reusable design elements. To create a component, select an element or group of elements on the page or in the Layers panel and group them into component. Add copies of the component to the page, and they will inherit all their properties from the original.
Ready-made Content
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can use your own custom breakpoints, or select one of the existing ones.
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 choose multiple elements, set their styles, move to another place, delete, and more.
Text editor
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
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 embraces the latest and greatest in frontend coding methods.
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
Connecting fonts from a library with more than 990 font families will help your website design express the personality of your brand.
Unsplash images
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
Take advantage of the categorized style and props.
Layout
Here you will find the element display properties.
Typography
Browse text style properties in this section
Indents
Here you will find the settings for margins and paddings.
Background
This section contains props that help you create element backgrounds.
Borders
Find the options for borders and border radius configuration in this section.
Position
Element position and z-index settings can be adjusted in this category.
Transition
An element can transition from one state to another more easily thanks to this property.
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
In Quarkly, the code editor provides the ability to build unique React components 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
There is just one thing to do if you want to finish or host your project on your server: export it into an archive with a 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
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
You can keep an eye on every entity on the page in the Quarkly editor.
Debugger
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide you.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Fantastic opportunities for business.
Collaboration
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
In the code editor, you can give items the desired attributes.
Image ALT
The "Image" element features a separate property.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
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
Enhance your site's visibility in search engines and ease of use with user-friendly URLs.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Landing page editor for web agencies.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project