Skip to main content

A library for create and manipulate html element with modern javascript syntax

Works with
This package works with Bun
This package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Browsers
JSR Score
94%
Published
3 months ago (0.2.4)

Mutable Element

A library for create and manipulate html element with modern javascript syntax

Example

The following example shows how to display a counter that starts at zero and increments by 1 every second:

import { mount, html, text, clock } from "mutable-element"; // or @codehz/mutable-element if use jsr
mount(
  document.body,
  html`div`(
    text("counter: "),
    text("0", async function* () {
      // just use any local state
      let value = 0;
      // use a async generator
      for await (const _ of clock(1000)) {
        // yield new value
        yield ++value;
        // remove itself if not connected to dom
        if (!this.isConnected) break;
      }
    })
  )
);

The following example shows how to respond to a button event and change the text:

import { mount, html, text, on, stream } from "mutable-element"; // or @codehz/mutable-element if use jsr
const stream = new Reactor();
mount(
  document.body,
  html`div`(
    html`button`(
      "click me!",
      on("click", () => void stream.push())
    ),
    text("click count: "),
    text("0", async function* () {
      let value = 0;
      for await (const _ of stream) {
        yield ++value;
        if (!this.isConnected) break;
      }
    })
  )
);
Built and signed on
GitHub Actions
View transparency log

Add Package

deno add @codehz/mutable-element

Import symbol

import * as mod from "@codehz/mutable-element";

Add Package

npx jsr add @codehz/mutable-element

Import symbol

import * as mod from "@codehz/mutable-element";

Add Package

yarn dlx jsr add @codehz/mutable-element

Import symbol

import * as mod from "@codehz/mutable-element";

Add Package

pnpm dlx jsr add @codehz/mutable-element

Import symbol

import * as mod from "@codehz/mutable-element";

Add Package

bunx jsr add @codehz/mutable-element

Import symbol

import * as mod from "@codehz/mutable-element";