xote

!NPM Version
!npm bundle size
!npm bundle size

Xote is a lightweight UI library for ReScript that combines fine-grained reactivity with a minimal component system. Built on rescript-signals, it provides declarative components, JSX support, and signal-based routing for building reactive web applications.

Features

- Reactive Components: Declarative UI building with JSX support and direct DOM updates
- Signal-based Reactivity: Powered by rescript-signals for automatic dependency tracking
- Fine-grained Updates: Direct DOM manipulation without virtual DOM diffing
- Signal-based Router: SPA navigation with pattern matching and dynamic parameters
- Lightweight: Minimal runtime footprint
- Type-safe: Full ReScript type safety throughout

Getting Started

$3

``bash
npm install xote


or

yarn add xote

or

pnpm add xote
`

Then, add it to your ReScript project’s dependencies in rescript.json:

`json
{
"bs-dependencies": ["xote"]
}
`

Why Xote?

Xote uses rescript-signals for reactive primitives (Signal, Computed, Effect), and it adds:

- Component System: A minimal but powerful component model with JSX support for declarative UI
- Direct DOM Updates: Fine-grained reactivity that updates DOM elements directly, no virtual DOM
- Signal-based Router: Client-side routing with pattern matching and reactive location state
- Reactive Attributes: Support for static, signal-based, and computed attributes on elements
- Automatic Cleanup: Effect disposal and memory management built into the component lifecycle

Xote focuses on clarity, control, and performance. The goal is to offer precise, fine-grained updates and predictable behavior with minimal abstractions, while leveraging the robust type system from ReScript.

$3

#### Using JSX

`rescript
open Xote

module App = {
let make = () => {
// Create reactive state
let count = Signal.make(0)

// Event handler
let increment = (_evt: Dom.event) => Signal.update(count, n => n + 1)

// Build the UI with JSX


}
}

// Mount to the DOM
Component.mountById(, "app")
`

Core Concepts

$3

- Signal: Reactive state container - Signal.make(value)
- Computed: Derived reactive value that updates automatically - Computed.make(() => ...)
- Effect: Side-effect functions that re-run when dependencies change - Effect.run(() => ...)

All reactive primitives feature automatic dependency tracking - no manual subscriptions needed.

$3

- Component: Declarative UI builder with JSX syntax and function-based APIs
- Router: Signal-based navigation for SPAs with pattern matching and dynamic routes

$3

- JSX syntax: Use HTML tags like