Website maker for digital agencies.
Meet Quarkly.
Use pre-made React components or build your own. All-in-one website builder on React — Quarkly. Create your website from scratch or ready-to-use templates
Create Project
Ultimate control over the design.
Primitives
Basic components with a similarity to HTML tags, like Text, Image, Box, and others.
Themes
Themes make it easy to give your website a unified appearance.
Extended Styling
Add a touch of flair to your site with unique layouts, eye-popping animations, and breathtaking transformations.
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
Add videos, pop-ups, customized blocks, and much more to your site.
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
You can add custom breakpoints or edit existing ones in the project theme.
Drag'n'Drop
Move elements around, place them however you want on the page, 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 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
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or the Cmd key on MacOs.
Support of Flexbox and Grid
Here at Quarkly, we are the advocates of cutting-edge approaches to frontend coding.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the way an element looks, such as its appearance on hover, enable the "hover" prop and set other desired props.
Google Fonts Connection
To make your site design look more professional go and use a library of more than 990 font families.
Unsplash images
Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface
Props panel
Style and utility characteristics are categorized here.
Layout
Here you can find element display properties.
Typography
To find the text style properties, go to this section.
Indents
You can configure margins and paddings in these settings.
Background
This section offers props for setting up element backgrounds.
Borders
In this section, you can adjust borders and border radius.
Position
This category contains settings for configuring the position and z-index of elements.
Transition
By using this property, you can make the transition between states of an element smooth.
Transform
This property allows you to manipulate the element, such as by rotating or zooming.
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
You can export a create-react-app project into an archive file that you can host on your own server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
Export your projects to Gatsby, a highly regarded static site generator.
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
When your site is complete, publish it on Netlify for an automatically generated technical domain, like https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
All of the entities that are present on the page are displayed by the editor.
Debugger
Use our debug console to track errors in the component code and pages.
Tooltips in the code
If you need help when spelling a property, start typing and the editor will auto-complete what you've written.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Fantastic opportunities for business.
Collaboration
Send your coworkers an invitation to collaborate with you on a project using the Quarkly collaboration tool.
Semantic tags
You can use every component as a tag. Just choose the “as” property value that you need.
Schema.org
Assign attributes to elements with ease in the code editor.
Image ALT
A unique attribute that belongs to the "Image" element.
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
These settings will help your site display correctly on social networks and in search engines.
User-friendly URL
Make sure your site's URLs are human-readable to improve search engine optimization.
Robots.txt and sitemap.xml
These files are automatically produced. However, you are free to modify them as you see fit in the future.
Website maker 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