Landing page maker for low-code developers.
Meet Quarkly.
Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Choose from one of many pre-made blocks. All-in-one website builder on React — Quarkly
Create Project
Full control over the design.
Primitives
Primitive content elements function similarly to HTML tags. For example, Text, Image, and Вох.
Themes
Build a consistent design using themes
Extended Styling
Put the power of animation, effects, and transformations at your fingertips.
Adaptive design
Fine-tune your adaptive design
Components
Group elements on the Layer panel, and then convert them into components. Add copies of the components to your page, and all of their settings will be inherited.
Ready-made Content
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
By creating various solutions for elements at breakpoints, you can ensure that your website is mobile-friendly.
Adding and editing breakpoints
You can create, edit, or delete custom breakpoints in the project theme.
Drag'n'Drop
You decide where to place the elements. Move them wherever you want, or nest them in 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
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 modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
Activate the "hover" prop and set up the desired props to change how an element appears, for example, in a hover state.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Unsplash images
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
Here you will find categorized style and functional properties.
Layout
You can find the element display properties under this section.
Typography
To change the style of your text, use special properties in this section.
Indents
In these settings, you can set margins and paddings.
Background
This section offers props for setting up element backgrounds.
Borders
You can change the border radius and borders in this section.
Position
Element position and z-index settings can be adjusted in this category.
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
Create your own React components in the Quarkly code editor and seamlessly integrate them into 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
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
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 store your project in a GitHub repository and make changes to it.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Debugger
Component code or page errors can be detected in the 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
All of the edits you make to the site are shown in the code and vice versa.
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
Component-to-tag transformation made simple with the right "as" property value selection.
Schema.org
Assign attributes to elements with ease in the code editor.
Image ALT
This is a separate property of the “Image” element.
Favicons
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
Configure these settings to display your website correctly in search engine results and social media.
User-friendly URL
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are automatically produced. However, you are free to modify them as you see fit in the future.
Landing page maker 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