Decorators are a future EcmaScript feature that is already available in TypeScript.

Decorators are technically functions that modify an existing class or it’s members. They are called by prefixing them with @:

import {myDecorators, anotherDecorators} from 'example';

class Foo {
  @anotherDecorator public bar: string;


Tabris-specific decorators are provided in the optional 'tabris-decorators' extension, which is a separate module from 'tabris'.

:point_right: This extension is TypeScript-only. It will not work in JavaScript/JSX files.

It includes the following decorators:


When generating a Tabris.js TypeScript project using the Tabris CLI init command an example app may be chosen that already has 'tabris-decorators' installed. The steps below are for manual installation only.

Install the tabris-decorators module itself:

npm install tabris-decorators.

Check your tsconfig.json to ensure the compiler options experimentalDecorators, emitDecoratorMetadata, jsx and jsxFactory options are set as below:

  "compilerOptions": {
    "module": "commonjs",
    /* your other options... */
    "jsx": "react",
    "jsxFactory": "JSX.createElement",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
  "include": [

After this you’re good to go.