React-flexi-window v2.0 — I added a WASM-powered Liquid Glass engine to my React window component

Raktim — Sat, 11 Apr 2026 00:35:08 +0000

Hellooooooo DEV Community!

About 9 months ago, I shared my first ever npm package here — react-flexi-window, a draggable and resizable window component for React. The response was really encouraging, and I've been working on it ever since.

Today I'm excited to share v2.0 — and it's a big one. I built a custom WebAssembly optics engine in Rust and shipped it as a new feature called the Material System. The first material is Liquid Glass — a refractive lens effect that actually bends background pixels through the window edges using real Snell's Law physics.

What changed from v1?

In v1, react-flexi-window was all about the basics — drag, resize, boundary constraints, and a built-in color system. That hasn't changed, but v2.0 adds an entirely new layer: materials.

Instead of just styling the window with colors and blur, you can now apply physically-based visual effects:

import WindowComponent, { liquidGlass } from 'react-flexi-window';

<WindowComponent
  w={400} h={300} x={100} y={100}
  material={liquidGlass(16, 3, 12)}
  boundary={true}
>
  <div style={{ padding: '20px', color: 'white' }}>
    Content behind glass
  </div>
</WindowComponent>

Three numbers — radius, blur, bezelWidth — and you get a glass window that refracts whatever is behind it. No configuration files, no external assets, no loading spinners.

How the Liquid Glass engine works

I wanted something that goes beyond a CSS backdrop-filter: blur() trick. Blur makes things look frosted, but it doesn't bend pixels — it doesn't create that lens-like distortion you see in real glass. For that, you need per-pixel displacement mapping.

Here's what happens under the hood:

1. Snell's Law in Rust/WASM

I wrote a small Rust module (~6KB compiled) that computes displacement and specular maps using Snell's Law refraction. It runs with no_std and no allocator — zero garbage collection overhead.

The WASM binary is base64-inlined directly into the JS bundle. No network fetch, no external files. It just works.

2. 9-Slice rendering

The computed maps get split into 9-slice parts (corners + edges + center), then assembled into SVG filters. This means the glass effect scales to any window size without re-running the refraction math every time you resize.

3. Single-pass SVG backdrop filter

Everything runs through one SVG backdrop-filter pipeline:

Blur → soft background
Displacement → actual pixel bending at the edges
Specular → depth and light highlights for realism

4. SSR safe

All browser APIs (Canvas, WebAssembly) are called inside useLayoutEffect. If you're using Next.js or any SSR framework, the server render produces clean HTML with zero hydration issues.

Still zero dependencies

One thing I'm proud of is that this is still a zero-dependency package (React is the only peer dependency). The entire thing — including the WASM engine — is ~14KB gzipped. No heavy graphics libraries, no runtime downloads.

Everything from v1 is still here

All the features from the original release are still there:

Drag & Resize — edges and corners
Assistive Resize Handles — large 40×40px corner handles during interaction
Boundary Constraints — lock windows to viewport
Color System — windowColor="blue-500/30" syntax
Responsive — auto-adjusts on viewport changes
Smart Interactions — respects buttons, inputs, links
TypeScript — full type definitions

What's next?

The material system is designed to be extensible. I'm planning these next:

Material	What it does
Frosted Glass	Diffuse scattering with adjustable roughness
Chromatic Aberration	Color-split refraction for prismatic effects
Acrylic	Windows 11 Fluent-style layered translucency

Got an idea for a material? Open an issue!

Try it out

npm install react-flexi-window

Building this WASM engine and getting it to work inline with zero dependencies was one of the most fun engineering challenges I've taken on. If you found this interesting, a ⭐ on GitHub would mean a lot. And if you have questions about the WASM pipeline or the optics math, I'd love to chat in the comments!

Thanks for the support on v1 — here's to v2!

react-flexi-window – Draggable & Resizable Windows for React

Raktim — Fri, 04 Jul 2025 16:29:01 +0000

Hi DEV Community! I’m thrilled to share my first npm package, react-flexi-window, a lightweight React component for creating draggable and resizable windows in your apps. As a new open-source contributor, this is a big milestone for me, and I’d love your feedback!

What is react-flexi-window?

react-flexi-window lets you build dynamic, interactive UI windows that users can drag and resize. It’s designed to be flexible, performant, and easy to integrate, with zero dependencies (except React) and full TypeScript support.

Key Features

🖱️ Draggable & Resizable: Move windows by dragging and resize them via edges or corners.
🎯 Assistive Resize Handles: Large, visible corner handles appear during interaction for better usability (great for touch devices).
🔒 Viewport Constraints: Optionally keep windows within the browser viewport.
🎨 Customizable Styling: Built-in color system (e.g., blue-500/30), border radius, shadows, and backdrop blur.
📱 Responsive: Automatically adjusts to viewport changes.
💨 Lightweight: Only 90.5 kB with no extra dependencies.
⚡ Performance Optimized: Efficient event handling and minimal DOM updates.
🔧 Smart Interactions: Ignores clicks on buttons, inputs, and other interactive elements.

Get Started

Install it:

npm install react-flexi-window

Basic example:

import WindowComponent from 'react-flexi-window';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
      <WindowComponent
        w={400}
        h={300}
        x={100}
        y={100}
        windowColor="blue-500/20"
        windowBorderRadius="lg"
        boundary={true}
      >
        <div style={{ padding: '20px' }}>
          <h2>My Window</h2>
          <p>Drag and resize me!</p>
        </div>
      </WindowComponent>
    </div>
  );
}

Check out the full docs and demo:

Why I Built It

I wanted a simple, flexible way to create draggable windows in React without heavy dependencies. Inspired by libraries like react-window (but for UI windows, not virtualization), I aimed for a component that’s easy to style and use, with features like TypeScript support and touch-friendly handles.

What’s Next?

I’m working on improving the demo site and adding more examples. If you try react-flexi-window, I’d love to hear your thoughts! Suggestions, bug reports, or contributions are welcome on GitHub.Thanks for checking it out!

DEV Community: Raktim