Web page editor for ui designers.
Meet Quarkly.
Publish your website online or export it to Github. Use pre-made React components or build your own. Get all the power of graphic design tools and website builders
Create Project
Total control over the design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Вох, and others.
Themes
Themes make it easy to give your website a unified appearance.
Extended Styling
Boost your websites' functionality with distinctive layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props.
Ready-made Content
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance 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 change current breakpoints in the project theme or add new ones.
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
You can link certain passages of text, make them bold or italic, or both. You can choose the font face, size, and color as well.
Deep select
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
At Quarkly, we support the latest and greatest in frontend coding.
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
Use the library of over 990 font families to make your site look more beautiful
Unsplash images
Quarkly is integrated with Unsplash, a high-quality image stock that makes it easy to find and use great photos.
Props panel
Style and utility characteristics are categorized here.
Layout
This section lets you control how elements appear.
Typography
Browse text style properties in this section
Indents
Here you will find the settings for margins and paddings.
Background
For element backgrounds, look in this section for props.
Borders
Here you can adjust borders and border radius.
Position
This category contains settings for configuring the position and z-index of elements.
Transition
Elements can easily transition from one state to another thanks to this property.
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
Create your own React components in the Quarkly code editor and seamlessly integrate them into 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
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 — one of the best open source Static Site Generators.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
Publication on Netlify
Once your site is ready, publish it on Netlify with a domain name like inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
The Quarkly editor contains all of the page's entities.
Debugger
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
If you are not sure how to spell a property, start typing and the editor will help you.
Synched pages and code editor
When you edit a page, the changes are applied to the code and vice versa.
Unbeatable opportunities for business.
Collaboration
Join forces with your team using the Quarkly collaboration tool, all it takes is an invitation.
Semantic tags
Every component has the ability to act like a tag. Simply select the necessary value for the "as" field.
Schema.org
In the code editor, you can give items the desired attributes.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
You can use unique icons for different devices and change the background color of Windows 10 tiles.
Open graph and meta tags
These options are designed to ensure that your website appears properly in search engine results and on social media.
User-friendly URL
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Web page editor 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