Customize the behavior of the Deco Admin form with annotations on its properties.

When using native types (number, string, etc.), the editor will use the property name as the default form label. However, it’s possible to customize this by using JSDoc tags.

• Example:

export interface Props {
  /** @title Number of products */
  /** @description Total number of products to display in the storefront */
  count: number;
}

• Editor:

List with all supported annotations:

​

Possible Values for @format

• @format color: Renders a color input instead of a text input.

• @format date: Renders a date input instead of a text input.

• @format html: Renders an input that opens a WYSIWYG editor for advanced HTML text editing.

• @format dynamic-options: Read about it here.

​

Templates in Annotations with Mustache

Our annotations also support templating through Mustache.

To use them, it’s quite simple:

/**
 * @title {{{name}}}
 */
interface Person {
  name: string;
}

export interface Props {
  people: Person[];
}

Deco Admin result: