Front-end macros API

Last modified by Manuel Leduc on 2026/07/20 10:49

Content

Reference

Defining a macro

A macro is described by the Macro type, which is the union of BlockMacro and InlineMacro.
Every macro provides:

  • infos - the macro metadata (see MacroInfos).
  • renderAs - "block" or "inline".
  • render(params, rawBody) - a function returning the rendering AST.
import type {
  BlockMacro,
  MacroBlock,
  MacroParameterType,
} from "@xwiki/platform-macros-api";

// Parameter definitions.
const params = {
  message: { type: "string" },
} satisfies Record<string, MacroParameterType>;

// A block macro rendering its "message" parameter as a paragraph.
class InfoMacro implements BlockMacro<typeof params> {
  readonly infos = {
    id: "info",
    name: "Information",
    description: "Displays a message.",
    params,
    paramsDescription: { message: "The message to display." },
    defaultParameters: { message: "" },
    bodyType: "none",
  } as const;

  readonly renderAs = "block" as const;

  render(params: { message: string }): MacroBlock[] {
    return [
      {
        type: "paragraph",
        styles: {},
        content: [{ type: "text", content: params.message, styles: {} }],
      },
    ];
  }
}

Macros are made available to the front-end by registering them with the Macros Service. See Service API.

MacroInfos

Metadata describing a macro.

FieldTypeDescription
idstringThe macro identifier. Only lowercase letters, uppercase letters, digits, and underscores are allowed.
namestringHuman-readable name, shown in menus.
descriptionstringDescription of the macro.
paramsRecord<string, MacroParameterType>The macro's parameter definitions.
paramsDescriptionrecord of stringA human-readable description for each parameter.
defaultParametersconcrete parameters or falseDefault parameter values used when inserting the macro. false hides the macro. When bodyType is "raw", a dialog box is shown to insert the macro.
bodyType"none", "wysiwyg" or "raw"Whether the macro has a body and how it is edited: "none" (no body), "wysiwyg" (WYSIWYG-editable body), "raw" (editable but not WYSIWYG).

BlockMacro

A macro that renders as a block.

MemberTypeDescription
infosMacroInfosThe macro metadata.
renderAs"block"Indicates that the macro renders as a block.
render(params, rawBody)MacroBlock[]Renders the macro. params are the (concrete) parameter values; optional fields may be absent or undefined. rawBody is the raw body string when bodyType is "raw", otherwise null.

InlineMacro

A macro that renders as inline content.

MemberTypeDescription
infosMacroInfosThe macro metadata.
renderAs"inline"Indicates that the macro renders as inline content.
render(params, rawBody)MacroInlineContent[]Renders the macro (see render in BlockMacro for the parameters).

Macro types

TypeDescription
Macro<Parameters>A macro: either a BlockMacro or an InlineMacro.
MacroWithUnknownParamsTypeA Macro whose parameter shape is unknown. Used by generic code such as the Macros Service.
MacroClassWithUnknownParamsTypeConstructor type for an instantiable macro with an unknown parameter shape.

Macro parameters

MacroParameterType

The definition of a single macro parameter.

type MacroParameterType = (
  | { type: "boolean" }
  | { type: "float" }
  | { type: "string" }
) & { optional?: true };

The concrete TypeScript type of a parameter is derived from this definition: "boolean" maps to boolean, "float" to number ("float" is used instead of "number" to be more explicit for developers) and "string" to string. Setting optional to true makes the parameter optional.

Parameter type helpers

Advanced type-level helpers, mostly used internally to derive concrete parameter types.

TypeDescription
UnknownMacroParamsTypeGeneric record of a macro's runtime parameter values (Record<string, boolean | number | string>).
GetConcreteMacroParameterType<T>Derives the concrete TypeScript type of a single parameter from its MacroParameterType definition.
GetConcreteMacroParametersType<T>Derives the concrete parameters record type from a parameters definition; optional parameters become optional properties.
FilterUndefined<T>Removes the properties that may be assigned undefined from a record.
UndefinableToOptional<T>Makes the properties that may be assigned undefined optional in a record.

Rendering AST

The render function returns an array of AST nodes: block macros return MacroBlock[] and inline macros return MacroInlineContent[].

MacroBlock

A block-level AST node, discriminated by its type.

typeDescriptionKey fields
"paragraph"A paragraph of inline contentcontent, styles
"heading"A headinglevel (1 to 6), content, styles
"list"A bullet or numbered listitems, optional numbered, styles
"quote"A block quotecontent (nested blocks), styles
"code"A code blockcontent (string), optional language
"table"A tablecolumns, rows, styles
"image"An image (see MacroImage)target, optional alt, widthPx, heightPx
"macroBlock"A nested block macro referencename, params
"rawHtml"A raw HTML blockhtml
"macroBlockEditableArea"Editable-area placeholder for a block macro bodystyles

MacroInlineContent

An inline AST node, discriminated by its type.

typeDescriptionKey fields
"text"Styled text (see MacroText)content, styles
"link"A link (see MacroLink)target, content
"rawHtml"Raw inline HTMLhtml
"inlineMacro"A nested inline macro referencename, params
"inlineMacroEditableArea"Editable-area placeholder for an inline macro body(none)

Supporting AST types

TypeDescription
MacroTextA text node: content (string) and styles (MacroTextStyles).
MacroTextStylesOptional text styling: bold, italic, strikethrough, underline, code, textColor, backgroundColor.
MacroBlockStylesOptional block styling: cssClasses, textColor, backgroundColor, textAlignment (MacroAlignment).
MacroAlignmentOne of "left", "center", "right", "justify".
MacroListItemA list item: content, styles, optional checked.
MacroImageAn filename target (MacroLinkTarget), optional alt, widthPx, heightPx.
MacroLinkA link: target (MacroLinkTarget) and content (inline content, excluding nested links).
MacroLinkTargetEither { type: "internal", rawReference } or { type: "external", url }.
MacroTableColumnA table column: optional headerCell (content + styles) and widthPx.
MacroTableCellA table cell: content, styles, optional rowSpan, colSpan.

Functions

eraseParamsTypeForMacroClass(macro)

Casts a typed macro class to a MacroClassWithUnknownParamsType, dropping its parameter shape. This is useful when macros with different parameter shapes need to be handled together, for example
when registering them. 

function eraseParamsTypeForMacroClass<
  Params extends Record<string, MacroParameterType>,
>(
  macro: new (...args: any[]) => Macro<Params>,
): MacroClassWithUnknownParamsType;
ParameterTypeDescription
macromacro classThe macro class to cast.

Returns the same macro class, retyped without its parameter shape.

Get Connected