Landing page editor for frontend developers.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Get all the power of graphic design tools and website builders. All-in-one website builder on React — Quarkly
Create Project
Absolute creative control of your design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, 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
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
You can change current breakpoints in the project theme or add new 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
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
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
Quarkly supports the most modern methods of frontend coding.
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
By incorporating fonts from a collection of more than 990 font families, you can give your website design more expression.
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
This section allows you to configure the display properties of elements.
Typography
You can apply the text style properties found here to your text.
Indents
To set margins and paddings, open these settings.
Background
The section contains props that enable you to set element backgrounds.
Borders
You can change the border radius and borders in this section.
Position
This category helps you configure the position and z-index settings of elements.
Transition
This property makes an element move smoothly from one state to another.
Transform
This property allows you to transform the element, for example, rotate or zoom.
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
You can easily import modules from NPM to your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can export a create-react-app project into an archive file that you can host on your own server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
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
All edits you apply to the pages are shown in 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
Component-to-tag transformation made simple with the right "as" property value selection.
Schema.org
You can set attributes to elements in the code editor.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
Create unique device icons and a unique Windows tile backdrop color.
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
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
Automated file creation with the option to edit as desired.
Landing page editor for frontend developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project