Website maker for ui designers.
Meet Quarkly.
Choose from one of many pre-made blocks. Publish your website online or export it to Github. Completely free — you should try it now
Create Project
Total control over the design.
Primitives
Basic elements that resemble HTML tags: Text, Image, Box, and others.
Themes
You can make your site's design consistent by using themes.
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
You can choose an element (or a group of elements) on the page and convert them into a component. Add copies to the page and they will inherit all the props.
Ready-made Content
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Use your own breakpoints or choose one of the ones that are already there.
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 pick multiple elements, modify their styles, move them to a different location, delete them, and more.
Text editor
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Deep select
Double-click to go up and down the hierarchy of elements. To dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
Quarkly supports the most modern methods of frontend coding.
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
Give your website design a unique look by choosing from the library of 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
Enjoy categorized styles and functional properties in a friendly interface.
Layout
Under this section, you can find element display properties.
Typography
Use the special properties in this section to alter the text's style.
Indents
Adjust margins and paddings with ease in these settings.
Background
Use the props in this section to customize element backgrounds.
Borders
Find the options for borders and border radius configuration in this section.
Position
Element position and z-index settings can be adjusted in this category.
Transition
An element can transition from one state to another without interruption thanks to this property.
Transform
This property allows you to transform the element, for example, 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 from NPM with ease.
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 well-known web frameworks for static site generation.
Pushing commits to your GitHub repository
You can establish a GitHub repository for your project and submit updates there.
Publication on Netlify
Publish your website to Netlify once it is complete. Its technical domain name will be generated automatically.
Modern built-in code editor
You can keep an eye on every entity on the page in the Quarkly editor.
Debugger
Errors in the component code or pages will show up in the debug console.
Tooltips in the code
As you type, the editor will suggest possible matches to the property you're looking for.
Synched pages and code editor
Changes made to a page are reflected in the code and vice versa.
Remarkable opportunities for business.
Collaboration
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
Any part can serve as a tag. Just choose the "as" property's desired value.
Schema.org
You can set desired attributes to elements in the code editor.
Image ALT
The "Image" element features a separate property.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Here are some settings that will help your site appear correctly on social networks and in search engines.
User-friendly URL
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Website maker for ui designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project