knurl

A declarative, event-driven graphical interface for monitoring and modifying JavaScript variables.

Examples • API • Controls

import knurl from "knurl";

// Create a panel
const panel = knurl.create([
    { id: "speed", type: "range", min: 0, max: 10, value: 5 },
    { id: "color", type: "color", value: "#ff0055" },
    { id: "debug", type: "toggle", value: false },
]);

// Listen to changes
panel.subscribe((id, value) => {
    console.log(`${id} changed to:`, value);
});

// Update values
panel.set({ speed: 7 });

// Get current values
const { speed, color, debug } = panel.get();

Installation

npm install knurl

Why knurl?

knurl is built on three principles:

• Predictable state flow — Changes emit events. You handle them.
• Serializable configuration — Define UI as JSON. Save, version, generate.
• Simple, extensible API — A 7-method API. Add custom controls and styles.

API

• knurl.create(config[, options])
• knurl.register(type, component[, options])
• panel.get()
• panel.set(values[, options])
• panel.update(updates[, options])
• panel.subscribe(id, handler)
• panel.subscribe(handler)
• panel.destroy()

See the full API documentation.

Controls

• Input Controls – range, number, text, color, toggle, pad2
• Selection Controls – select, buttons
• Action Controls – button
• Display Controls – display, graph
• Layout Controls – group

See the full controls reference.

Theming

knurl uses CSS custom properties for easy theming. Apply themes with the classNames option:

const panel = knurl.create(controls, {
    classNames: ["dark-theme", "compact"],
});

See the theming reference for available CSS variables and examples.

Building

npm install        # Install dependencies
npm run build      # Build the library
npm run build:all  # Build library and examples

License

MIT