Landing page maker for web engineers.
Meet Quarkly.
Choose from one of many pre-made blocks. Publish your website online or export it to Github. Get all the power of graphic design tools and website builders
Create Project
Ultimate control over the design.
Primitives
Text, Image, Box — the most basic components similar to HTML tags.
Themes
Using themes you can create a consistent design for your site
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
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
Customizing design with breakpoints
Ensure your website is fully responsive by using tailored design solutions for elements at breakpoints.
Adding and editing breakpoints
You can change current breakpoints in the project theme or add new ones.
Drag'n'Drop
You choose where to put the elements. You can move them around or nest them in other elements.
Multiselect
You can apply styles to multiple elements at once and move them around, as well as remove them.
Text editor
You can turn a part of the text into italic or bold, make it a link or convert to span, and use any style for it.
Deep select
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.
Support of Flexbox and Grid
We're excited to offer you the best frontend coding practices around.
Configuring styles of pseudo-classes hover/active/focus, etc.
By activating the "hover" prop and positioning the desired props, you can change how an element appears, for example in a hover state.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
Unsplash images
Find the perfect image with ease on Unsplash, a highly regarded free image stock, through Quarkly.
Props panel
Experience the ease of using categorized style and functional properties.
Layout
This is where you can locate element display properties.
Typography
You can apply the text style properties found here to your text.
Indents
In these settings, you can set margins and paddings.
Background
The section contains props that enable you to set element backgrounds.
Borders
You can define borders and border radius using these options.
Position
You can change the element position and z-index settings in this category.
Transition
This property makes an element transition smoothly from one state to another.
Transform
With the help of this property, you can rotate or zoom the element.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In the Quarkly code editor, you can create your own React components and then add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when 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, 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 export your projects to Gatsby — one of the most popular static site generators.
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
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
The editor displays all the entities of the page.
Debugger
Component code or page errors can be detected in the debug console.
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 pages both reflect any modifications made to the pages.
Amazing opportunities for business.
Collaboration
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
Semantic tags
You can use every component as a tag. Just choose the “as” property value that you need.
Schema.org
You can specify desired attributes for elements in the code editor.
Image ALT
A special property of the “Image” element.
Favicons
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
User-friendly URL
It's a good idea to use human-readable URLs to improve your site's search engine optimization.
Robots.txt and sitemap.xml
Automated file creation with the option to edit as desired.
Landing page maker for web engineers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project