Web app builder for teams.
Meet Quarkly.
Publish your website online or export it to Github. Get all the power of graphic design tools and website builders. Use pre-made React components or build your own
Create Project
Total control over the design.
Primitives
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
Themes
Create a professional-looking design easily by using themes.
Extended Styling
Make your site stand out from the crowd with eye-catching layouts, animations, 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
With pre-made blocks, you can add maps, videos, pop-ups, and more to your website.
Customizing design with breakpoints
Check out your 100% adaptive website by using different design solutions for elements and breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
Drag'n'Drop
Arrange elements however you want on the page, drop them on the desired area, or nest them in other elements.
Multiselect
You can select multiple elements and apply formatting to them, drag them to another spot in the document, or remove them from their current location.
Text editor
You can make part of the text bold or italic, turn it into a link or convert to span, and apply any style to it.
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
Here at Quarkly, we support the most advanced approaches to 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
Connecting fonts from a library with more than 990 font families will help your website design express the personality of your brand.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Enjoy categorized style and functional properties.
Layout
Here you will find the element display properties.
Typography
You can apply the text style properties found here to your text.
Indents
Margin and padding configuration is available here.
Background
This section contains props that help set element backgrounds.
Borders
Here you can adjust borders and border radius.
Position
The element position and z-index settings can be altered here.
Transition
This property makes an element move smoothly from one state to another.
Transform
Transform your element with ease using this property, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
In Quarkly, the code editor provides the ability to build unique React components and 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 in no time, if needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
Your project can be finished or hosted on your server by exporting it into an archive using 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
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
You can keep an eye on every entity on the page in the Quarkly editor.
Debugger
In the debug console, component code or page errors might be found.
Tooltips in the code
If you're unsure about how to spell a particular attribute, just start typing, and the editor will correct you.
Synched pages and code editor
The code and pages both reflect any modifications made to the pages.
Wonderful opportunities for business.
Collaboration
Collaborate with your team on a project using Quarkly. Just send them an invite and get to work!
Semantic tags
Any part can serve as a tag. Just choose the "as" property's desired value.
Schema.org
In the code editor, you can provide items the required characteristics.
Image ALT
The "Image" element features a separate property.
Favicons
This feature allows you to install icons for all devices and change the background color of individual tiles in 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
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
Automated file creation with the option to edit as desired.
Web app builder for teams.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project