Liquid DOM!

Liquid DOM: A Deep Dive into the Glass-Rendering Layer for the Web

[Hero Image]

• 

Image Gallery

• 
• 
• 
• 
• 

Introduction: Liquid DOM at a Glance Liquid DOM is a modern monorepo crafted to converge WebGPU-powered liquid-glass rendering with a spectrum of integration layers that include React bindings, Three.js adapters, and a layout engine that stands independently of any particular renderer. The project is designed to be used at multiple levels of abstraction: you can reach for the lowest-level primitives to gain direct control over the scene graph and the WebGPU-backed renderer, or you can opt for higher-level React-based APIs to describe glass UI declaratively. This dual approach makes Liquid DOM versatile: it can be embedded as a thin post-processing layer in an existing Three.js scene, or it can power a standalone, declarative UI layer across complex 3D canvases.

A Closely Coordinated Stack Liquid DOM isn’t just a single library. It’s a carefully organized set of packages that target different integration scenarios while sharing core ideas and primitives. Here’s a concise map of what lies inside the project and how each piece contributes to the whole.

The Core Building Blocks: Core and Layout

• @liquid-dom/core
• What it provides: an imperative, DOM-backed scene graph, a WebGPU renderer, and reusable glass core and layout classes.
• When to use it: you want granular control over the scene graph, or you’re building an adapter for another renderer. If you’re wiring up a new rendering backend, this is the place to start.
• @liquid-dom/layout
• What it provides: a renderer-agnostic layout engine, designed for SwiftUI-like measurement and placement in a renderer-agnostic fashion.
• When to use it: you need cross-renderer layout semantics without tying yourself to a specific rendering surface. It acts as a portable backbone for layout decisions.

React Bindings and Declarative UI

• @liquid-dom/react
• What it provides: React 19 bindings for the layout and glass APIs.
• When to use it: you want to describe glass UI in React and let LiquidCanvas own the canvas, or you need a headless scene for another renderer while keeping a familiar React-style API.
• @liquid-dom/r3f
• What it provides: a bridge that combines React Three Fiber with the Liquid DOM stack, built on top of the Three integration.
• When to use it: you are already using React Three Fiber with Three’s WebGPU renderer and want a seamless declarative UI layer over the scene.
• @liquid-dom/three
• What it provides: an adapter for compositing liquid glass over Three’s WebGPU renderer.
• When to use it: you already render a Three WebGPU scene and want liquid glass as a post-composited layer, or you’re interested in adding glass UI overlays to an existing Three-based pipeline.

Where to Turn for Workflow and Experience

• The integrated experience across these packages enables both imperative and declarative workflows. For low-level control and performance-sensitive applications, you can operate through @liquid-dom/core with the layout engine. For rapid UI development and familiar patterns in React, the @liquid-dom/react pathway provides a smooth, declarative interface. If your project already relies on Three.js, @liquid-dom/three and @liquid-dom/r3f offer a path to overlay liquid glass content without abandoning the work you’ve already done in Three.js.

A Quick Note on Relationships

• @liquid-dom/layout is independent: it can be used as a standalone layout engine without pulling in a renderer.
• @liquid-dom/core uses the layout module for its layout subpath but also exposes a lower-level imperative scene graph and a WebGPU renderer.
• @liquid-dom/react wraps core layout classes in React components, enabling a more ergonomic and declarative approach to building scenes.
• @liquid-dom/three hosts the reusable WebGPU core inside a Three WebGPU renderer, enabling a practical bridge between Liquid DOM and the Three.js ecosystem.
• @liquid-dom/r3f merges React, Three, and the Liquid DOM stack to deliver a cohesive React Three Fiber experience atop the liquid-glass foundation.

Installation: Getting Started in Your Project Choosing the right installation path depends on your target integration. The repository provides package-specific READMEs with precise install commands and peer dependencies. Here is a distilled guide to help you get started quickly.

• Core and Layout (low-level control)

• Install core: pnpm add @liquid-dom/core

• Install layout: pnpm add @liquid-dom/layout

• If you plan to use the layout features alone without a renderer, you can start with just these two.

• React Bindings for Declarative Glass UI

• Install core plus React bindings: pnpm add @liquid-dom/core pnpm add @liquid-dom/react react react-dom

• This combination enables you to describe glass UI in React while LiquidCanvas owns the canvas or you can run a headless scene on another renderer.

• Three.js Pipeline

• Install Three integration: pnpm add @liquid-dom/three @liquid-dom/core three

• This setup is ideal when you already render a Three WebGPU scene and want to overlay liquid glass as a post-processing or composited layer.

• React Three Fiber Bridge

• Install React Three Fiber bridge: pnpm add @liquid-dom/r3f @liquid-dom/react @react-three/fiber react react-dom three

• If your workflow uses React Three Fiber alongside Three’s WebGPU renderer, this combination yields a cohesive pipeline with a declarative UI layer.

• Alternative: All-in-One React Experience

• If you want a broader React-oriented story that combines layout, React bindings, and Three, you can mix and match the packages above to suit your project structure.

Repository Development: Building and Testing In addition to installation, the Liquid DOM repository provides commands for building and testing packages in isolation and as part of the whole workspace. A typical workflow might look like this:

• Install dependencies for the workspace: pnpm install
• Build the whole workspace: pnpm -r build
• Run tests for the layout package: pnpm --filter @liquid-dom/layout test
• Run tests for the core package: pnpm --filter @liquid-dom/core test
• Run tests for the React bindings: pnpm --filter @liquid-dom/react test

The emphasis is on modular development: you can iterate on one component, verify its API surface, and then ensure compatibility with the rest of the monorepo through targeted tests.

Browser and Runtime Requirements: What You Need to Run Liquid DOM Liquid DOM is built around WebGPU as the rendering backend, which places certain prerequisites on the runtime environment. A quick survey of requirements helps you decide how to architect your deployment.

• WebGPU as the Rendering Engine

• The liquid-glass renderer requires WebGPU, which is supported by modern browsers with experimental or behind-flag features.

• DOM-backed HTML in Canvas Content

• For DOM-backed HTML-in-Canvas content, you’ll need the experimental HTML-in-Canvas API. Currently, this is available behind Chrome’s Canvas Draw Element flag: chrome://flags/#canvas-draw-element

• Liquid DOM uses a combination of canvas painting and live DOM content to copy DOM content into GPU textures. This enables an interactive layer that blends HTML or React-driven UI with GPU-accelerated rendering.

• Browser Compatibility Notes

• The DOM and React packages can build scene graphs in many browser-like environments, but the actual rendering requires navigator.gpu in a browser that supports WebGPU.

• The Three.js integration uses Three’s WebGPU renderer, not the WebGLRenderer, which keeps the rendering path aligned with modern GPU capabilities.

• Reference and Context

• The design borrows ideas and terminology from the WICG HTML-in-Canvas proposal, which outlines how HTML and canvas content can be composited in GPU-powered textures.

A Practical Vision: Where Liquid DOM Shines

• Declarative UI on top of GPU rendering: If you’re building complex 3D dashboards, product configurators, or immersive data visualizations, Liquid DOM provides a way to compose glass-like UI overlays that stay in sync with 3D scenes.
• WebGPU-first rendering: By embracing WebGPU as the core renderer, Liquid DOM aims to deliver higher performance and richer visual effects than traditional WebGL-based approaches.
• Flexible integration: Whether you’re starting a new project from scratch or layering liquid glass onto an existing Three.js scene, the package stack is designed to adapt to your workflow.

A Gallery Walk: Visuals as a Narrative The image gallery in the project’s documentation serves as a visual narrative of what Liquid DOM can achieve. The first image presents the hero concept of liquid glass—smooth, translucent surfaces that can bend, reflect, and refract within a 3D canvas. The subsequent images offer snapshots of the glass UI in action, demonstrating how interfaces can ride atop 3D scenes, respond to interactions, and maintain a sense of depth and translucency. These visuals help convey a core idea: Glass UI doesn’t have to be flat or detached from the scene. It can be a living, immersive layer that participates in the same lighting, shading, and spatial logic as the rest of the scene.

What to Consider When Choosing a Package

• If your project is entirely React-based and you want a declarative UI layer over the Liquid DOM rendering surface, start with @liquid-dom/react and consider pairing it with @liquid-dom/core or @liquid-dom/layout for layout capabilities.
• If you already have a Three.js pipeline and you want to overlay or post-compose liquid glass content, @liquid-dom/three is the natural entry point. You can then bring in @liquid-dom/core for more detailed control or @liquid-dom/r3f if you’re using React Three Fiber.
• If you’re building a new renderer-agnostic application and want to experiment with a SwiftUI-like approach to measurement and layout, @liquid-dom/layout is a strong foundation, optionally combined with @liquid-dom/core or the React bindings as your needs evolve.

Contributing and Participating in the Liquid DOM Ecosystem

• The monorepo design invites contributors to work in isolation on individual packages while keeping a coherent cross-package API. If you’re planning to contribute:
• Start by inspecting the package READMEs for build and test commands
• Run tests selectively with the provided pnpm filters
• Align your changes with the layout-first, renderer-agnostic philosophy when possible
• Collaboration opportunities span core rendering, layout semantics, React bindings, and Three.js integrations, encouraging a broad set of skill sets—from low-level WebGPU optimization to high-level UI ergonomics.

Roadmap Perspectives: Where It Could Go

• Enhanced browser support: As WebGPU becomes more ubiquitous, Liquid DOM can broaden its compatibility surface and provide smoother integration in more environments.
• Expanded React ecosystem: Deeper bindings with React 19 could unlock more efficient reconciliation patterns in glass UI, enabling even richer interactions and performance.
• More renderer adapters: While Three.js and a layout-first path exist, there could be future adapters for other renderers or engines, enabling Liquid DOM to slot into even more toolchains.
• Tooling and examples: A growing set of examples and starter projects could accelerate onboarding, especially for teams migrating from WebGL or traditional DOM overlays to a GPU-accelerated glass UI.

Closing Thoughts: Why Liquid DOM Matters Liquid DOM represents a thoughtful marriage of GPU-accelerated rendering with modern UI paradigms. By offering a spectrum of packages that cover low-level rendering, declarative UI, and renderer-agnostic layout, it provides a flexible toolkit for building immersive, glass-like interfaces on the web. The emphasis on WebGPU and the careful separation between core, layout, and various integration layers means developers can pick the right abstraction for their problem, scale gradually, and experiment without being forced into a single, monolithic approach.

If you’re curious to explore how glass UI can transform your web experiences, consider examining the hero visuals and the gallery in the official assets, then dive into the package documentation to see which integration path aligns with your project goals. As the WebGPU ecosystem matures, Liquid DOM is positioned to become a practical, powerful backbone for next-generation web interfaces that blend translucency, depth, and interactivity in compelling ways.

Images embedded from the Input

• Hero and gallery visuals provide a concrete sense of the Liquid DOM aesthetic and capabilities, illustrating the glass-like UI layered over GPU-driven scenes. These visuals anchor the narrative and give readers a tangible sense of what the Liquid DOM stack can deliver in real-world projects.