Web page maker for ui designers.
Meet Quarkly.
All-in-one website builder on React — Quarkly. Get all the power of graphic design tools and website builders. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS
Create Project
Absolute creative control of your design.
Primitives
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Themes
Build a consistent design using themes
Extended Styling
Make your websites more useful by adding original layouts, animations, effects, and transformations.
Adaptive design
Fine-tune your adaptive design
Components
Components are reusable design elements. To create a component, select an element or group of elements on the page or in the Layers panel and group them into component. Add copies of the component to the page, and they will inherit all their properties from the original.
Ready-made Content
Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site.
Customizing design with breakpoints
Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints.
Adding and editing breakpoints
In the project theme, you can modify already-existing breakpoints or add new ones.
Drag'n'Drop
You decide where to place the elements. Move them wherever you want, or nest them in other elements.
Multiselect
This option allows you to select multiple elements and change their styles, place them on the page, etc.
Text editor
You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element.
Deep select
To move through the elemental hierarchy, double-click. Hold down the Ctrl key on Windows or the Cmd key on Mac OS to enter the hierarchy.
Support of Flexbox and Grid
Quarkly supports the most advanced approaches to frontend coding.
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
Add a personal touch to your website with the use of 990+ font families available in the library.
Unsplash images
Use Unsplash, a top-rated free image stock, to search for images and select them directly from Quarkly.
Props panel
Experience the ease of using categorized style and functional properties.
Layout
This section allows you to configure the display properties of elements.
Typography
To change text styles, use special properties in this section
Indents
Here you can configure margins and paddings, which control the space around elements.
Background
Use the props in this section to customize element backgrounds.
Borders
This section allows you to configure borders and border radius.
Position
This category allows you to adjust element position and z-index settings.
Transition
The smooth movement from one state to another for an element is enabled by this property.
Transform
This property lets you transform the element, for example, zoom or rotate.
Development capabilities.
Supercharged.
Create custom React components using the code editor
You can make your own React components in the Quarkly code editor 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 from NPM quickly, if you need to.
SEO
Optimize your site to promote it on search engines.
Export CRA
To wrap up your project or host it on your server, simply export it into an archive using a create-react-app project.
Code Editor
Fine-tune elements in the code editor.
Export to Gatsby Project
One of the best open-source SSGs, Gatsby, may be used to export your projects in no time.
Pushing commits to your GitHub repository
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
You can keep an eye on every entity on the page in the Quarkly editor.
Debugger
You can track issues in the component code and pages with the aid of our debug console.
Tooltips in the code
If you're not sure how to spell a property, type the first few letters and the editor will complete it for you.
Synched pages and code editor
Every change you make to a page is reflected 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
Any element can serve as a tag. Simply select the "as" property value you require.
Schema.org
You can edit the necessary attributes of elements in the code editor.
Image ALT
A separate property belonging to the “Image” element.
Favicons
You can install distinctive icons for every device and a custom tile backdrop color for Windows with this functionality.
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 automatically produced. But if necessary, you can alter them.
Web page maker for ui designers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project