🧵 Declarative DOM renderer with 1:1 native DOM API alignment, concurrent rendering, and complete type safety.

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

Key Features

• Fluent & Declarative APIs: Use intuitive html, dom, and svg builders to declare elements and markup
• Type-safe by design: Comprehensive TypeScript support ensures strict types and intelligent autocompletion
• Concurrent rendering: Renders asynchronously for smoother interactions and declarative async operations
• Native alignment: 1:1 mapping to DOM properties—no abstractions, just browser standards
• Explicit contracts: Props, children, and refs are strictly separated (no runtime ambiguity)
• SSR-ready: Render declarations, elements, and components to static markup
  • Pair with Knyt Luthier for rendering closed declarative shadow roots
• Stateless: The DOM is the source of truth; no virtual DOM
• Lightweight: Minimal dependencies, minimal footprint
• htmx-compatible: First-class support for htmx attributes

Documentation

Documentation is available at knyt.dev, including a guide on declarative rendering.

Usage

The primary exports of this package are Declaration Builders and Declaration Processors. Declaration Builders are used to define the structure of the UI, while Declaration Processors handle the creation and manipulation of the actual DOM or markup. Together, these tools enable you to efficiently describe and render user interfaces.

• Declaration Builders: html, dom, and svg for creating declarations
• Declaration Processors: build, update, and render for DOM manipulation and rendering

In the example below, the dom builder is used to create an element declaration for a heading, and the update processor is used to update the root element to display the heading.

import { dom, update } from "@knyt/weaver";

const heading = dom.h1.$("Hello, world!");
const root = document.getElementById("app")!;

update(root, heading);

For cases that require more functionality, such as encapsulated behavior or custom lifecycle management, you can define custom web components using Knyt Luthier.

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/weaver

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.