Landing page editor for low-code developers.
Meet Quarkly.
Publish your website online or export it to Github. Choose from one of many pre-made blocks. Get all the power of graphic design tools and website builders
Create Project
Full control over the design.
Primitives
Primitive content components work like HTML tags. For example, Text, Image, and Вох.
Themes
Build a consistent design using themes
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 ready-made blocks: maps, videos, pop-ups, and many more
Customizing design with breakpoints
Make sure your website is perfectly adapted to all devices by using design solutions for elements and breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new 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 select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
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
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
Advanced frontend coding is at the forefront of Quarkly's approach.
Configuring styles of pseudo-classes hover/active/focus, etc.
Transform the appearance of an element, including its hover behavior, by turning on "hover" and adjusting the desired properties.
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
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Props panel
Take advantage of the categorized style and props.
Layout
This is where you can locate element display properties.
Typography
To change text styles, use special properties in this section
Indents
Configure margins and paddings using these settings.
Background
The section contains props that enable you to set element backgrounds.
Borders
The properties for borders and border radius can be found here.
Position
This category allows you to position elements and set their z-index values.
Transition
This property makes an element move smoothly from one state to another.
Transform
This property can be used to rotate or zoom the element, for example.
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
Quickly import modules to your component from NPM when needed.
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
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
If you'd like to keep track of your changes, you can create a GitHub repository and commit them.
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Debugger
Use our debug console to track errors in the component code and pages.
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
The pages and code maintain a dynamic relationship, showing any modifications made in both.
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 choose the required "as" property value.
Schema.org
You can set desired attributes to elements in the code editor.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
Customize your device icons and set individual tile background color on 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
This feature allows you to set user-friendly page URLs.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
Landing page editor for low-code developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project