Skip to main content Accessibility Feedback
API Reference


The component() method creates a reactive component.


Pass in the element (or selector string for the element) to render into, and a template function that returns an HTML string to render.

The component() method will render it into the UI, and automatically update the UI whenever a reef:signal event is emitted.

let {signal, component} = reef;

// Create a signal
let todos = signal(['Swim', 'Climb', 'Jump', 'Play']);

// Create a template
function template () {
	return `
			${ (todo) {
				return `<li>${todo}</li>`;

// Create a reactive component
// It automatically renders into the UI
component('#app', template);

// Automatically render a new list item in the UI
todos.push('Take a nap... zzzz');

Try creating a component on CodePen →


The component() method also accepts an object of options as a third argument.

  • events - an object of allowed event callback functions.
  • signals - an array of signal namespaces to use for signal events.
// Allow registered on* events
component('#app', template, {events: {reverseWizards}});

// Use a custom event name
let wizards = signal([], 'wizards');
component('#app', template, {signals: ['wizards']});

// Use a custom name AND allow register on* events
component('#app', template, {
	signals: ['wizards'], 
	events: {reverseWizards}

Try component options on CodePen →


If you assign your component to a variable, you can stop reactive rendering with the component.stop() method, and start it again with the component.start() method.

The component.render() method manually renders a component in the UI.

// Create a component
let app = component('#app', template);

// Stop reactive rendering

// Restart reactive rendering

// Manually render a component

Try component methods on CodePen →