{"_id":"@_superlogical/wterm-dom","name":"@_superlogical/wterm-dom","dist-tags":{"latest":"0.3.1"},"versions":{"0.3.1":{"name":"@_superlogical/wterm-dom","version":"0.3.1","description":"DOM renderer, input handler, and orchestrator for wterm (temporary fork of @wterm/dom pending upstream release of host-controlled focus options)","type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./css":{"style":"./src/terminal.css","import":"./src/terminal.css","default":"./src/terminal.css"},"./src/terminal.css":{"style":"./src/terminal.css","import":"./src/terminal.css","default":"./src/terminal.css"}},"scripts":{"build":"tsc","prepublishOnly":"pnpm build","test":"vitest run","type-check":"tsc --noEmit"},"dependencies":{"@wterm/core":"^0.3.0"},"devDependencies":{"@internal/ts":"workspace:*","jsdom":"^29.0.2","typescript":"^6.0.2"},"keywords":["terminal","emulator","wasm","zig","dom","xterm"],"license":"Apache-2.0","homepage":"https://wterm.dev","repository":{"type":"git","url":"git+https://github.com/superlogical/wterm.git","directory":"packages/@wterm/dom"},"publishConfig":{"access":"public"},"_id":"@_superlogical/wterm-dom@0.3.1","gitHead":"d2bd490342ed52a2de95b1eb95358575ff4a5774","bugs":{"url":"https://github.com/superlogical/wterm/issues"},"_nodeVersion":"22.22.3","_npmVersion":"10.9.8","dist":{"integrity":"sha512-oDGcEqqn6RGJvojlDDf0Dm+ER5di6ooI3SwQgweFRtiMEd3kCN7m7/L+5MB67WbNRGM8gip8yZP2p4s04QGd+g==","shasum":"92145771bcccc9694c78b882131d8cd26790cfc4","tarball":"https://registry.npmjs.org/@_superlogical/wterm-dom/-/wterm-dom-0.3.1.tgz","fileCount":23,"unpackedSize":101784,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCA5YE9DQZPeL1lger6cv4UmagM7K80ywYCW89qtspvlQIhALzBAZrQQztyjwhIJQDNoH5LqApDAYnXyrB5J9HCLiLK"}]},"_npmUser":{"name":"almonk","email":"alasdair.monk@gmail.com"},"directories":{},"maintainers":[{"name":"almonk","email":"alasdair.monk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/wterm-dom_0.3.1_1783428265350_0.5214908379334082"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-07T12:44:25.114Z","0.3.1":"2026-07-07T12:44:25.489Z","modified":"2026-07-07T12:44:25.679Z"},"maintainers":[{"name":"almonk","email":"alasdair.monk@gmail.com"}],"description":"DOM renderer, input handler, and orchestrator for wterm (temporary fork of @wterm/dom pending upstream release of host-controlled focus options)","homepage":"https://wterm.dev","keywords":["terminal","emulator","wasm","zig","dom","xterm"],"repository":{"type":"git","url":"git+https://github.com/superlogical/wterm.git","directory":"packages/@wterm/dom"},"bugs":{"url":"https://github.com/superlogical/wterm/issues"},"license":"Apache-2.0","readme":"# @wterm/dom\n\nDOM renderer, input handler, and orchestrator for [wterm](https://github.com/vercel-labs/wterm) — a terminal emulator for the web. No framework required.\n\nRe-exports everything from `@wterm/core`, so this is the only package you need for vanilla JS usage.\n\n## Install\n\n```bash\nnpm install @wterm/dom\n```\n\n## Usage\n\n```html\n<div id=\"terminal\"></div>\n\n<script type=\"module\">\n  import { WTerm } from \"@wterm/dom\";\n  import \"@wterm/dom/css\";\n\n  const term = new WTerm(document.getElementById(\"terminal\"));\n  await term.init();\n</script>\n```\n\nThe WASM binary is embedded in the package — no extra setup required. To serve it separately instead, pass `wasmUrl`.\n\n## API\n\n### `WTerm`\n\nThe main terminal class.\n\n```ts\nnew WTerm(element: HTMLElement, options?: WTermOptions)\n```\n\n**Options:**\n\n| Option         | Type                                   | Default | Description                                                                                                                                                           |\n| -------------- | -------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `cols`         | `number`                               | `80`    | Initial column count                                                                                                                                                  |\n| `rows`         | `number`                               | `24`    | Initial row count                                                                                                                                                     |\n| `wasmUrl`      | `string`                               | —       | Optional URL to serve the WASM binary separately (embedded by default)                                                                                                |\n| `autoResize`   | `boolean`                              | `true`  | Auto-resize based on container dimensions                                                                                                                             |\n| `autoFocus`    | `boolean`                              | `true`  | Focus the hidden textarea after initialization                                                                                                                        |\n| `focusOnClick` | `boolean`                              | `true`  | Focus the hidden textarea when the terminal is clicked                                                                                                                |\n| `cursorBlink`  | `boolean`                              | `false` | Enable cursor blinking animation                                                                                                                                      |\n| `debug`        | `boolean`                              | `false` | Enable debug mode. Exposes a `DebugAdapter` on the instance (`wt.debug`) for inspecting escape sequences, cell data, render performance, and unhandled CSI sequences. |\n| `onData`       | `(data: string) => void`               | —       | Called when the terminal produces data (user input or host response). When omitted, input is echoed back automatically.                                               |\n| `onTitle`      | `(title: string) => void`              | —       | Called when the terminal title changes                                                                                                                                |\n| `onResize`     | `(cols: number, rows: number) => void` | —       | Called on resize                                                                                                                                                      |\n\n**Methods:**\n\n| Method                              | Description                                         |\n| ----------------------------------- | --------------------------------------------------- |\n| `init(): Promise<WTerm>`            | Load WASM and start rendering                       |\n| `write(data: string \\| Uint8Array)` | Write data to the terminal                          |\n| `resize(cols, rows)`                | Resize the terminal grid                            |\n| `focus()`                           | Focus the terminal element                          |\n| `scrollToBottom()`                  | Scroll the DOM viewport to the bottom of scrollback |\n| `destroy()`                         | Clean up event listeners and DOM                    |\n\n### `WebSocketTransport`\n\nConnect to a PTY backend over WebSocket (re-exported from `@wterm/core`).\n\n```ts\nimport { WTerm, WebSocketTransport } from \"@wterm/dom\";\n\nconst term = new WTerm(el, { cols: 80, rows: 24 });\nawait term.init();\n\nconst ws = new WebSocketTransport({\n  url: \"ws://localhost:8080/pty\",\n  onData: (data) => term.write(data),\n});\n\nws.connect();\nterm.onData = (data) => ws.send(data);\n```\n\n## Themes\n\nImport the stylesheet and apply a theme class to the terminal element:\n\n```js\nimport \"@wterm/dom/css\";\n```\n\nBuilt-in themes: `theme-solarized-dark`, `theme-monokai`, `theme-light`. Apply via class name:\n\n```js\nelement.classList.add(\"theme-monokai\");\n```\n\nAll colors use CSS custom properties (`--term-fg`, `--term-bg`, `--term-color-0` through `--term-color-15`, etc.) so you can define your own theme with plain CSS.\n\n## License\n\nApache-2.0\n","readmeFilename":"README.md","_rev":"1-79e8629199c2a260d72a279566a449f2"}