Web app editor for freelancers.
Meet Quarkly.
Complete design control, supports Grid and Flexbox. Publish your website online or export it to Github. Get all the power of graphic design tools and website builders
Create Project
Full control over the design.
Primitives
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
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
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
You can also add ready-made blocks: maps, videos, pop-ups and much more.
Customizing design with breakpoints
Rest assured your site is completely mobile-friendly by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
Customize or edit breakpoints in the project theme as desired.
Drag'n'Drop
Drag and drop elements to arrange them on the page, or nest them in other elements.
Multiselect
Take control of multiple elements by selecting them and setting styles, moving, deleting, or doing more.
Text editor
You can apply any style, make a portion of the text bold or italic, a link or span, or any other formatting.
Deep select
The double click allows you to move up and down the hierarchy of elements. Hold down the Ctrl key on Windows or the Cmd key on a Mac to enter the hierarchy.
Support of Flexbox and Grid
Advanced frontend coding is at the forefront of Quarkly's approach.
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
Give your website design a unique look by choosing from the library of 990+ font families.
Unsplash images
Find the perfect image with ease on Unsplash, a highly regarded free image stock, through Quarkly.
Props panel
Here you'll find categorized collections of style and functional properties.
Layout
You can find the element display properties under this section.
Typography
Use the special properties in this section to alter the text's style.
Indents
Margin and padding configuration is available here.
Background
In this section, you can find props for element backgrounds.
Borders
You can change the border radius and borders in this section.
Position
This category helps you configure element position and z-index settings.
Transition
This property makes an element transition 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
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
You can import modules to your component from NPM in a few clicks.
SEO
Optimize your site to promote it on search engines.
Export CRA
Easily complete or host your project on your server by exporting 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 famous static-site generation web frameworks
Pushing commits to your GitHub repository
Want to add modifications to a GitHub repository you've created for your project? Well, you can. With Quarkly.
Publication on Netlify
Publish your site on Netlify once you're ready for it to go live. A technical domain will be created automatically for it, like: https://inspiring-beaver-d128ed.netlify.app
Modern built-in code editor
In the Quarkly editor, you can monitor all the entities that are present on the page.
Debugger
To find faults in the component code and pages, use our 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.
Remarkable opportunities for business.
Collaboration
Join forces with your team using the Quarkly collaboration tool, all it takes is an invitation.
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
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
Set these options appropriately to ensure that your website appears as intended in social media and search engine results.
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.
Web app editor for freelancers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project