Landing page builder for frontend developers.
Meet Quarkly.
All-in-one website builder on React — Quarkly. Publish your website online or export it to Github. Get all the power of graphic design tools and website builders
Create Project
Total control over the design.
Primitives
The simplest, most basic components similar to HTML tags. For example, Text, Image, and Вох.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
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
Place ready-made blocks on the page, for example, maps, videos, pop-ups, and more
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Drag'n'Drop
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
Multiselect
You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.
Text editor
Bold, italic, link, span, and other styles, all options to make your text stand out.
Deep select
Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs.
Support of Flexbox and Grid
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Unsplash images
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Props panel
Enjoy categorized styles and functional properties in a friendly interface.
Layout
You can set the element display properties in this section.
Typography
To alter the appearance of your text, use the properties in this section.
Indents
Open these settings to configure margins and paddings.
Background
For element backgrounds, look in this section for props.
Borders
The properties for borders and border radius can be found here.
Position
This category contains settings for configuring the position and z-index of elements.
Transition
With this property, you can make 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
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
It has never been simpler to import modules from NPM into your component.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to finish or host your project on your server, you can export it into an archive with a create-react-app project
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, which is a popular 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
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Debugger
Mistakes in the component code can be identified 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
All edits you apply to the pages are shown in the code and vice versa.
Incredible opportunities for business.
Collaboration
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Semantic tags
Component-to-tag transformation made simple with the right "as" property value selection.
Schema.org
You can specify desired attributes for elements in the code editor.
Image ALT
The "Image" element has a distinct property for this.
Favicons
Set up unique Windows tile background colors and exclusive icons for multiple devices.
Open graph and meta tags
Configure these settings for the correct display of your website in search engine results and social media.
User-friendly URL
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Landing page builder 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