Website maker for frontend developers.
Meet Quarkly.
Choose from one of many pre-made blocks. Complete design control, supports Grid and Flexbox. 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
Using themes will help your website's design remain consistent.
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 maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
Your website is designed to look great on all devices, including tablets and smartphones.
Adding and editing breakpoints
Choose from the preset breakpoints or use your own.
Drag'n'Drop
Place elements exactly where you want them on the page, whether it be by dropping them, nesting them, or moving them.
Multiselect
You can select multiple elements and modify their styles or drag'n'drop them to change their location.
Text editor
You can change the appearance of text — for instance, making it bold or italic, turning it into a link, or converting it to a span—as well as apply any style to it.
Deep select
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs to enter the hierarchy.
Support of Flexbox and Grid
At Quarkly, we use the most advanced frontend coding techniques.
Configuring styles of pseudo-classes hover/active/focus, etc.
Simply enable "hover" and arrange the desired props to alter the appearance of an element, such as how it behaves on hover.
Google Fonts Connection
If you want your site design to look more professional, consider using a library of more than 990 font families.
Unsplash images
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Take advantage of the categorized style and functional props.
Layout
Check out this section to use element display properties.
Typography
Go to this section to find text style properties.
Indents
Open these settings to configure margins and paddings.
Background
This section consists of props for element backgrounds.
Borders
Here you can configure border and border radius.
Position
You can change the element position and z-index settings in this category.
Transition
This property makes an element move 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 Quarkly, the code editor provides the ability to build unique 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
Importing modules to your component from NPM has never been easier.
SEO
Optimize your site to promote it on search engines.
Export CRA
If your goal is to host a project on your server, here's the one thing you have to do: export it into an archive with a create-react-app project!
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 build a GitHub repository for your projects if necessary and commit updates there.
Publication on Netlify
Publish your site on Netlify when it's ready. A technical domain will be generated automatically, for instance: https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Debugger
To find faults in the component code and pages, use our debug console.
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
No matter what changes are made to the pages or code, both are always in sync.
Wonderful opportunities for business.
Collaboration
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Semantic tags
You can use each component as a tag. Just choose the needed value of the “as” property.
Schema.org
In the code editor, you can assign desired attributes to any element.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
Get the right display for your website in search engines and social media through these settings.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
Automatically generated files open for your editing and personalization.
Website maker for frontend developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project