Landing page editor for React coders.
Meet Quarkly.
All-in-one website builder on React — Quarkly. Create your website from scratch or ready-to-use templates. Completely free — you should try it now
Create Project
Full creative control of your design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
Put the power of animation, effects, and transformations at your fingertips.
Adaptive design
Fine-tune your adaptive design
Components
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
Ready-made Content
You can also add ready-made blocks: maps, videos, pop-ups and much more.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
Drag'n'Drop
Place elements however you want on the page — that is your choice. You can drop them in the desired area, or nest them in other ones.
Multiselect
You have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
Double-click the elements to move up and down in their hierarchical order. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to descend into the hierarchy.
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.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure 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
Unsplash is one of the most trending free image stocks. Browse its collection and choose images directly from the Quarkly interface.
Props panel
Enjoy categorized styles and functional properties in a friendly interface.
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
Here you can configure margins and paddings, which control the space around elements.
Background
Here, you will have access to props for element background setup.
Borders
In this section, you can adjust borders and border radius.
Position
This category lets you use position and z-index settings.
Transition
This property makes it possible for elements to move 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
You can make your own React components in the Quarkly code editor and add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM quickly, if you need to.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can finish or host your project on your server with ease by exporting it into an archive with create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, one of the most well-known web frameworks for static site generation.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Debugger
Component code or page errors can be detected in the debug console.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
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.
Stunning opportunities for business.
Collaboration
Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
You can give elements the desired attributes through the code editor.
Image ALT
This is a separate property of the “Image” element.
Favicons
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
These settings are meant for the correct display of your website in search engine results and social media
User-friendly URL
Set up user-friendly URLs to improve your site position in the search engines and increase the usability of the resource.
Robots.txt and sitemap.xml
You can further change these automatically generated files.
Landing page editor for React coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project