Landing page builder for entrepreneurs.
Meet Quarkly.
Completely free — you should try it now. Choose from one of many pre-made blocks. Use pre-made React components or build your own
Create Project
Absolute control over the design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Using themes you can create a consistent design for your site
Extended Styling
Use animation, effects, and transformations to make your web page come to life.
Adaptive design
Fine-tune your adaptive design
Components
Select a single element or multiple elements on the page or Layer panel and convert them into a component. Place component copies on the page and enjoy the inheritance of all properties.
Ready-made Content
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Ensure your website is fully responsive by using tailored design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your custom breakpoints or choose one of the existing ones.
Drag'n'Drop
Drag and drop elements to arrange them on the page, or nest them in other elements.
Multiselect
Use the multi-element selection tool to set styles, move, remove, or take other actions on multiple elements.
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
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
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
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
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Here you will find categorized style and functional properties.
Layout
You can find the element display properties under this section.
Typography
You can apply the text style properties found here to your text.
Indents
You can configure margins and paddings in these settings.
Background
This section contains props that help set element backgrounds.
Borders
You can set borders and border radius in this section.
Position
You can modify the settings for element position and z-index in this category.
Transition
This property makes an element transition smoothly from one state to another.
Transform
You can transform the element using this property, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and add them to 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
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
Your projects can be easily exported to Gatsby, a well-liked static site generator.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
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 editor shows all the entities that are present on the page.
Debugger
To find faults in the component code and pages, use our debug console.
Tooltips in the code
Start typing if you're unsure of how to spell a word, and the editor will fill in the blanks for you.
Synched pages and code editor
When you edit a page, the changes are applied to the code and vice versa.
Fantastic opportunities for business.
Collaboration
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
You can use each component as a tag. Just choose the needed value of the “as” property.
Schema.org
You can set desired attributes to elements in the code editor.
Image ALT
A special property of the “Image” element.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
Landing page builder for entrepreneurs.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project