Landing page maker for web designers.
Meet Quarkly.
Use pre-made React components or build your own. Unlimited customisation possibilities, no-code tools of a classic editor. Completely free — you should try it now
Create Project
Total creative control of your design.
Primitives
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Themes
A consistent design for your site is attainable with the use of themes.
Extended Styling
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Adaptive design
Fine-tune your adaptive design
Components
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Ready-made Content
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
By utilizing various design approaches for elements at breakpoints, your website is completely responsive to mobile devices.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Drag'n'Drop
Move elements around, place them however you want on the page, or nest them in other elements.
Multiselect
You can remove, drag to a different location, style, remove, and more multiple elements simultaneously.
Text editor
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
Deep select
With the double click, you can go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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 change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash images
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
Enjoy 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
Margin and padding configuration is available here.
Background
Here you'll find some props to help you set up element backgrounds.
Borders
This section allows you to configure borders and border radius.
Position
This category allows you to position elements and set their z-index values.
Transition
This property makes it easier for an element to change from one state to another.
Transform
With the help of this property, you can rotate or zoom the element.
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
Modules from NPM can be imported into your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
Your project can be finished or hosted on your server by exporting it into an archive using 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
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
Debugger
In the debug console, component code or page errors might be found.
Tooltips in the code
If you're unsure about how to spell a particular attribute, just start typing, and the editor will correct you.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Unbeatable opportunities for business.
Collaboration
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
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
Get the right display for your website in search engines and social media through these settings.
User-friendly URL
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Landing page maker for web designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project