Landing page maker for freelancers.
Meet Quarkly.
Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. All-in-one website builder on React — Quarkly. Completely free — you should try it now
Create Project
Full control over the design.
Primitives
Essential building blocks modeled after HTML tags, like Text, Image, Box, and others.
Themes
Build a professional-looking design using themes
Extended Styling
Put the power of animation, effects, and transformations at your fingertips.
Adaptive design
Fine-tune your adaptive design
Components
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Ready-made Content
Add premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
Your site works perfectly on mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can add custom breakpoints or edit existing ones in the project theme.
Drag'n'Drop
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Multiselect
You can remove, drag to a different location, style, remove, and more multiple elements simultaneously.
Text editor
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
Deep select
Use the double click to move up and down the hierarchy of elements in your document. If you need to go 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 methods of front-end coding 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
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash images
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Style and utility characteristics are categorized here.
Layout
Get access to element display properties in this section.
Typography
You can change text styles by using special properties in this section.
Indents
To set margins and paddings, open these settings.
Background
This section has props you can use to set up element backgrounds.
Borders
This section allows you to configure borders and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
This property makes an element change smoothly from one state to another.
Transform
This property lets you transform the element, for example, zoom or rotate.
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
Import modules to your component from NPM with ease.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to finish or host your project on your server, there is only one thing you need to do: export it as an archive using a create-react-app project.
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
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
Debugger
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
When you make changes to the page, you can see those same edits reflected in the code.
Wonderful opportunities for business.
Collaboration
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
In the code editor, you can assign necessary attributes to elements.
Image ALT
The "Image" element has a unique property.
Favicons
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
Use these settings to ensure that your website appears as intended on social media and in search results.
User-friendly URL
Enhance your site's visibility in search engines and ease of use with user-friendly URLs.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
Landing page maker for freelancers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project