🎻 Create observable-powered Web Components with Shadow DOM and SSR support. Designed for extensibility without framework lock-in.

This package is part of Knyt, a toolkit designed to simplify modern web development.

Key Features

• Type-Safe Custom Elements: Strongly-typed element/property definition with full TypeScript support
• Reactive Properties: Observable properties with attribute sync and change events
• Lifecycle Management: Hooks, effects, and SSR-ready state hydration
• StyleSheet Integration: Works with Knyt Tailor for dynamic CSS and adoptedStyleSheets
• Web Standards Compliant: Built on Custom Elements, Shadow DOM, and declarative patterns
• Component Hydration: Enables seamless server-side rendering and client-side hydration for interactive components
• Developer-Friendly: Clean shorthand syntax and debug-friendly errors

Documentation

Documentation is available at knyt.dev, including an introduction to Web Components with Knyt. Documentation also includes guides for:

• Reactive properties
• Reactivity
• Controllers
• Styling
• Lifecycle
• Hydration
• Containers
• Options

Usage

To create a simple counter custom element, you could use the following code:

Using the function API:

import { define, dom } from "knyt";

const Counter = define.element("my-counter", {
  lifecycle: (host) => {
    const count$ = host.hold(0);

    return () =>
      dom.button
        .type("button")
        .onclick(() => count$.value++)
        .$children(`Count: ${count$.value}`);
  },
});

const counterElement = document.createElement("my-counter");

Using the class API:

import { define, dom, KnytElement } from "knyt";

const Counter = define.element(
  "my-counter",
  class extends KnytElement {
    #count$ = this.hold(0);

    render() {
      return dom.button
        .type("button")
        .onclick(() => this.#count$.value++)
        .$children(`Count: ${this.#count$.value}`);
    }
  },
);

const counterElement = document.createElement("my-counter");

Install

You can use this package by installing either the Knyt Toolkit or this standalone package.

Knyt Toolkit:

npm install knyt

Standalone:

npm install @knyt/luthier

Updates

See the CHANGELOG for a list of changes.

License

This package is licensed under the BSD 3-Clause License.

Open-Source Initiative

This project is supported by Sables Applications LLC as part of its open-source initiatives.