docs: Enable `typedoc` for `snaps-sdk` #3840

FrederikBolding · 2026-02-06T09:39:04Z

Hmm, it's not obvious to me from the yarn.lock diff why this changed 🤔

Unsure, but the change seems fine 🤔

Yeah, the node_modules shape must have changed a bit for whatever reason. So now it is using a more local version to the package 🤔

-Original file line number
+Diff line change
@@ -0,0 +1,19 @@
+    name: Publish main branch docs to GitHub Pages
+    on:
+      push:
+        branches:
+          - main
+    jobs:
+      publish-to-gh-pages:
+        name: Publish docs to `staging` directory of `gh-pages` branch
+        permissions:
+          contents: write
+        uses: ./.github/workflows/publish-github-pages.yml
+        with:
+          build_script: yarn workspace @metamask/snaps-sdk build:docs
+          destination_dir: docs/staging
+          publish_dir: ./packages/snaps-sdk/docs
+        secrets:
+          PUBLISH_PAGES_TOKEN: ${{ secrets.PUBLISH_PAGES_TOKEN }}

-Original file line number
+Diff line change
@@ Expand Up / @@ -122,6 +122,60 @@ jobs: @@
               npm-token: ${{ secrets.NPM_TOKEN }}
               npm-tag: ${{ needs.get-release-tag.outputs.tag }}
+      is-sdk-release:
+        name: Determine whether this release updates Snaps SDK
+        runs-on: ubuntu-latest
+        needs: publish-release
+        outputs:
+          IS_SDK_RELEASE: ${{ steps.set-output.outputs.IS_SDK_RELEASE }}
+          SDK_VERSION: ${{ steps.set-output.outputs.SDK_VERSION }}
+        steps:
+          - name: Checkout and setup environment
+            uses: MetaMask/action-checkout-and-setup@v2
+            with:
+              is-high-risk-environment: true
+              ref: ${{ github.sha }}
+              fetch-depth: 2
+          - name: Check if this is a Snaps SDK release
+            id: is-sdk-release
+            shell: bash
+            env:
+              BEFORE: ${{ github.event.before }}
+            run: ./scripts/is-release.sh "packages/snaps-sdk/package.json" "$BEFORE" "IS_SDK_RELEASE"
+          - name: Set output
+            id: set-output
+            if: steps.is-sdk-release.outputs.IS_SDK_RELEASE == 'true'
+            run: |
+              echo "IS_SDK_RELEASE=true" >> "$GITHUB_OUTPUT"
+              echo "SDK_VERSION=$(jq --raw-output '.version' packages/snaps-sdk/package.json)" >> "$GITHUB_OUTPUT"
+      publish-docs-to-gh-pages:
+        name: Publish docs to `docs/${{ needs.is-sdk-release.outputs.SDK_VERSION }}` directory of `gh-pages` branch
+        needs: is-sdk-release
+        if: ${{ needs.is-sdk-release.outputs.IS_SDK_RELEASE == 'true' }}
+        permissions:
+          contents: write
+        uses: ./.github/workflows/publish-github-pages.yml
+        with:
+          build_script: yarn workspace @metamask/snaps-sdk build:docs
+          destination_dir: docs/${{ needs.is-sdk-release.outputs.SDK_VERSION }}
+          publish_dir: ./packages/snaps-sdk/docs
+        secrets:
+          PUBLISH_PAGES_TOKEN: ${{ secrets.PUBLISH_PAGES_TOKEN }}
+      publish-docs-to-latest-gh-pages:
+        name: Publish docs to `docs/latest` directory of `gh-pages` branch
+        needs: publish-docs-to-gh-pages
+        permissions:
+          contents: write
+        uses: ./.github/workflows/publish-github-pages.yml
+        with:
+          build_script: yarn workspace @metamask/snaps-sdk build:docs
+          destination_dir: docs/latest
+          publish_dir: ./packages/snaps-sdk/docs
+        secrets:
+          PUBLISH_PAGES_TOKEN: ${{ secrets.PUBLISH_PAGES_TOKEN }}
       is-environment-release:
         name: Determine whether this release updates the iframe execution environment
         runs-on: ubuntu-latest
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -78,7 +78,15 @@ const config = createConfig([ @@
           'jsdoc/check-tag-names': [
             'error',
             {
-              definedTags: ['property'],
+              definedTags: [
+                'property',
+                // Typedoc tags
+                'category',
+                'primaryExport',
+                'showCategories',
+                'showGroups',
+              ],
             },
           ],
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -433,7 +433,7 @@ @@
         "html-webpack-plugin>pretty-error>renderkid>css-select>domutils>dom-serializer": {
           "packages": {
             "html-webpack-plugin>pretty-error>renderkid>htmlparser2>domelementtype": true,
-            "html-webpack-plugin>pretty-error>renderkid>htmlparser2>entities": true
+            "html-webpack-plugin>pretty-error>renderkid>css-select>domutils>dom-serializer>entities": true
           }
         },
         "html-webpack-plugin>pretty-error>renderkid>css-select>domhandler": {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ @@
         "prettier-plugin-packagejson",
         "ts-node",
         "typedoc",
+        "typedoc-theme-fresh",
         "typescript"
       ]
     }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: Enable `typedoc` for `snaps-sdk` #3840

Diff view

Diff view

There are no files selected for viewing

Uh oh!

FrederikBolding Feb 6, 2026

Uh oh!

Mrtenz Feb 6, 2026

Uh oh!

FrederikBolding Feb 6, 2026

Uh oh!

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ Expand Up / @@ -74,6 +74,7 @@ @@
       ],
       "scripts": {
         "build": "ts-bridge --project tsconfig.build.json --verbose --clean --no-references",
+        "build:docs": "typedoc",
         "changelog:update": "../../scripts/update-changelog.sh @metamask/snaps-sdk",
         "changelog:validate": "../../scripts/validate-changelog.sh @metamask/snaps-sdk",
         "lint": "yarn lint:eslint && yarn lint:misc --check && yarn changelog:validate && yarn lint:dependencies",
@@ Expand Down Expand Up / @@ -114,6 +115,8 @@ @@
         "jest-silent-reporter": "^0.6.0",
         "prettier": "^3.3.3",
         "ts-jest": "^29.1.1",
+        "typedoc": "^0.28.16",
+        "typedoc-theme-fresh": "^0.2.3",
         "typescript": "~5.3.3"
       },
       "engines": {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,3 +1,12 @@
+    /**
+     * The main entry point for the Snaps SDK, which can be accessed by importing
+     * from `@metamask/snaps-sdk`.
+     *
+     * @module Main
+     * @primaryExport
+     * @showGroups
+     */
     // Only internals that are used by other Snaps packages should be exported here.
     export type { EnumToUnion } from './internals';
     export type { UriOptions } from './internals';
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ import { createSnapComponent } from '../component'; @@
      * @property truncate - Whether to truncate the address. Defaults to `true`.
      * @property displayName - Whether to show the account name. Defaults to `false`.
      * @property avatar - Whether to show the address avatar. Defaults to `true`.
+     * @category Component Props
      */
     export type AddressProps = {
       address: `0x${string}` | CaipAccountId;
@@ Expand Down Expand Up / @@ -42,12 +43,14 @@ const TYPE = 'Address'; @@
      * <Address address="0x1234567890123456789012345678901234567890" truncate={false} avatar={false} />
      * @example
      * <Address address="0x1234567890123456789012345678901234567890" displayName={true} />
+     * @category Components
      */
     export const Address = createSnapComponent<AddressProps, typeof TYPE>(TYPE);
     /**
      * An address element.
      *
-     * @see Address
+     * @see {@link Address}
+     * @category Elements
      */
     export type AddressElement = ReturnType<typeof Address>;

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ import { createSnapComponent } from '../component'; @@
      *
      * @property address - The address to display. This should be a valid CAIP-10 address.
      * @property size - The size of the avatar. Can be `sm`, `md`, or `lg`. Defaults to `md`.
+     * @category Component Props
      */
     export type AvatarProps = {
       address: CaipAccountId;
@@ Expand All / @@ -28,12 +29,14 @@ const TYPE = 'Avatar'; @@
      * <Avatar address="eip155:1:0x1234567890123456789012345678901234567890" />
      * @example
      * <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
+     * @category Components
      */
     export const Avatar = createSnapComponent<AvatarProps, typeof TYPE>(TYPE);
     /**
      * An avatar element.
      *
-     * @see Avatar
+     * @see {@link Avatar}
+     * @category Elements
      */
     export type AvatarElement = ReturnType<typeof Avatar>;

-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ export type BannerChildren = SnapsChildren< @@
      * @param children - The content to display in the banner.
      * @param title - Title of the banner.
      * @param severity - Severity level of the banner.
+     * @category Component Props
      */
     export type BannerProps = {
       children: BannerChildren;
@@ Expand All / @@ -44,12 +45,14 @@ const TYPE = 'Banner'; @@
      * <Banner title="Success banner" severity="success">
      *   <Text>Here is the banner content!</Text>
      * </Banner>
+     * @category Components
      */
     export const Banner = createSnapComponent<BannerProps, typeof TYPE>(TYPE);
     /**
      * A Banner element.
      *
-     * @see Banner
+     * @see {@link Banner}
+     * @category Elements
      */
     export type BannerElement = ReturnType<typeof Banner>;

-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ import { createSnapComponent } from '../component'; @@
      * @property alignment - The alignment mode to use within the box. Defaults to `start`.
      * @property crossAlignment - The cross alignment mode to use within the box.
      * @property center - Whether to center the children within the box. Defaults to `false`.
+     * @category Component Props
      */
     export type BoxProps = {
       // We can't use `JSXElement` because it causes a circular reference.
@@ Expand Down Expand Up / @@ -41,12 +42,14 @@ const TYPE = 'Box'; @@
      * <Box>
      *   <Text>Hello world!</Text>
      * </Box>
+     * @category Components
      */
     export const Box = createSnapComponent<BoxProps, typeof TYPE>(TYPE);
     /**
      * A box element.
      *
-     * @see Box
+     * @see {@link Box}
+     * @category Elements
      */
     export type BoxElement = ReturnType<typeof Box>;

-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ import { createSnapComponent } from '../component'; @@
      * @property description - The description, shown below the title.
      * @property value - The value, shown on the right side.
      * @property extra - An additional optional value shown below the value.
+     * @category Component Props
      */
     export type CardProps = {
       image?: string | undefined;
@@ Expand All / @@ -32,12 +33,14 @@ const TYPE = 'Card'; @@
      * @returns A card element.
      * @example
      * <Card image="<svg />" title="Title" description="Description" value="$1200" extra="0.12 ETH" />
+     * @category Components
      */
     export const Card = createSnapComponent<CardProps, typeof TYPE>(TYPE);
     /**
      * A card element.
      *
-     * @see Card
+     * @see {@link Card}
+     * @category Elements
      */
     export type CardElement = ReturnType<typeof Card>;

-Original file line number
+Diff line change
@@ Expand Up @@
      * The props of the {@link Container} component.
      *
      * @property children - The Box and the Footer or the Box element.
+     * @category Component Props
      */
     export type ContainerProps = {
       children: [GenericSnapElement, FooterElement] | GenericSnapElement;
@@ Expand All / @@ -36,12 +37,14 @@ const TYPE = 'Container'; @@
      *     <Button name="confirm">Confirm</Button>
      *   </Footer>
      * </Container>
+     * @category Components
      */
     export const Container = createSnapComponent<ContainerProps, typeof TYPE>(TYPE);
     /**
      * A container element.
      *
-     * @see Container
+     * @see {@link Container}
+     * @category Elements
      */
     export type ContainerElement = ReturnType<typeof Container>;

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ import { createSnapComponent } from '../component'; @@
      * element.
      * @property sensitive - Whether the value is sensitive. If `true`, the value
      * will be hidden when the user is not interacting with the copyable element.
+     * @category Component Props
      */
     export type CopyableProps = {
       value: string;
@@ Expand All / @@ -27,12 +28,14 @@ const TYPE = 'Copyable'; @@
      * @example
      * <Copyable value="0x1234567890123456789012345678901234567890" />
      * <Copyable value="0x1234567890123456789012345678901234567890" sensitive />
+     * @category Components
      */
     export const Copyable = createSnapComponent<CopyableProps, typeof TYPE>(TYPE);
     /**
      * A copyable element.
      *
-     * @see Copyable
+     * @see {@link Copyable}
+     * @category Elements
      */
     export type CopyableElement = ReturnType<typeof Copyable>;

-Original file line number
+Diff line change
@@ Expand Up / @@ -11,12 +11,14 @@ const TYPE = 'Divider'; @@
      * @returns A divider element.
      * @example
      * <Divider />
+     * @category Components
      */
     export const Divider = createSnapComponent(TYPE);
     /**
      * A divider element.
      *
-     * @see Divider
+     * @see {@link Divider}
+     * @category Elements
      */
     export type DividerElement = ReturnType<typeof Divider>;

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ import { createSnapComponent } from '../component'; @@
      * The props of the {@link Footer} component.
      *
      * @property children - The single or multiple buttons in the footer.
+     * @category Component Props
      */
     export type FooterProps = {
       children: ButtonElement | [ButtonElement, ButtonElement];
@@ Expand All / @@ -23,12 +24,14 @@ const TYPE = 'Footer'; @@
      *   <Button name="cancel">Cancel</Button>
      *   <Button name="confirm">Confirm</Button>
      * </Footer>
+     * @category Components
      */
     export const Footer = createSnapComponent<FooterProps, typeof TYPE>(TYPE);
     /**
      * A footer element.
      *
-     * @see Footer
+     * @see {@link Footer}
+     * @category Elements
      */
     export type FooterElement = ReturnType<typeof Footer>;

docs: Enable typedoc for snaps-sdk #3840

docs: Enable typedoc for snaps-sdk #3840

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

FrederikBolding Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Mrtenz Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

FrederikBolding Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

docs: Enable `typedoc` for `snaps-sdk` #3840

docs: Enable `typedoc` for `snaps-sdk` #3840