Landing page editor for frontend coders.
Meet Quarkly.
Unlimited customisation possibilities, no-code tools of a classic editor. Publish your website online or export it to Github. All-in-one website builder on React — Quarkly
Create Project
Ultimate control over the design.
Primitives
A website is made up of fundamental elements similar to HTML tags. For example, Text, Image, and Вох.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Put the power of animation, effects, and transformations at your fingertips.
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
Get creative with ready-made blocks: maps, videos, pop-ups, and much more.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you may want to add custom breakpoints or edit existing ones.
Drag'n'Drop
Element placement options include dragging and dropping, nesting, and arranging them however you like on the page.
Multiselect
You can select multiple elements and set their styles, drag to another place, remove, and more.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
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
Quarkly supports the most advanced approaches to frontend coding.
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
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Unsplash images
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
Enjoy categorized style and functional properties.
Layout
This section lets you control how elements appear.
Typography
You can apply the text style properties found here to your text.
Indents
To set margins and paddings, open these settings.
Background
Here, you will have access to props for element background setup.
Borders
You can define borders and border radius using these options.
Position
This category contains settings for configuring the position and z-index of elements.
Transition
This property makes an element move smoothly from one state to another.
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
The Quarkly code editor allows you to create unique React components and then place them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
It has never been simpler to import modules from NPM into your component.
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
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
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
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Fantastic opportunities for business.
Collaboration
Make use of the Quarkly collaboration tool by inviting your teammates to work on a project with you.
Semantic tags
Make every component work as a tag by selecting the desired "as" property value.
Schema.org
You can edit the necessary attributes of elements in the code editor.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
This feature helps you to install unique icons for all devices.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
User-friendly URL
Make sure you use human-readable URLs to improve your site's SEO.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
Landing page editor for frontend coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project