Landing page editor for frontend engineers.
Meet Quarkly.
Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Publish your website online or export it to Github. Choose from one of many pre-made blocks
Create Project
Ultimate control over the design.
Primitives
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Themes
You can use themes to create a consistent design for your site.
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
Make your page come alive with ready-made blocks like maps, videos, pop-ups, and many more.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
You can create, edit, or delete custom breakpoints in the project theme.
Drag'n'Drop
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Multiselect
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
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
Quarkly supports the most advanced approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To modify the look of an element, such as its hover appearance, simply enable "hover" and customize the properties.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash images
Unsplash is one of the most popular websites for free photos. You can look for and select images using the Quarkly interface.
Props panel
Here you'll find categorized collections of style and functional properties.
Layout
Element display properties can be found here.
Typography
To change text styles, use special properties in this section
Indents
Open these settings to configure margins and paddings.
Background
Here, you will have access to props for element background setup.
Borders
Here you can adjust borders and border radius.
Position
You can modify the settings for element position and z-index in this category.
Transition
Elements can easily transition from one state to another thanks to this property.
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
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 to your component from NPM with ease.
SEO
Optimize your site to promote it on search engines.
Export CRA
Easily complete or host your project on your server by exporting it into an archive with a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Your projects can be easily exported to Gatsby, a well-liked static site generator.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
Publish your site on Netlify whenever it's ready. A custom domain will be automatically generated for you, for example: https://inspiring-beaver-d128ed.netlify.com
Modern built-in code editor
The editor shows each and every entity that is present on the page.
Debugger
Errors in the component code or pages can be seen in the debug console.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Stunning 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
You can set desired attributes to elements in the code editor.
Image ALT
The "Image" element has a distinct property for this.
Favicons
Install distinctive device icons and a customized Windows tile backdrop color.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are automatically produced. But if necessary, you can alter them.
Landing page editor for frontend engineers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project