Skip to content
compodocx
Skip to article content

Guide 06

JSDoc Tags

cngxjs (opens in new tab) Updated Guide 06 of 13

34 recognized tags grouped by where they apply. Unknown tags are not an error: theming token blocks fold them into the description, and member descriptions pass them through verbatim.

  • Members 6 tags

    Recognized on properties, methods, host listeners, accessors.

    @param
    Paired with TypeScript type info. Descriptions thread onto constructor args.
    @returns
    Return-value description.
    @example
    Fenced code block, Shiki-highlighted.
    @see
    Appended as a See-also link block.
    @since
    Small version label next to the member name.
    @deprecated
    Strikethrough name plus a deprecation banner. Takes an optional reason string.
  • Symbols 6 tags

    Class, interface, enum, type alias, function, variable.

    @example
    Rendered as an Examples block on the Info tab. Multiple allowed.
    @see
    See-also section with link resolution.
    @since / @deprecated
    Same semantics as on members.
    @internal
    Hides the symbol when --disableInternal is set.
    @category
    Groups the entity under this category when --groupBy category.
    @docsKind primary
    Promotes a reference-kind symbol (function, interface, type alias, variable, enum) into the curated Features chapter under menuLayout: 'feature'. Use for bootstrap helpers, factory functions, public config interfaces, or any reference symbol that deserves the curated treatment instead of landing only in the exhaustive References chapter. Values other than primary fall back silently. No effect under menuLayout: 'type'.
  • Component-only 3 tags

    Recognized only when the symbol is decorated as @Component.

    @slot
    Documents an exposed content slot. Renders as a metadata card on the Info tab.
    @playground
    Author-curated runnable demo. Surfaces a Playground tab with one StackBlitz launcher per block.
    <example-url>
    JSDoc marker pointing at a hosted demo URL. Surfaces an Example tab with an iframe per URL.
  • Status badges 3 tags

    Stamp the entity hero with status pills. Visible at the top of the rendered page.

    @beta
    Adds a "Beta" badge.
    @breaking <version>
    Adds a "Breaking" badge that pins the version.
    @since <version>
    Adds a version badge to the entity hero.
  • Accessibility 2 tags

    Surface conformance metadata. The hero chip is the single user-visible signal; the free-form note travels with the entity for the LLM-md export and future reverse-lookups.

    @wcag A | AA | AAA
    Renders a coloured chip in the entity hero (neutral A, green AA, blue AAA). Case-insensitive. Invalid values log a build warning and skip the chip. Also emits a Pagefind facet so the command palette can narrow to "WCAG AA and up".
    @a11y <text>
    Free-form markdown accessibility note. Parsed and attached to the entity (IDep.a11yNote), exported through the llm-md bundle. Not rendered as a page section by design - the WCAG chip stays the only on-page conformance signal.
  • Provenance 2 tags

    Mark entities or markdown files as AI-assisted so readers can reason about source quality.

    @aiGenerated [label]
    Per-entity JSDoc tag. Stamps an "AI generated" pill in the entity hero with a localized tooltip. The optional trailing text (e.g. model name, date) is preserved verbatim.
    <!-- @aiGenerated [label] -->
    HTML-comment marker for markdown files. Place at the top of a README, additional page, or overview source to flag the whole page. Detected via regex on the raw markdown - no JSDoc parser required.
  • Theming tokens 6 tags

    Parsed from JSDoc on CSS / SCSS files alongside @Component sources.

    @overview
    Description block at the top of the Theming tab.
    @type
    Token type (e.g. color, length, duration).
    @default
    Default value rendered next to the token name.
    @group
    Groups tokens under an H4 in the Theming tab.
    @example / @since / @see
    Same semantics as elsewhere.
    @deprecated
    Optional reason. Empty marks deprecated without a message.
  • Inline 1 tag

    Used inside descriptions. Resolved at build time.

    {@link Symbol}
    Project-wide cross-reference. Resolves to a deep link, including across additional pages.

Theming token example

The token block sits above the actual property declaration. @overview blocks at file-level open the Theming tab. Per-token blocks fill the catalog.

css 
/**
 * @overview Card surface tokens.
 */

/**
 * Background of the card body.
 *
 * @type color
 * @default hsl(220 20% 98%)
 * @group Surface
 * @since 1.4.0
 * @example
 *   --color-app-card-bg: var(--color-cdx-bg-elevated);
 */
--color-app-card-bg: hsl(220 20% 98%);