DOCSEARCHbyAlgolia
Submit Docs

Knyt Toolkit

website·Indexed 32 days ago

https://knyt.dev

A modular toolkit for modern web development built on web standards. Knyt provides a comprehensive system for creating reactive web components via KnytElement, state management using observables (Beacon, Reference), and a type-safe Fluent Builder API for declarative rendering. The ecosystem includes Knyt Luthier for components, Knyt Weaver for rendering, and Knyt Glazier for server-side capabilities including SSR, SSG, and Server-side Includes (SSI). It features native integrations with Bun, Lit, RxJS, htmx, and MDX.

Tokens
28.9K
Snippets
168
Records
223
Agent score
62%

What's inside Knyt

  1. Overview of Knyt Container Elements

    Container elements in Knyt are specially configured components used for advanced composition patterns. Unlike legacy Redux containers, Knyt containers are DOM elements with transparent rendering behavior. They are primarily used for:

    • Providing shared data or logic to descendant elements (similar to React's Context API).
    • Loading external resources like CSS, fonts, or JS libraries.
    • Creating custom wrapper interfaces.
    • Managing rendering contexts.

  2. Overview of Knyt toolkit

    Knyt (pronounced /naɪt/) is a toolkit designed for modern web development that emphasizes web standards, type safety, and modular architecture. It aims to reduce framework lock-in by leveraging native browser APIs and providing lightweight tooling for building flexible, future-proof applications.

  3. Overview of Knyt Reactive Controllers

    Reactive controllers in Knyt encapsulate reusable logic, state management, and side effects that can be attached to components. They implement the Lit Reactive Controller interface, ensuring compatibility with Lit-based patterns, while providing additional Knyt-specific interfaces for features like state hydration.

  4. Overview of Knyt reactive properties

    Reactive properties in Knyt are declarative data fields that automatically trigger component updates when their values change. They are optional by design to mirror standard HTML element behavior. They support primitive values (strings, numbers, booleans) as well as complex types like Date objects, style sheets, and observables. All property definitions are type-safe and support generics.

  5. Overview of Knyt Server-Side Rendering (SSR) methods

    Knyt provides two distinct approaches for server-side rendering depending on the project requirements:

    1. Markup-only rendering: Used for generating clean HTML or SVG strings in any JavaScript environment (including serverless functions). This is implemented using Knyt Weaver.
    2. Full SSR with hydration: Used for serving fully-built HTML from Web Components, MDX, or HTML with initial state included, allowing the client to hydrate the content. This is implemented using Knyt Glazier (a Bun plugin).

  6. Overview of Knyt Observables

    Knyt Observables enable reactive programming by creating data streams that notify subscribers of changes. They are optimized for UI state management and allow developers to declaratively handle dynamic data flows and side effects.

  7. Overview of Knyt Clerk State Management

    Knyt Clerk is a reactive state management library built on observables. It follows the Flux Standard Action (FSA) pattern, providing a predictable way to manage application state. The system is class-based and supports both inheritance and functional composition. It integrates async workflows via dispatched async functions (thunks) and action streaming through the action$ observable.

  8. Overview of Knyt Web Component Hydration

    Hydration in Knyt is the process of reusing server-rendered HTML on the client side to improve initial page load performance. Knyt components handle hydration automatically at the component level, meaning they detect and apply hydration when rendered on the client without requiring changes to client-side rendering logic.

    Key features include:

    • Seamless SSR Transition: Server-generated HTML is adopted by client-side components.
    • No Full Re-render: Interactive elements attach to the existing DOM structure.
    • Broad Support: Compatible with Constructable Stylesheets, reactive properties, Reference observables, and Declarative Shadow DOM (both open and closed modes).

  9. Integrate Knyt observables with RxJS

    Knyt observables, such as Reference and Beacon, implement the Symbol.observable protocol. This allows them to be used directly with RxJS utilities like from() and to be piped through standard RxJS operators.

  10. Benefits of Concurrent Rendering in Knyt

    Concurrent rendering provides two primary advantages:

    1. Responsiveness: Prevents UI blocking by breaking rendering into smaller chunks. This allows the browser to handle high-priority user inputs and animations between updates, reducing jank.
    2. Ergonomics: Simplifies development by allowing views and components to depend on async operations while maintaining clean encapsulation. In SSR, async logic is contained within the view; in CSR, it provides finer control over rendering timing (interrupts, pause/resume).

  11. Manage reactive properties in KnytElement

    KnytElement manages reactive properties through type-safe getters and setters. For optimal architecture, it is recommended to separate concerns: use observables (Reference and Beacon) to manage reactive data flows, use properties to handle external input, and let the component handle the rendering logic.

  12. Knyt Weaver Declarative Rendering API Overview

    Knyt Weaver provides three primary categories of tools for UI development:

    Declaration Builders:

    • dom(): Builder for DOM element declarations.
    • html(): Builder for HTML element declarations (supports fluent API and tagged templates).
    • svg(): Builder for SVG declarations (supports fluent API and tagged templates).

    Declaration Processors:

    • build(): Constructs actual elements from a declaration.
    • update(): Updates the children of an existing parent element using a declaration.
    • render(): Converts a declaration into an HTML string.