Web page builder for SaaS.
Meet Quarkly.
Publish your website online or export it to Github. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Complete design control, supports Grid and Flexbox
Create Project
Ultimate control over the design.
Primitives
Text, Image, Box — the most basic components similar to HTML tags.
Themes
Build a consistent design using themes
Extended Styling
Enhance the functionality of your websites with unique layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
You can create reusable components from any selection of elements on the page or in a layer. When you add the component to a page, it inherit all of its original properties.
Ready-made Content
Make your page come alive with ready-made blocks like maps, videos, pop-ups, and many more.
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
Use your personal breakpoints or select one of the ones already in place.
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 have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
Text editor
You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
Deep select
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
At Quarkly, we support the latest and greatest in frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the way an element looks like, for example, how it appears on hover, just enable "hover" and configure the desired props.
Google Fonts Connection
Use the library of over 990 font families to make your site look more beautiful
Unsplash images
Find the perfect image with ease on Unsplash, a highly regarded free image stock, through Quarkly.
Props panel
This offers categorized style and functional properties.
Layout
Check out this section to use element display properties.
Typography
Use the special properties in this section to alter the text's style.
Indents
These settings allow you to change margins and paddings.
Background
In this section, you can find props for element backgrounds.
Borders
Here you can adjust borders and border radius.
Position
With this category, you can fine-tune element position and z-index settings.
Transition
The smooth movement from one state to another for an element is enabled by this property.
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
You can design distinctive React components in the Quarkly code editor and then insert them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
With a few clicks, you can quickly 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, there is only one thing you need to do: export it as an archive using 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
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
Debugger
In the debug console, component code or page errors might be found.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Wonderful opportunities for business.
Collaboration
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
In the code editor, you can provide items the required characteristics.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
This feature allows you to install icons for all devices and change the background color of individual tiles in Windows 10.
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
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
These files are created automatically. But you can edit them as you think they fit in the future.
Web page builder for SaaS.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project