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:
Example
List with all supported annotations:
AnnotationDescriptionUsage
@titleReceives text that will be used as the title of the label for that input in the form.@title Number of products
@descriptionReceives text that will be used as the description in the label for that input in the form.@description Total number of products to display in the storefront
@formatConfigures a field to be formatted differently. This can cause its Widget to change.@format [Format value](#possible-values-for-format)
@hideHides this property in the Admin form. The value still remains in the JSON of the Section.@hide true
@ignoreThe value and the property are completely ignored.@ignore
@maximumConfigures a maximum value for that field. Works on properties of type number. (value <= X)@maximum 10
@minimumConfigures a minimum value for that field. Works on properties of type number. (value >= X)@minimum 15
@exclusiveMaximumConfigures a maximum value for that field. Works on properties of type number. It is the exclusive counterpart of @maximum. (value < X)@exclusiveMaximum 10
@exclusiveMinimumConfigures a minimum value for that field. Works on properties of type number. It is the exclusive counterpart of @minimum. (value > X)@exclusiveMinimum 15
@maxLengthConfigures a maximum length for the text of a field. Works on properties of type string.@maxLength 30
@minLengthConfigures a minimum length for the text of a field. Works on properties of type string.@minLength 8
@readOnlyMakes a field uneditable in the admin form but still readable.@readOnly
@uniqueItemsEnsures that fields of type array cannot have duplicate values.@uniqueItems true
@maxItemsEnsures that fields of type array cannot have more than X values.@maxItems 3
@minItemsEnsures that fields of type array cannot have fewer than X values.@minItems 2
@defaultConfigures a default value for that field.@default Testing
@deprecatedMarks a field as deprecated.@deprecated We will remove this field in the next update
@optionsRequired for the operation of the dynamic options, button group and icon select widgets.@options deco-sites/mystore/loaders/products.ts
@languageRequired for the Widget @format code, used to define the language on editor.@language javascript
@aiContextUsed to define the context of the field, improving suggestions by Artificial Intelligence..@aiContext Suggest a catchy title for a shelf, related to the world of Fashion

​
Possible Values for @format

  • @format color: Renders a color input instead of a text input.
@format color example
  • @format date: Renders a date input instead of a text input.
@format date example
  • @format html: Renders an input that opens a WYSIWYG editor for advanced HTML text editing.
@format html example

​
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:
mustache example