Web app builder for full stack developers.
Meet Quarkly.
Use pre-made React components or build your own. Choose from one of many pre-made blocks. All-in-one website builder on React — Quarkly
Create Project
Ultimate control over the design.
Primitives
Fundamental building blocks resembling HTML tags, such as Text, Image, and Box.
Themes
Using themes you can create a consistent design for your site
Extended Styling
Boost your websites' functionality with distinctive layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Choose an element or elements on the page or Layer panel, convert them into a component, and add copies to the page for seamless inheritance of all properties.
Ready-made Content
Add premade blocks, including videos, pop-ups, maps, and 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 change current breakpoints in the project theme or add new ones.
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 have the option to format multiple elements at once, move multiple elements around the document, or remove multiple elements from their current position.
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
You can move through the elemental hierarchy by double clicking. Hold down the Ctrl key on Windows or the Cmd key on MacOs 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
Make your website look more vibrant by using fonts from a library with over 990 font families.
Unsplash images
From the Quarkly interface, browse the Unsplash image library and select the images you require.
Props panel
Style and utility characteristics are categorized here.
Layout
Check out this section to use element display properties.
Typography
To alter the appearance of your text, use the properties in this section.
Indents
To configure margins and paddings, open these settings.
Background
This section contains props that help you create element backgrounds.
Borders
The properties for borders and border radius can be found here.
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 allows you to transform the element, for example, rotate or zoom.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can create your own React components using the Quarkly code editor and then add them to the page.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Quickly import modules to your component from NPM when needed.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can export your project as an archive using a create-react-app project if you want to finish it or host it on your server.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
You can easily export your projects to Gatsby, which is a popular static site generator.
Pushing commits to your GitHub repository
Create a GitHub repository for your project and make commits with ease.
Publication on Netlify
Once your site is ready, you can publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app.
Modern built-in code editor
In the Quarkly editor, you can keep an eye on each thing on the page.
Debugger
The debug console shows errors in the component code or pages.
Tooltips in the code
Start typing and the editor will correct you if you don't know how to spell a particular property.
Synched pages and code editor
The code and the pages are merged, so your changes to the code are visible in the page and vice versa.
Incredible opportunities for business.
Collaboration
Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite.
Semantic tags
Any element can serve as a tag. Simply choose the required "as" property value.
Schema.org
You can specify desired attributes for elements in the code editor.
Image ALT
A special property of the “Image” element.
Favicons
Get creative with device icons and tile background color on Windows 10 with this exclusive setup feature.
Open graph and meta tags
Make sure your website stands out in search engine results and social media with these display settings.
User-friendly URL
Use human-readable URLs to increase the SEO of your website.
Robots.txt and sitemap.xml
These files are automatically produced. However, you are free to modify them as you see fit in the future.
Web app builder for full stack developers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project