Web page builder for digital agencies.
Meet Quarkly.
Get all the power of graphic design tools and website builders. Unlimited customisation possibilities, no-code tools of a classic editor. Use pre-made React components or build your own
Create Project
Absolute creative control of your design.
Primitives
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Themes
Create a consistent and professional-looking design with the help of themes.
Extended Styling
Supercharge your sites with unique layouts, animations, effects, and transformations
Adaptive design
Fine-tune your adaptive design
Components
Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited.
Ready-made Content
Additionally, you can include pre-made blocks like maps, videos, pop-ups, and much more.
Customizing design with breakpoints
By utilizing various design approaches for elements at breakpoints, your website is completely responsive to mobile devices.
Adding and editing breakpoints
Choose from the preset breakpoints or use your own.
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 can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
Text editor
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
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
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, its hover behavior, enable the "hover" prop and apply any desired additional props.
Google Fonts Connection
Make use of fonts from a collection that includes over 990 font families to give your website a more vibrant appearance.
Unsplash images
Unsplash is one of the most popular free image stocks. Search and select images directly from the Quarkly interface
Props panel
Here you'll find categorized collections of style and functional properties.
Layout
Here you can find element display properties.
Typography
Check out this section to take advantage of text style properties.
Indents
Here you will find the settings for margins and paddings.
Background
Props for element backgrounds can be found in this section.
Borders
Here you can configure borders and border radius.
Position
This category contains settings for configuring the position and z-index of elements.
Transition
This property makes an element change 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 the Quarkly code editor, you can create your own 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
Import modules from NPM quickly, if you need to.
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 your site is ready, you can publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the page's entities are visible in the editor.
Debugger
Monitor component code and page errors using the debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Incredible opportunities for business.
Collaboration
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
A special property of the “Image” element.
Favicons
You can install different icons for different devices, and you can also set a unique 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
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
Web page builder for digital agencies.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project