liquiddom
Getting Started

Getting Started

Three steps to your first physical button: install, create an instance, mark an element with data-liquid.

1. Install

Choose just the core, or also install the React / Vue adapter if your app uses one. The adapters share a single WASM instance via peer-deps. 

# Core only
npm install liquiddom

# With React adapter
npm install liquiddom @liquiddom/react

# With Vue adapter
npm install liquiddom @liquiddom/vue

2. Create an instance

Vanilla TypeScript is the canonical surface — the framework adapters wrap this same API. 

import { LiquidDOM } from "liquiddom";

const liquid = await LiquidDOM.create({
  capacity: 64,         // max simultaneously observed elements
  autoObserve: true,    // picks up every [data-liquid] on the page
  // renderer defaults to 'auto' — WebGPU with Canvas2D fallback
});

3. Mark elements with data-liquid

Any HTML element. The DOM stays accessible — only the visual painting is augmented by the physics overlay. 

<button data-liquid>I am physically squishy</button>
<a href="#" data-liquid>So am I</a>
<div data-liquid class="card">Even non-interactive elements</div>

That's it. The button reacts to pointer, scroll, focus, and viewport changes. The underlying <button> remains a plain accessible DOM node.

Next: Core Concepts

Understand the Rule of Two, the flat-buffer FFI contract, and the liquid_type dispatch — the architectural choices that keep liquiddom small, fast, and accessible.

Read Core Concepts →