Web app maker for product managers.
Meet Quarkly.
Completely free — you should try it now. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Unlimited customisation possibilities, no-code tools of a classic editor
Create Project
Ultimate control over the design.
Primitives
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
Themes
You can make your site's design consistent 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
Select a single element or multiple elements on the page or Layer panel and convert them into a component. Place component copies on the page and enjoy the inheritance of all properties.
Ready-made Content
Add ready-made blocks: maps, videos, pop-ups, and much more
Customizing design with breakpoints
Make sure your site is 100% adaptive by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
You can customize the breakpoints in your project theme by adding or editing them.
Drag'n'Drop
You can place elements wherever you want on a page — that's up to you. You can drop them in the desired area, or nest them in other ones.
Multiselect
You can choose multiple elements, set their styles, move to another place, delete, 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
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
We follow up-to-date frontend coding approaches at 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
Let your website design express your brand's personality by connecting fonts from a library with more than 990 font families.
Unsplash images
Utilize Unsplash, one of the most widely used free image banks, to choose images directly from the Quarkly interface.
Props panel
Enjoy a friendly interface with categorized styles and useful properties.
Layout
Here you can change the way elements appear.
Typography
You can apply the text style properties found here to your text.
Indents
Here you can configure margins and paddings, which control the space around elements.
Background
This section contains props for setting up element backgrounds.
Borders
Here you can configure borders and border radius.
Position
You can change the element position and z-index settings in this category.
Transition
Elements can easily transition from one state to another thanks to this property.
Transform
This property gives you the power to transform your element in a variety of ways, like rotating or zooming.
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
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
You can easily export your work to Gatsby, a popular static site generator.
Pushing commits to your GitHub repository
If needed, you can create a GitHub repository for your project and commit changes.
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
The Quarkly editor lets you see all the entities that are present on the page.
Debugger
Errors in the component code or pages can be seen 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
When you make changes to the page, you can see those same edits reflected in the code.
Fantastic opportunities for business.
Collaboration
Work on a project together with your team using the Quarkly collaboration tool, simply send them an invitation.
Semantic tags
All components can act as a tag. Just select the necessary “as” property value.
Schema.org
In the code editor, you can give items the desired attributes.
Image ALT
This is a separate property of the “Image” element.
Favicons
Set up unique Windows tile background colors and exclusive icons for multiple devices.
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
To improve your site's SEO, make sure the URLs are readable by humans.
Robots.txt and sitemap.xml
Ready-made files available for customization and future editing.
Web app maker for product managers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project