Landing page editor for ux designers.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. All-in-one website builder on React — Quarkly. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS
Create Project
Absolute creative control of your design.
Primitives
Website is composed of basic components similar to HTML tags such as Text, Image, and Вох.
Themes
A consistent design for your site is attainable with the use of themes.
Extended Styling
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Ready-made Content
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Use your custom breakpoints or choose one of the existing ones.
Drag'n'Drop
Elements can be moved around, positioned however you like on the page, or nested inside other elements.
Multiselect
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
Text editor
You can turn a part of the text into italic or bold, make it a link or convert to span, and use any style for it.
Deep select
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
The most cutting-edge frontend coding techniques are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Make use of organized and categorized style and functional properties to improve your project.
Layout
In this section, you can configure element display properties.
Typography
Use the properties in this section to change the text's appearance.
Indents
To configure margins and paddings, open these settings.
Background
Here, you will have access to props for element background setup.
Borders
Find the options for borders and border radius configuration in this section.
Position
This category lets you fine-tune element position and z-index settings.
Transition
Elements can easily transition from one state to another thanks to this property.
Transform
With this property, you can transform the element, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
With the Quarkly code editor, you can 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
Importing modules to your component from NPM has never been easier.
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
You can easily export your work to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Debugger
Mistakes in the component code can be identified 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
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Amazing opportunities for business.
Collaboration
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
Any element can serve as a tag. Simply select the "as" property value you require.
Schema.org
In the code editor, you can assign desired attributes to any element.
Image ALT
A unique attribute that belongs to the "Image" element.
Favicons
Set up custom icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Configure these settings to display your website correctly in search engine results and social media.
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 ux designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project