Website editor for ux designers.
Meet Quarkly.
Use pre-made React components or build your own. Completely free — you should try it now. Publish your website online or export it to Github
Create Project
Ultimate control over the design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Themes
Themes make it easy to create a consistent look for your website.
Extended Styling
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Adaptive design
Fine-tune your adaptive design
Components
Components are reusable design elements. To create a component, select an element or group of elements on the page or in the Layers panel and group them into component. Add copies of the component to the page, and they will inherit all their properties from the original.
Ready-made Content
Add maps, videos, pop-ups, and more to your site with ready-made blocks.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
You can use your own custom breakpoints, or select one of the existing ones.
Drag'n'Drop
Place elements however you want on the page — that is your choice. You can drop them in the desired area, or nest them in other ones.
Multiselect
You can remove, drag to a different location, style, remove, and more multiple elements simultaneously.
Text editor
You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it.
Deep select
You can double-click to go up and down the hierarchy of your objects. If you need to get inside the hierarchy, hold down the Ctrl key on Windows or Cmd on MacOs.
Support of Flexbox and Grid
The most cutting-edge frontend coding techniques are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash images
Browse the Unsplash image collection and choose those you need directly from the Quarkly interface.
Props panel
Style and utility characteristics are categorized here.
Layout
Check out this section to use element display properties.
Typography
In this section, you can change text styles using special properties
Indents
To configure margins and paddings, open these settings.
Background
In this section, you can find props for element backgrounds.
Borders
This section allows you to configure borders and border radius.
Position
The element position and z-index settings can be altered here.
Transition
This property makes it possible for elements to move smoothly from one state to another.
Transform
You can transform the element using this property, for instance, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can design distinctive React components in the Quarkly code editor and then insert them on the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Import modules from NPM to your component quickly and easily.
SEO
Optimize your site to promote it on search engines.
Export CRA
There is just one thing to do if you want to finish or host your project on your 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
With just a few clicks, export your projects to Gatsby, a well-known static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
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
In the Quarkly editor, you can keep an eye on each thing on the page.
Debugger
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
Start typing and the editor will auto-complete what you've written if you need help spelling a property.
Synched pages and code editor
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Amazing opportunities for business.
Collaboration
Work on a project together with your team using the Quarkly collaboration tool, simply send them an invitation.
Semantic tags
You can use each component as a tag. Just choose the needed value of the “as” property.
Schema.org
You can specify desired attributes for elements in the code editor.
Image ALT
This particular property is a part of the "Image" element.
Favicons
This feature helps you install unique icons for all devices and individual tile background color for Windows 10.
Open graph and meta tags
Configure these settings to display your website correctly in search engine results and social media.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
Website editor for ux designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project