Skip to main content Accessibility Feedback
API Reference


The signal() method creates a reactive data object.


The signal() method accepts any value as an argument.

If no value is provided, it uses an empty object by default. If a primitive (like a string or number) is used, it returns an object with the value property.

let {signal} = reef;

// Create a signal object
let data = signal({
	greeting: 'Hello',
	name: 'World'

// returns {value: 42}
let num = signal(42);

A signal emits a reef:signal event on the document whenever one of its properties is modified.

The event.detail property contains the prop and value that were updated, and the action done to the data (either set or delete).

// Listen for data changes
document.addEventListener('reef:signal', function (event) {
	console.log('The data was updated!');
	let {prop, value, action} = event.detail;

// Update the data
data.greeting = 'Hi there';

Try signals on CodePen →


You can customize the event name by passing a second argument into the signal() method. It gets added to the end of the reef:signal event with a dash delimiter (-).

This provides useful way to differentiate updates to one signal from another.

let wizards = signal([], 'wizards');

// A "reef:signal-wizards" event gets emitted

Try signal namespaces on CodePen →