Web app builder for web engineers.
Meet Quarkly.
Use pre-made React components or build your own. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS. Get all the power of graphic design tools and website builders
Create Project
Full creative control of your design.
Primitives
The most primitive building blocks similar to HTML tags. For example, Text, Image, and Box.
Themes
It's simple to give your website a unified look with themes.
Extended Styling
By including unique layouts, animations, effects, and transformations, you can increase the usefulness of your websites.
Adaptive design
Fine-tune your adaptive design
Components
On the page or on the Layer panel, choose an element (or a group of elements) and convert them into a component. Add component copies to the page. All the props will be inherited.
Ready-made Content
Add premade blocks, including videos, pop-ups, maps, 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
In the project theme, you can modify already-existing breakpoints or add new ones.
Drag'n'Drop
You can align or stack elements however you want and drop them on any area of the page, or nest them in other elements.
Multiselect
You can select multiple elements and set their styles, drag to another place, remove, and more.
Text editor
Style text as desired, make it bold or italic, turn it into a link or convert it to span, the choice is yours.
Deep select
Double clicking allows you to move up and down the element hierarchy, while holding Ctrl/Cmd lets you access deeper levels.
Support of Flexbox and Grid
At Quarkly, we use the most advanced frontend coding techniques.
Configuring styles of pseudo-classes hover/active/focus, etc.
To change the appearance of an element, for example, the way it behaves on hover, just enable "hover" and set up the desired props.
Google Fonts Connection
Give your website a more vibrant look by using fonts from a library that contains over 990 font families.
Unsplash images
Unsplash is a popular free image stock. You can search and select images directly from the Quarkly interface.
Props panel
Enjoy a friendly interface with categorized styles and useful properties.
Layout
Check out this section to use element display properties.
Typography
You can change text styles by using special properties in this section.
Indents
Here you can configure margins and paddings.
Background
Here you'll find some props to help you set up element backgrounds.
Borders
This section allows you to adjust borders and border radius.
Position
This category helps you configure the position and z-index settings of elements.
Transition
An element can transition from one state to another without interruption thanks to this property.
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
You can build and add custom React components to your Quarkly pages using the code editor.
React.js
The pages are written in JSX code typical for React.js.
Hot import from NPM
Modules from NPM can be imported into your component.
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
You can export your projects to Gatsby, a popular static site generator (SSG).
Pushing commits to your GitHub repository
You can create a GitHub repository for your project and commit changes.
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
You can monitor all the entities on the page in the Quarkly editor.
Debugger
When there are errors in the component code or pages, they can be seen in the debug console.
Tooltips in the code
The editor is here to help with property spelling — just start typing.
Synched pages and code editor
Whatever changes you make to the pages, they all will be displayed in the code and vice versa.
Remarkable opportunities for business.
Collaboration
Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them.
Semantic tags
All components can be used as a tag. Just select the tag's “as” property value.
Schema.org
You can give any element the required characteristics in the code editor.
Image ALT
This is an individual property that belongs to the “Image” element.
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
These options are designed to ensure that your website appears properly in search engine results and on social media.
User-friendly URL
Clean URLs will help you improve your site's SEO.
Robots.txt and sitemap.xml
These files are automatically created. But you can edit them if necessary.
Web app builder for web engineers.
Try it for free.
We provide Quarkly for free as long as we can, and then the lowest price among competitors.
Create project