A reactive template is a method that allows you to render DOM elements using Observables combined with JSX syntax. A typescript implementation is available in Github.

• Type Safe. Using typescript TSX feature, DOM attributes are checked at compile time.
• Observable Based. The template allows you to compose bindings between element events and functions, using rxjs compatible observables and operators.

To enable TSX support, first we must tell Typescript to use our custom jsx function in the project's tsconfig.json file.

The render function is a helper method that will render the nodes in the default container, in this case document.body.

The following code shows the same "Hello World" message as above, but using observables. The be function returns a BehaviorSubject.

A template is a function returns a DOM element.

To set an attribute whenever an observable fires,

It is possible to listen to attribute changes.