🌃 Simplify Your Stack. Front to Back. A toolkit designed to simplify modern web development

This package contains all client-side features of Knyt. For server-side functionality, refer to the Knyt Glazier plugin for Bun.

Documentation

Documentation is available at knyt.dev.

Key benefits

• Declarative, type-safe UI building with intuitive APIs for HTML, DOM, and SVG
• Reactive programming essentials for efficient, memory-safe state and effect management
• Lightweight, observable state management with batteries-included utilities
• Web standards compliance via native Custom Elements and Shadow DOM support
• Constructable, type-safe style sheets with seamless SSR and shadow DOM integration
• Lit-compatible controller system for advanced component logic and lifecycle management
• Server-side rendering and hydration for modern, performant web apps
• Easy project scaffolding with a CLI tool for rapid setup

Try Knyt in JSFiddle

You can quickly try Knyt in JSFiddle, which provides an editor to quickly experiment with Knyt's client-side features. This is a great way to quickly test out Knyt's capabilities without needing to set up a full project.

The Full-Stack Toolkit Built on Web Standards

Leverage the native Web Component model for a future-proof foundation, without framework lock-in.

🎻 Native Web Components, Standardized

• Type-Safe Custom Elements: Strongly-typed element/property definition with full TypeScript support
• Web Standards Compliant: Built on Custom Elements, Shadow DOM, and declarative patterns
• Component Hydration: Enables smooth server-side rendering and client-side hydration for interactive components
• and more...

🧊 Server-Rendered. Static-Generated. Fully Hydrated.

• Your rendering, your rules – Mix SSG, SSR, and hydration with ease
• Smart HTML includes: Embed HTML, MDX, Web Components, and Views into your pages
• Dependency management: Automatic dependency resolution, bundling, injection, and hydration
• and more...

🧵 Where Declarative UI Meets Native DOM

• 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
• and more...

🖌️ Powerful Reactivity Without the Leaks

• Reactive Primitives: Observables, computed values, and effects for building reactive applications
• Memory-safe observation - Prevents leaks by ensuring unused subscriptions are garbage collected
• RxJS interoperability – Smoothly integrates with RxJS and similar observable libraries
• and more...

👔 Type-Safe Styles, Built on Web Standards

• adoptedStyleSheets Support: Effortless integration with Constructable Stylesheets for SSR and shadow DOM
• Type-Safe CSS-in-JS Utilities: Strong TypeScript support for CSS objects, selectors, and rule names.
• and more...

🔌 Reusable Logic for Web Components

• Lit-Compatible Controllers: ReactiveController system with lifecycle integration
• Reactive State: Hydratable state with computed/mapped values & effects
• and more...

🗃️ Lightweight, observable state management

• Observability: Stores are both observables and observers, supporting reactive state management for full state, selections, and dispatched actions.
• Batteries-included: Provides built-in utilities for reducers, action creators, selectors, and debug logging.
• and more...

🐣 Get Started in Seconds, Not Minutes

• Scaffold Knyt projects: Quickly set up new Knyt projects with a single command
• Get Started Now: Run npm create knyt in your terminal and start building immediately.

Usage

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

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}`);
  },
});

export default Counter;

You can then add the element to the document:

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

Alternatively, you can use Knyt Glazier to render and include your custom element in an HTML page. For example, create an HTML file like this:

<!doctype html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <knyt-include src="./Counter.ts"></knyt-include>
  </body>
</html>

By leveraging Bun's static site generation, you can use the <knyt-include> tag to embed your custom element in the page. This tag is part of Knyt's composition system, enabling automatic inclusion and hydration of web components.

Install

npm install knyt

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.