Landing page editor for React developers.
Meet Quarkly.
Get all the power of graphic design tools and website builders. Complete design control, supports Grid and Flexbox. Unlimited customisation possibilities, no-code tools of a classic editor
Create Project
Ultimate control over the design.
Primitives
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes
Themes make it easy to give your website a unified appearance.
Extended Styling
Make your site stand out from the crowd with eye-catching layouts, animations, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
Ready-made Content
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
You have an opportunity to use breakpoints of the project theme or download your own ones.
Drag'n'Drop
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Multiselect
Use the multi-select feature to apply styles, move, remove, or perform other actions on multiple elements.
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
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 support the most advanced 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 your website design more expressive by connecting fonts from a library with 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 style and functional properties.
Layout
Check out this section to use element display properties.
Typography
To change text styles, use special properties in this section
Indents
Adjust margins and paddings with ease in these settings.
Background
This section has props you can use to set up element backgrounds.
Borders
Borders and border radius can be set up here.
Position
You can change the element position and z-index settings in this category.
Transition
This property makes an element move smoothly from one state to another.
Transform
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
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
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Publish your ready site on Netlify to receive a technical domain name, such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can find all the entities of the page.
Debugger
Use our debug console to track errors in the component code and pages.
Tooltips in the code
Don't let spelling uncertainties hold you back — start typing and the editor will guide 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
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
You can provide elements the appropriate characteristics in the code editor.
Image ALT
A special property of the “Image” element.
Favicons
Set up custom icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
Landing page editor 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