Web Adapter

The web adapter renders Hypen components to native DOM elements in browsers.

Installation

npm install @hypen-space/core @hypen-space/web

Basic Usage

import { render } from "@hypen-space/web";

await render("MyComponent", "#app");

Renderers

DOM Renderer

The default renderer creates native DOM elements:

import { DOMRenderer } from "@hypen-space/web";

const renderer = new DOMRenderer(document.getElementById("app"));

Canvas Renderer

For canvas-based rendering:

import { CanvasRenderer } from "@hypen-space/web";

const renderer = new CanvasRenderer(canvas);

Remote Apps

Connect to a remote Hypen server:

import { RemoteEngine } from "@hypen-space/core";
import { DOMRenderer } from "@hypen-space/web";

const renderer = new DOMRenderer(container);
const engine = new RemoteEngine("ws://localhost:3000");

engine.onPatches((patches) => {
  renderer.applyPatches(patches);
});

await engine.connect();

Requirements

Modern browser with WASM support
Chrome, Firefox, Safari, Edge (recent versions)

Web Adapter

On this page