Vanilla State

ES Module Example

Modern browser usage with full reactivity

Tip: Open your browser console (F12) to see the state changes and namespace information.

Counter Demo

Notification Control

Control event dispatch with the { notify: false } option.

1. Primitive State

Silent Update

2. Object State

Silent Update

Custom Events

Emit and receive events independent of state changes.

Waiting for event...

Batch Updates

Demonstrating multiple property updates with a single notification.

Namespace Feature

Isolate state events using namespaces for complex applications.

Explicit: { namespace: 'counter' }
Auto: { debug: true }

Implementation Snippet

// Primitive State
const count = new VnlState(0);
count.set(5); // Basic usage
count.set(10, { notify: false }); // Silent

// Object State
const user = new VnlState({ name: 'John' });
user.set('name', 'Jane'); // Basic usage