Landing page editor for full stack coders.
Meet Quarkly.
Get all the power of graphic design tools and website builders. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Choose from one of many pre-made blocks
Create Project
Total control over the design.
Primitives
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
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
Add ready-made blocks: maps, videos, pop-ups, and much more
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
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
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
You can go up and down the hierarchy of elements using the double click. If you want to dive into the hierarchy, on Windows hold down the Ctrl key and on MacOs the Cmd key.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash images
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
Make use of organized and categorized style and functional properties to improve your project.
Layout
Here you can find element display properties.
Typography
Use the properties in this section to change the text's appearance.
Indents
In these settings, you can set margins and paddings.
Background
Props for element backgrounds can be found in this section.
Borders
With these options, you can set up borders and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
This property makes an element move smoothly from one state to another.
Transform
With this property, you can transform the element, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
If necessary, quickly import modules into your component through NPM.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can finish or host your project on your server with ease by exporting it into an archive with 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 best open source Static Site Generators.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
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 keep an eye on each thing on the page.
Debugger
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
If you're unsure about how to spell a particular attribute, just start typing, and the editor will correct you.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Incredible opportunities for business.
Collaboration
Work on projects with your teammates using the Quarkly collaboration tool, just send them an invite.
Semantic tags
You can make a component act as a tag by setting the “as” property to the desired value.
Schema.org
Assign attributes to elements with ease in the code editor.
Image ALT
The "Image" element has a unique property.
Favicons
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
User-friendly URL
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
Landing page editor 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