panes-ui

Tiny, dependency-free movable & resizable in-app modal panes for the web — written in TypeScript, unified mouse/touch/pen input via Pointer Events.

Live demo & docs → · ♥ Sponsor

• ~3.5 KB min+gzip, zero dependencies
• Works with mouse, touch, and pen via Pointer Events
• Ships ESM + CJS + IIFE with .d.ts types
• Framework-agnostic — drop-in for plain HTML, React, Vue, Svelte, Solid, Angular
• Accessible: role="dialog" + aria-labelledby wiring, keyboard close
• requestAnimationFrame-coalesced drag/resize, pointer capture, and proper teardown

---

Table of contents

• Prerequisites
• Install
• Quickstart
• CDN (no build step)
• Framework examples
• DOM contract
• API
• Recipes
• Behavior notes
• Styling
• Accessibility
• Browser support
• Building from source
• Security
• Changelog
• Sponsor
• License

---

The package is named panes-ui on npm (the bare name panes was taken). The JavaScript global exposed by the CDN/IIFE build is still Panes.

Prerequisites

panes-ui is a browser-only library.

Requirement	Minimum
Runtime	Any modern browser with Pointer Events (Chrome 55+, Firefox 59+, Safari 13+, Edge 79+)
Node (build)	Node 16+ (only needed if you consume via a bundler)
TypeScript	4.5+ (optional; JS works fine)

There is no SSR runtime — construct panes from browser code (useEffect, onMount, etc. in frameworks).

---

Install

npm install panes-ui
# or
pnpm add panes-ui
# or
yarn add panes-ui

This installs both the JavaScript and the types. Also import the stylesheet once:

import "panes-ui/style.css";

If your bundler doesn't handle CSS imports, copy node_modules/panes-ui/dist/pane.css into your static assets and link it with a <link rel="stylesheet">.

---

Quickstart

1. Add markup

<div id="my-pane" style="width:360px;height:240px">
  <div class="pane-title">Hello</div>
  <button class="pane-close" aria-label="Close">&times;</button>
  <div class="pane-content">
    Drag my titlebar. Resize from any edge or corner. Touch works too.
  </div>
</div>

2. Import and open

import { Pane } from "panes-ui";
import "panes-ui/style.css";

const pane = new Pane("#my-pane", { title: "Hello" });
pane.open();

Or use the one-line shortcut:

import { open } from "panes-ui";
open("#my-pane", { title: "Hello" }); // lazy-creates + opens

---

CDN (no build step)

<link rel="stylesheet" href="https://unpkg.com/panes-ui@1/dist/pane.css" />
<script src="https://unpkg.com/panes-ui@1"></script>
<script>
  Panes.open("#my-pane", { title: "Hello" });
</script>

The IIFE build exposes everything on the Panes global (Panes.Pane, Panes.open, Panes.manager, …). For production, pin an exact version (e.g. [email protected]) and consider adding an integrity attribute. jsDelivr works too: https://cdn.jsdelivr.net/npm/panes-ui@1.

---

Framework examples

React

import { useEffect, useRef } from "react";
import { Pane } from "panes-ui";
import "panes-ui/style.css";

export function MyModal({ open }: { open: boolean }) {
  const ref = useRef<HTMLDivElement>(null);
  const paneRef = useRef<Pane | null>(null);

  useEffect(() => {
    if (!ref.current) return;
    paneRef.current = new Pane(ref.current, { title: "Report" });
    return () => paneRef.current?.destroy();
  }, []);

  useEffect(() => {
    if (!paneRef.current) return;
    open ? paneRef.current.open() : paneRef.current.close();
  }, [open]);

  return (
    <div ref={ref} style={{ width: 420, height: 300 }}>
      <div className="pane-title" />
      <button className="pane-close" aria-label="Close">×</button>
      <div className="pane-content">…</div>
    </div>
  );
}

Vue 3

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from "vue";
import { Pane } from "panes-ui";
import "panes-ui/style.css";

const root = ref<HTMLDivElement>();
let pane: Pane | null = null;

onMounted(() => { if (root.value) pane = new Pane(root.value, { title: "Report" }).open(); });
onBeforeUnmount(() => pane?.destroy());
</script>

<template>
  <div ref="root" style="width:420px;height:300px">
    <div class="pane-title" />
    <button class="pane-close" aria-label="Close">×</button>
    <div class="pane-content"><slot /></div>
  </div>
</template>

This is the beginning of the README. Read the rest at the original. Read the full README ↗