When you generate a dashboard page extension, the CLI adds the following files to your project:
<your-page-name>.extension.ts: Builds the page.<your-page-name>.tsx: Defines the page content.The <your-page-name>.extension.ts file contains a dashboard page's builder configuration.
The page builder is defined using the following schema, shown here as a TypeScript type:
Here's an example builder definition:
The following fields can be used in the configuration object:
| Field | Type | Description |
|---|---|---|
id | string | Page ID as a (GUID). It must be unique across all pages in the project. |
title | string | The page title. The title is used as the browser tab title and as the dashboard sidebar label if the page is configured to appear in the sidebar. |
routePath | string | Route that lead to this page. Use this route in code to reference the page. |
component | string | A route to the page content component. |
priority (optional) | number | Order of this page in the dashboard sidebar when the project has multiple dashboard pages. Smaller numbers appear higher in the list. |
fullPage (optional) | boolean | Whether the dashboard sidebar is hidden while the page is open. Default: false. |
metaData (optional) | object | How the page appears in dashboard search. See Dashboard search with metaData. |
priority)When your project has more than 1 dashboard page, set priority on each extensions.dashboardPage() so the dashboard sidebar lists the pages in the order you want. Smaller numbers appear higher in the list.
Set priority in each page's <your-page-name>.extension.ts file. For example, for a project with a Settings page and a Reports page:
Both pages must be registered in src/extensions.ts. The CLI adds that registration when it generates the extension.
After you change priorities, build and release your project so the updated sidebar order is registered. See Build and Deploy with the CLI.
Note: This priority controls the order of dashboard pages in the dashboard sidebar. It isn't the same as the toast priority in the Dashboard SDK, which accepts low, normal, or high.
If you're migrating from the legacy Wix CLI for Headless, copy the page's compData.backOfficePage.sidebar.priority value from the page's extension.json to the builder's priority field.
Use metaData to control how the page appears when Wix users search the dashboard. Dashboard search lists the page only when searchable is true and it has a description.
When you generate a dashboard page, the CLI adds metaData with searchable: true and a default description. Replace the default description with a description of what Wix users can do on the page.
| Field | Type | Description |
|---|---|---|
searchable | boolean | Whether the page appears in dashboard search results. Set to false for pages that only work when opened from another page, such as a details or edit page. |
description | string | Description of the page for dashboard search. Required when searchable is true. Maximum: 200 characters. |
title | string | The page name in dashboard search. Dashboard search doesn't index the page title, so set this field to the same value to make the page findable by its name. |
Dashboard search matches the words Wix users type against metaData.title and metaData.description. Use the words Wix users type when looking for the page.
For example, for a project with a Reports page:
For a page that only works when opened from another page, set searchable to false:
Note: The CLI build doesn't check metaData value limits, such as the description length. Values outside the limits are rejected when you release your project.
The <your-page-name>.tsx file contains a dashboard page's content.
The content is defined as a React component that renders when the page is active.
Inside a dashboard page component you can use:
httpClient.fetchWithAuth from @wix/essentials to call your project's own backend HTTP endpoints.Last updated: 12 November 2026