Website builder for React coders.
Meet Quarkly.
Use pre-made React components or build your own. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Choose from one of many pre-made blocks
Create Project
Full control over the design.
Primitives
These are the fundamental elements, which are similar to HTML tags: Text, Image, Box, and others.
Themes
Using themes will help your website's design remain consistent.
Extended Styling
Add some flash to your web pages with stylish animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
You can create reusable components from any selection of elements on the page or in a layer. When you add the component to a page, it inherit all of its original properties.
Ready-made Content
To improve your website, use the pre-made blocks, which include videos, pop-ups, maps, and more.
Customizing design with breakpoints
Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints.
Adding and editing breakpoints
Add your own breakpoints or modify existing ones in the project theme.
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 drag and drop multiple elements to a different location, remove them, or change their styles while they are selected.
Text editor
You can bold or italicize part of the text; turn it into a link or a span; or apply any other style to it.
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
At Quarkly, we keep up with the up-to-date frontend coding approaches.
Configuring styles of pseudo-classes hover/active/focus, etc.
To alter how an element appears, for instance in a hover state, activate the "hover" prop and arrange 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
Take advantage of the categorized style and functional props.
Layout
Check out this section to use element display properties.
Typography
Browse text style properties in this section
Indents
These settings allow you to change margins and paddings.
Background
Props for setting up element backgrounds can be found in this section.
Borders
Here you can set up borders and border radius.
Position
You can change the element position and z-index settings in this category.
Transition
By using this property, you can make the transition between states of an element smooth.
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
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
Importing modules from NPM to your component is a breeze.
SEO
Optimize your site to promote it on search engines.
Export CRA
You can finish or host your project on your server with ease by exporting it into an archive with 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
You can establish a GitHub repository for your project and submit updates there if necessary.
Publication on Netlify
Once it is complete, publish your website on Netlify. It will automatically generate a technical domain.
Modern built-in code editor
You can monitor all the entities on the page in the Quarkly editor.
Debugger
You can keep track of component code and page errors with 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
Any adjustments you make to the pages will also be reflected in the code, and vice versa.
Wonderful opportunities for business.
Collaboration
Quickly invite teammates to work on your projects in Quarkly.
Semantic tags
Every component can act as a tag. Just choose the “as” property value that you need.
Schema.org
In the code editor, you can give items the desired attributes.
Image ALT
This is an individual property that belongs to the “Image” element.
Favicons
Set up custom icons for all devices and individual tile background color for Windows 10.
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
This feature allows you to set friendly URLs for your pages.
Robots.txt and sitemap.xml
These files are automatically produced. But you are free to change them as you choose.
Website builder for React coders.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project