Website builder for digital agencies.
Meet Quarkly.
Use pre-made React components or build your own. Publish your website online or export it to Github. Get all the power of graphic design tools and website builders
Create Project
Full control over the design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
You can make your site's design consistent by using themes.
Extended Styling
With stylish animations, effects, and transformations, you can make your web page more exciting.
Adaptive design
Fine-tune your adaptive design
Components
Transform an element or group of elements on the page or Layer panel into a component. Add copies to the page and they will inherit all properties.
Ready-made Content
Enhance your page with ready-made blocks including maps, videos, pop-ups, and more.
Customizing design with breakpoints
Guarantee a 100% adaptive website by using design solutions that cater to elements at breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
Drag'n'Drop
Move elements around, place them however you want on the page, or nest them in other elements.
Multiselect
You can pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
If needed, you can change part of the text into bold or italic, link or convert it to span, or edit its style.
Deep select
With the double click, you can go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
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 change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.
Google Fonts Connection
Add a personal touch to your website with the use of 990+ font families available in the library.
Unsplash images
One of the most well-liked free photo sites is Unsplash. From the Quarkly interface, you can search for and choose images.
Props panel
Take advantage of the categorized style and props.
Layout
Explore element display properties in this location.
Typography
To find the text style properties, go to this section.
Indents
You can modify the padding and margins in these settings.
Background
Props for element backgrounds can be found in this section.
Borders
Here you can configure borders and border radius.
Position
The element position and z-index settings can be altered here.
Transition
You can ensure a smooth transition between states of an element with this property.
Transform
With the help of this property, you can rotate or zoom the element.
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 to your component from NPM in no time, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
If you want to host your project on your server, you can export it into an archive with create-react-app.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
You can create 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
In the Quarkly editor, you can keep an eye on each thing on the page.
Debugger
Use our debug console to track errors in the component code and pages.
Tooltips in the code
If you're unsure how to spell a property, start typing and the editor will provide suggestions.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Remarkable opportunities for business.
Collaboration
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Semantic tags
Each and every component can behave as a tag. Just choose the needed value of the “as” property.
Schema.org
You can give elements the desired attributes through the code editor.
Image ALT
A special property of the “Image” element.
Favicons
Set up custom icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
User-friendly URL
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
These files are there for you to use. But you can change them and add to them as you see fit.
Website 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