Requirements

• Modern browser with Custom Elements v1
• ES Module bundler (Vite, Webpack, etc.)
• TypeScript types included

No Framework Required

Works with vanilla JS, React, Vue, Svelte, Angular, or any framework that supports custom elements.

Attributes (kebab-case)

• id-member — Property for unique IDs
• path-member — Property for hierarchical paths
• display-value-member — Property to display as label

Properties (camelCase)

Complex values like data, sortCallback, and arrays are set via JavaScript properties, not HTML attributes.

Path Structure

Paths define hierarchy: "1" (root), "1.1" (child), "1.1.1" (grandchild). This LTree-inspired structure is efficient and flexible.

Common Options

• expand-level — Auto-expand depth (default: 2)
• should-toggle-on-node-click — Click to expand/collapse
• sortCallback — Custom sorting function (JS property)

Attributes vs Properties

Simple values (strings, numbers, booleans) can be set as HTML attributes in kebab-case. Complex values (arrays, objects, callbacks) must be set as JavaScript properties in camelCase.