Liquid DOM: SwiftUI-Style Layout Meets WebGPU Glass Rendering

If you've ever wished you could bring the fluidity of SwiftUI's declarative layout system to the web, or wanted to render glassmorphic UIs without killing performance, Liquid DOM might be exactly what you didn't know you needed.

It's a lightweight framework that combines a reactive, SwiftUI-like layout model with GPU-accelerated rendering via WebGPU. The result? Smooth, glass-like UI components that feel native and cost almost nothing in CPU overhead.

What It Does

Liquid DOM is a JavaScript library that lets you build user interfaces using a declarative, state-driven syntax reminiscent of SwiftUI. You describe what the UI should look like based on current state, and the library handles the diffing, layout, and painting for you.

But here's where it gets interesting. Instead of using the DOM or Canvas for rendering, it leverages WebGPU to render glass-like surfaces (blur, transparency, reflections) directly on the GPU. This means you get real-time glassmorphism effects that don't stutter or tank your frame rate.

The layout engine itself is also GPU-aware, allowing for smooth animations, adaptive resizing, and compositional layouts that feel more like a native app than a web page.

Why It's Cool

1. SwiftUI syntax, but for the web.
If you've written SwiftUI, you'll feel right at home. You define views as functions of state, compose them with HStack/VStack/ZStack equivalents, and let the framework handle the rest. No manual DOM manipulation, no virtual DOM diffing overhead.

2. Real glass rendering without the performance tax.
Standard CSS backdrop-filter: blur() can be a performance nightmare, especially on complex layouts or scrolling. Liquid DOM pushes all blur, transparency, and reflection calculations to the GPU via WebGPU. That means buttery smooth 60fps glass UIs, even on lower-end devices that support WebGPU.

3. Declarative animations built in.
Because the layout and rendering are unified, animations are natural. Change a state variable, and the UI smoothly transitions. No need for separate animation libraries or manual keyframes.

4. Tiny bundle size.
The core is surprisingly lean. No heavyweight frameworks, no React or Vue overhead. Just the layout engine and WebGPU renderer.

How to Try It

The GitHub repo has a quick start guide, but here's the gist:

1. Clone the repo:

   git clone https://github.com/AndrewPrifer/liquid-dom.git
   cd liquid-dom
   

2. Install dependencies (if any) and run the dev server:

   npm install
   npm run dev
   

3. Open the demo in a browser that supports WebGPU (Chrome Canary, Edge Dev, or Firefox Nightly with flags enabled).

You can also check the README for a live demo link and examples that show off glass panels, responsive layouts, and animated state transitions.

Final Thoughts

Liquid DOM isn't trying to replace React or Vue for building complex web apps. It's a specialized tool for when you want smooth, glass-like UIs with minimal boilerplate and maximum performance. If you're prototyping design systems, building dashboards with heavy visual flair, or just experimenting with WebGPU, this is a fun and surprisingly capable library.

It's early days, but the core idea — declarative layout + GPU rendering — feels like a natural direction for the web. Give it a spin, and let me know what you build.

Found this interesting? Follow @githubprojects for more developer tools and open source projects.