HyperStandard

Fast. Interactive. Web Interface.

---

import { $, h as html, on } from "hstd"


const Component = () => {

    const count = $(0);

    return html`
        <h1>Count is ${count}</h1>
        <button ${{ [on.click]: () => count.$++ }}>
            Add more!
        </button>
    `;
}


document.body.append(...Component());

hstd = HyperStandard is a minimal JavaScript library to build fast, interactive, extensible web interface. Visit live demo.

---

• Install

  • NPM
  • HTTP
  • ImportMap

• Examples

  • Class-model
  • Interactive Binding
  • Post-processing
  • Works with Async Iterator

• Packages

  • hstd
  • @hstd/wc

• License

---

Install

NPM

npm i hstd

HTTP

import { $, h as html } from "https://hstd.io";

ImportMap

{
    "imports": {
        "hstd": "https://hstd.io"
    }
}

Examples

Class-model

import { $, h as html, on, css } from "hstd"

const buttonClass = $((alertText) => ({
    [css]: {
        color: "white",
        backgroundColor: "blue",
    },
    [on.click]: () => alert(alertText)
}))

const Main = () => {

    const count = $(0);

    return html`
        <button ${{ [on.click]: () => count.$++, [buttonClass]: "hi" }}>
            I'm styled ${count}!
        </button>
    `
}

Interactive binding

import { $, h as html, io } from "hstd"

const Linked = () => {

    const valueHolder = $(0)

    return html`
        <h1>these are linked!</h1>
        <input ${{ [io.value]: valueHolder, type: "range" }}>
        <input ${{ [io.value]: valueHolder, type: "range" }}>
        <label>value is ${valueHolder}</label>
    `
}

Post-processing

const Canvas = () => {

    const colorSwitch = $(true);

    return html`
        <canvas ${{ id: "color", [on.click]: () => colorSwitch.switch() }}></canvas>

    `.on(({ color }) => {

        const ctx = color.getContext("2d");
        colorSwitch.into($ => $ ? "red" : "blue").watch($ => {
            ctx.fillStyle = $;
            ctx.fillRect(0, 0, 100, 100);
        });
    })
}

Works with Async Iterator

import { $, h as html, io, Task } from "hstd";


const Iterated = async function*() {

    const
        user = $(''),
        next = Task()
    ;

    yield html`
        <label>Show user <input ${{ [io.value]: user }}/></label>
        <button ${{ [on.click]: () => next(true) }}>submit</button>
    `;

    await next();

    yield html`
        <label>Loading...</label>
    `;
    
    const { name, age, link } = await fetch(`/api/user/${user.$}`).then(res => res.json());

    yield html`
        <div>
            <label>${name}</label>
            <label>${age}</label>
            <label>${link}</label>
        </div>
    `;

}

Packages

hstd

HyperStandard's fundamental core library.

@hstd/wc

HyperStandard-to-WebComponents adapter.

@hstd/ts

TypeScript language service plugin that adds IntelliSense for HyperStandard templates.

License

hstd is MIT licensed.