Web app builder for frontend coders.
Meet Quarkly.
Completely free — you should try it now. All-in-one website builder on React — Quarkly. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS
Create Project
Ultimate control over the design.
Primitives
These are the most basic components similar to HTML tags: Text, Image, Box, and others.
Themes
You can use themes to create a consistent design for your site.
Extended Styling
Put the power of animation, effects, and transformations at your fingertips.
Adaptive design
Fine-tune your adaptive design
Components
On the Layer panel, choose the element or group of elements you want to convert to a component. All of the props will be inherited if you add duplicates of the components to the page.
Ready-made Content
Take advantage of the ready-made blocks such as maps, videos, pop-ups, and more
Customizing design with breakpoints
You can make sure your site is mobile-friendly by designing different solutions for elements at breakpoints.
Adding and editing breakpoints
Use your personal breakpoints or select one of the ones already in place.
Drag'n'Drop
You choose where to put the elements. You can move them around 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
A portion of the text can be changed by applying any style, making it bold or italic, linking to it or making it a span.
Deep select
Double-clicking the hierarchy of elements will take you up and down the element structure. If you want to get inside the structure, hold down the Ctrl key on Windows or 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.
Activate the "hover" prop and set up the desired props to change how an element appears, for example, in a hover state.
Google Fonts Connection
The library of over 990 font families will help make your site look more beautiful.
Unsplash images
Browse Unsplash's collection of free images and choose directly from the Quarkly interface.
Props panel
This provides categorized functional and stylistic attributes.
Layout
Here you will find the element display properties.
Typography
Here you'll find text style properties that can be applied to your text.
Indents
You can modify the padding and margins using these settings.
Background
Here, you will have access to props for element background setup.
Borders
The properties for borders and border radius can be found here.
Position
This category allows you to position elements and set their z-index values.
Transition
Elements can easily transition from one state to another thanks to this property.
Transform
This property allows you to manipulate the element, such as by 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
With a few clicks, you can quickly import modules from NPM into your component.
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
One of the most well-liked static site generators, Gatsby, is one to which you can export your projects.
Pushing commits to your GitHub repository
You can store your project in a GitHub repository and make changes to it.
Publication on Netlify
When it's ready, publish your website on Netlify. It will automatically create a technical domain.
Modern built-in code editor
You can keep an eye on every entity on the page in the Quarkly editor.
Debugger
Use our debug console to track errors in the component code and pages.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
All edits you apply to the pages are shown in the code and vice versa.
Incredible opportunities for business.
Collaboration
Profit from the Quarkly collaboration tool by inviting your colleagues to work on a project with you.
Semantic tags
Each component can act as a tag. Just select the desired value of the “as” property.
Schema.org
You can give elements the desired attributes through the code editor.
Image ALT
A unique attribute that belongs to the "Image" element.
Favicons
Set up exclusive icons for various devices and individual tile background color for Windows 10.
Open graph and meta tags
Here are some settings that will help your site appear correctly on social networks and in search engines.
User-friendly URL
You may increase the SEO of your site by using clean URLs.
Robots.txt and sitemap.xml
These files are created automatically. But you can edit them the way you like.
Web app builder for frontend coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project