Web page builder for ui designers.
Meet Quarkly.
Get all the power of graphic design tools and website builders. Publish your website online or export it to Github. Use pre-made React components or build your own
Create Project
Total control over the design.
Primitives
Basic components which are similar to HTML tags like Text, Image, Box, and others.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Give your website the edge it deserves with innovative layouts, engaging animations, and transforming effects.
Adaptive design
Fine-tune your adaptive design
Components
Choose an element or a group of elements on the page or on the Layer panel and turn them into a component. Add component copies to the page and they will inherit all the props.
Ready-made Content
Add videos, pop-ups, customized blocks, and much more to your site.
Customizing design with breakpoints
By employing various design solutions for elements at breakpoints, your website functions flawlessly on mobile devices.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Drag'n'Drop
Have complete control over arranging elements on the page — drop them, nest them, or move them to your desired location.
Multiselect
You can apply styles to multiple elements at once and move them around, as well as remove them.
Text editor
You can make parts of your text bold or italic, or turn them into links. The font face, size, and color are also up to you.
Deep select
If you need to go up and down the hierarchy of elements, double-click them. If you want to dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key on MacOs.
Support of Flexbox and Grid
The most cutting-edge methods of front-end coding are supported by Quarkly.
Configuring styles of pseudo-classes hover/active/focus, etc.
If you want to change the element look, for instance, how it appears on hover, enable "hover" and configure the desired props.
Google Fonts Connection
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Take advantage of the categorized style and props.
Layout
Here you can change the way elements appear.
Typography
Use the special properties in this section to alter the text's style.
Indents
You can modify the padding and margins in these settings.
Background
Props in this section help create the backgrounds for the elements.
Borders
Find the options for borders and border radius configuration in this section.
Position
Customize element position and z-index through these settings in this category.
Transition
The smooth movement from one state to another for an element is enabled by this property.
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
You can make your own React components in the Quarkly code editor and add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
You can import modules to your component from NPM.
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
In no time, you can export your projects to Gatsby — one of the best open-source SSGs
Pushing commits to your GitHub repository
Want to create a GitHub repository for your project and commit changes there? Piece of cake!
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 lets you see all the entities that are present on the page.
Debugger
Mistakes in the component code can be identified in the debug console.
Tooltips in the code
If you have doubts about how to spell a property, start typing, and the editor will auto-complete what you're writing.
Synched pages and code editor
Every change you make to a page is reflected in the code, and vice versa.
Wonderful opportunities for business.
Collaboration
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Semantic tags
Every component can act as a tag. Just choose the “as” property value that you need.
Schema.org
In the code editor, you can add attributes to elements as necessary.
Image ALT
This is a separate property of 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
Optimize the display of your site in search engine results and on social media with these settings.
User-friendly URL
Create user-friendly URLs to boost the usability of the resource and the ranking of your site in the search engines.
Robots.txt and sitemap.xml
These files are automatically generated. You can edit these files to suit your needs for the future.
Web page builder 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