A declarative, type-safe DOM renderer with concurrent rendering and a native DOM API alignment.
npm install @knyt/weaver
š§µ 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.
!Built with TypeScript
!Built for The Web
!Runs Everywhere
- 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 is available at knyt.dev, including a guide on declarative rendering.
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.
``ts
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.
You can use this package by installing either the Knyt Toolkit or this standalone package.
_Knyt Toolkit:_
`sh`
npm install knyt
_Standalone:_
`sh``
npm install @knyt/weaver
See the CHANGELOG for a list of changes.
This package is licensed under the BSD 3-Clause License.
This project is supported by Sables Applications LLC as part of its open-source initiatives.