Landing page builder for full stack coders.
Meet Quarkly.
Unlimited customisation possibilities, no-code tools of a classic editor. Complete design control, supports Grid and Flexbox. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS
Create Project
Full control over the design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Create a consistent and professional-looking design with the help of themes.
Extended Styling
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Adaptive design
Fine-tune your adaptive design
Components
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Ready-made Content
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
Drag'n'Drop
You can move the elements wherever you want. Nest them in other elements, or leave them as they are.
Multiselect
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
Text editor
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
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.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange the desired props.
Google Fonts Connection
Make your website design more expressive by connecting fonts from a library with more than 990 font families.
Unsplash images
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
Enjoy categorized style and functional properties.
Layout
You can set the element display properties in this section.
Typography
Use this section to customize text styles
Indents
Margin and padding configuration is available here.
Background
This section offers props for setting up element backgrounds.
Borders
Borders and border radius can be set up here.
Position
This category helps you configure element position and z-index settings.
Transition
This property makes an element change smoothly from one state to another.
Transform
Transform your element with ease using this property, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
With the Quarkly code editor, you can create custom React components and then use them on a webpage.
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
One of the final steps to complete your project is to export it into an archive with a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the most popular static site generators, Gatsby, can be the destination for your exported projects.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Once everything is complete, publish your website on Netlify using a technical domain name.
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Debugger
You can keep track of component code and page errors with 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
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Wonderful opportunities for business.
Collaboration
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Semantic tags
Make every component work as a tag by selecting the desired "as" property value.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
This particular property is a part of the "Image" element.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
Get the best of both worlds with human-readable URLs that improve your site's SEO and usability.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
Landing page builder for full stack coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project