Web page maker for SaaS.
Meet Quarkly.
Publish your website online or export it to Github. Get all the power of graphic design tools and website builders. Create your website from scratch or ready-to-use templates
Create Project
Total control over the design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Themes
Create a consistent and professional-looking design with the help of themes.
Extended Styling
Enhance the functionality of your websites with unique 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
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Ensure your website is fully responsive by using tailored design 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
You choose where to put the elements. You can move them around or nest them in other elements.
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 bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
Deep select
Quickly traverse the hierarchy of elements by double clicking, and hold Ctrl/Cmd to delve into it.
Support of Flexbox and Grid
Quarkly embraces the latest and greatest in frontend coding methods.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Give your website design a unique look by choosing from the library of 990+ font families.
Unsplash images
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Props panel
Here you can find all the styles and functional properties.
Layout
Under this section, you can find element display properties.
Typography
To alter the appearance of your text, use the properties in this section.
Indents
Here you can configure margins and paddings, which control the space around elements.
Background
This section contains props for setting up element backgrounds.
Borders
Here you can configure border and border radius.
Position
This category helps you configure the position and z-index settings of elements.
Transition
This property makes an element move smoothly from one state to another.
Transform
This property will help you transform the element, for instance, rotate or zoom.
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
Import modules to your component with ease, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
One step to complete your project or host it on your own server: export it into an archive with a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby — one of the most famous static-site generation web frameworks
Pushing commits to your GitHub repository
Effortlessly, you can make a GitHub repository for your project and commit changes.
Publication on Netlify
Publish your site on Netlify once you're ready for it to go live. A technical domain will be created automatically for it, like: https://inspiring-beaver-d128ed.netlify.app
Modern built-in code editor
The Quarkly editor lets you see all the entities that are present on the page.
Debugger
Our debug console will help you track errors in the component code and pages.
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
All edits you apply to the pages are shown in the code and vice versa.
Wonderful opportunities for business.
Collaboration
Share projects and work with your team members via Quarkly's collaboration tool. It's easy to use.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
The "Image" element features a separate property.
Favicons
Install unique icons for different devices and individual tile background color for Windows 10.
Open graph and meta tags
Use these settings for the correct display of your site on social networks and in search engines.
User-friendly URL
You may create user-friendly page URLs with this capability.
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 maker 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