← Return to the playground

Plain HTML integration

A toolkit by Unfinished Works. Report an issue.

This host page uses its own light theme and system font. Only the two containers below opt into Phosphor.

Notebook / Sample session

Panel example

Keep your application's layout, data, and event handlers. Add the scoped core and optionally opt into native component styles.

Native dialog

The browser handles focus and the Escape key. Keep the dialog inside the scope; it opens in the browser's top layer.

CSS only

No JavaScript is needed for glow, glass, or raster. This second scope stays static.

CSS-only presentation

This container uses the static CSS treatment. Select the text or return to the playground.

Local integration

<link rel="stylesheet" href="./src/core.css">
<link rel="stylesheet" href="./src/components.css">
<section id="my-interface">Your existing HTML</section>

Import mountPhosphor from the local src/index.js module. An optional ambient instance attaches to the same container. Call display.destroy() when removing it.

Experimental API. No published package. Toolkit code: GPL-3.0-only, without warranty. Third-party notices · Download source. The community palette adaptations retain their upstream MIT notices.