@slyte/component

@slyte/component is the web component layer of the Slyte Framework. It provides a component registry, template compilation, two-way data binding, and a directive system for building and rendering reactive UI components.

Getting Started

Define a component:

import { Component } from "@slyte/component";
import { prop } from "@slyte/core";

class UserCard extends Component {
    data() {
        return {
            name: prop("string", { default: "" }),
            active: prop("boolean", { default: true })
        };
    }
    static actions() {
        return {
            toggleActive(compRef) {
                compRef.data.active = !compRef.data.active;
            }
        };
    }
}

Register your components under a ComponentRegistry:

import { ComponentRegistry } from "@slyte/component";

class AppComponentRegistry extends ComponentRegistry {
    data() {
        return {};
    }
}

Render a component into the DOM:

<user-card> </user-card>

Key capabilities:

• Component registry — register, instantiate, and manage the lifecycle of components, including multiple namespaced registries.
• Template compilation — HTML templates compiled client-side (Nimble/NimblePlus, importable from @slyte/component/nimble / @slyte/component/nimble-plus) or via the CLI, with helpers such as lyte-if, lyte-for, and lyte-switch.
• Two-way data binding — reactive prop()-based state with lbind, deep object/array tracking, and observers that react to property changes.
• Directives — extend DOM behavior with built-ins like lyte-save, lyte-hide, lyte-view, or author custom directives.
• Lifecycle hooks — init, didConnect, and didDestroy for controlling component setup and teardown.

Documentation

Full documentation is available at https://slyte.dev.

License

Copyright 2026 Zoho Corporation Private Limited. This software is licensed under the Apache License 2.0. You may use, reproduce, and distribute it in accordance with the terms of that license. See LICENSE.md, included in this package, for the complete terms.