Landing page builder for React developers.
Meet Quarkly.
All-in-one website builder on React — Quarkly. Choose from one of many pre-made blocks. Publish your website online or export it to Github
Create Project
Absolute creative control of your design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Themes
Themes make it easy to give your website a unified appearance.
Extended Styling
With stylish animations, effects, and transformations, you can make your web page more exciting.
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 premade blocks, including videos, pop-ups, maps, and more.
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
You can use your own custom breakpoints, or select 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
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
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
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
We follow up-to-date frontend coding approaches at 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
The library of over 990 font families will help make your site look more beautiful.
Unsplash images
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
Enjoy categorized style and functional properties.
Layout
You can find the element display properties under this section.
Typography
Use the properties in this section to change the text's appearance.
Indents
Margin and padding configuration is available here.
Background
Here you'll find some props to help you set up element backgrounds.
Borders
Here you can configure border and border radius.
Position
You can change the element position and z-index settings in this category.
Transition
This property helps an element move smoothly from one state to another.
Transform
This property can be used to rotate or zoom the element, for example.
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 to your component from NPM in no time, if needed.
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
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
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Debugger
Errors in the component code or pages can be tracked by viewing the debug console.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Wonderful opportunities for business.
Collaboration
Make teamwork a breeze with the Quarkly collaboration tool, just send an invite to your coworkers.
Semantic tags
You can use each component as a tag. Just choose the needed value of the “as” property.
Schema.org
You can customize elements with the necessary attributes in the code editor.
Image ALT
A unique attribute that belongs to the "Image" element.
Favicons
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
Set these options appropriately to ensure that your website appears as intended in social media and search engine results.
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
You can further change these automatically generated files.
Landing page builder for React developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project