style: auto-fix lint and format

Set integration slug for beszel, widget slugs for all 4 Beszel
widgets and customApi, add new paths to HomarrDocumentationPath
type, and set documentationUrl for the Beszel integration.

apps/docs/docs/integrations/beszel/index.mdx

@@ -0,0 +1,54 @@
+---
+title: 'Beszel'
+description: "Beszel is a lightweight server monitoring platform with Docker stats, historical data, and alert functions."
+hide_title: true
+---
+
+import { IntegrationHeader } from '@site/src/components/integrations/header';
+import { IntegrationCapabilites } from '@site/src/components/integrations/widgets';
+import { AddingIntegration } from '@site/src/components/integrations/adding';
+import { IntegrationSecrets } from '@site/src/components/integrations/secrets';
+import { beszelIntegration } from '.';
+import { beszelSystemStatsWidget } from '@site/docs/widgets/beszel-system-stats';
+import { beszelSystemGridWidget } from '@site/docs/widgets/beszel-system-grid';
+import { beszelSystemTableWidget } from '@site/docs/widgets/beszel-system-table';
+import { beszelAlertsWidget } from '@site/docs/widgets/beszel-alerts';
+
+import beszelDashboard from './img/beszel-dashboard.png';
+
+<IntegrationHeader
+    integration={beszelIntegration}
+    categories={['System Monitoring']}
+/>
+
+Beszel monitors your servers in real time via lightweight agents, collecting CPU, memory, disk, network, GPU, temperature, and Docker container metrics. It stores historical data and supports configurable alerts.
+
+### Screenshots
+
+<img src={beszelDashboard} alt="Beszel dashboard overview showing all four widgets" />
+
+### Widgets & Capabilities
+<IntegrationCapabilites
+    items={[
+        { widget: beszelSystemStatsWidget },
+        { widget: beszelSystemGridWidget },
+        { widget: beszelSystemTableWidget },
+        { widget: beszelAlertsWidget },
+    ]}
+/>
+
+### Adding the integration
+<AddingIntegration />
+
+### Secrets
+<IntegrationSecrets secrets={[{
+    credentials: ['username', 'password'],
+    steps: [
+        'Open your Beszel hub instance (default port 8090)',
+        'Use the same credentials you use to log in to the Beszel web UI',
+    ]
+}]} />
+
+:::tip
+Beszel uses PocketBase under the hood. The default admin credentials are set during the initial Beszel setup.
+:::

apps/docs/docs/integrations/beszel/index.ts

@@ -0,0 +1,9 @@
+import { IntegrationDefinition } from "@site/src/types";
+
+export const beszelIntegration: IntegrationDefinition = {
+  name: "Beszel",
+  description:
+    "Beszel is a lightweight server monitoring platform with Docker stats, historical data, and alert functions.",
+  iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/beszel.svg",
+  path: "../../integrations/beszel",
+};

apps/docs/docs/management/custom-widgets/index.mdx

@@ -0,0 +1,100 @@
+---
+title: Custom Widgets
+tags:
+  - Management
+  - Widgets
+  - Custom
+  - API
+---
+
+Custom widgets let you create your own dashboard widgets that fetch data from any external API and render it with configurable displays. They are managed from the **Management → Custom Widgets** page (admin only).
+
+:::note Beta
+Custom widgets are currently in beta. Share feedback and report issues in the [GitHub discussion](https://github.com/homarr-labs/homarr/discussions/5916).
+:::
+
+## Overview
+
+Custom widgets connect to any HTTP API endpoint and display the response data using one of several built-in display types. You can create multiple widget definitions, each with its own API configuration, display settings, and optional secrets for authentication.
+
+## Creating a Custom Widget
+
+Navigate to **Management → Custom Widgets** and click **New Custom Widget**. You'll need to configure:
+
+### API Configuration
+
+- **URL** — The full URL of the API endpoint to fetch
+- **Method** — HTTP method (`GET`, `POST`, etc.)
+- **Headers** — Custom HTTP headers (e.g. `Authorization`, `Content-Type`)
+- **Body** — Request body for POST/PUT methods
+- **Auth type** — Authentication method (`none`, `bearer`, `basic`, `API key in header`, `API key in query`)
+
+### Secrets
+
+Custom widgets support encrypted secret storage for API keys and passwords. Secrets are stored using AES-256-CBC encryption (same as integration secrets) and are **excluded from exports** for security.
+
+### Display Configuration
+
+Choose from the following display types:
+
+| Display Type | Description |
+|---|---|
+| **Single Value** | Shows a single extracted value prominently |
+| **Key-Value** | Displays data as labeled key-value pairs |
+| **Table** | Renders data in a table layout |
+| **Stat Grid** | Shows multiple statistics in a grid |
+| **Progress Bars** | Visualizes values as progress bars |
+| **Status Indicator** | Shows status with colored indicators |
+| **Count Grid** | Displays count values in a grid layout |
+| **Raw** | Shows the raw API response |
+| **Action Button** | A button that triggers an API call when clicked |
+| **Custom JSX** | Write custom JSX templates using whitelisted Mantine components |
+
+:::tip Refresh interval
+When adding a Custom API widget to a board, you can configure its **refresh interval** (1–3600 seconds, default 30s) in the widget's board options.
+:::
+
+## Custom JSX Display
+
+The Custom JSX display type lets you write JSX templates to create rich, interactive displays. For security, only whitelisted components are allowed:
+
+- **Mantine components** — `Text`, `Badge`, `Group`, `Stack`, `Paper`, `Progress`, `RingProgress`, `ThemeIcon`, `Anchor`, `Image`, `Divider`, `Code`, `Table`, and more
+- **Interactive components** — `PaginatedList`, `TabsContainer`, `Collapsible`, `StatBar`, `TypeBadge`
+
+Templates have access to the API response data and can use JSONPath expressions to extract values.
+
+:::warning Security
+The JSX sandbox blocks dangerous patterns like `eval`, `Function`, `__proto__`, and `javascript:` URLs. However, only admins can create custom widgets.
+:::
+
+## Live Preview
+
+The widget editor includes a live preview panel that shows how the widget will look with real API data. Use the **Debug** panel to inspect the raw API response and test JSONPath expressions.
+
+## Copy AI Prompt
+
+Click the **Copy AI Prompt** button to copy a prompt containing the API's JSON Schema and sample response. Paste this into an LLM to get help writing JSONPath expressions or Custom JSX templates.
+
+## Import & Export
+
+Custom widget definitions can be exported as JSON files and imported on other Homarr instances:
+
+- **Export** — Downloads a JSON file with the widget definition (secrets are excluded)
+- **Import** — Upload a previously exported JSON file to create a new widget definition
+- The export format uses `$schema: "homarr-custom-widget-v2"`
+
+## Using Custom Widgets on a Board
+
+Once created, custom widgets appear in the widget picker when editing a board. Each custom widget definition can be added to any board like a built-in widget.
+
+## Seed Fixtures
+
+Homarr ships with example custom widget definitions (disabled by default) to help you get started:
+
+- **Currency Exchange (JPY)** — Live exchange rates
+- **Random Dog Fact** — Random dog facts
+- **Jellyfin library** — Jellyfin server statistics
+
+Enable them from the custom widgets management page or use them as templates for your own widgets.
+
+Additional examples like the Pokédex are available as importable JSON files in the repository under `packages/db/seed/custom-widgets/`.

apps/docs/docs/management/tools/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Tools",
+  "collapsed": true,
+  "position": 10
+}

apps/docs/docs/management/tools/backup/index.mdx

@@ -0,0 +1,66 @@
+---
+title: SQLite Backup & Restore
+tags:
+  - Management
+  - Backup
+  - Restore
+  - SQLite
+---
+
+The SQLite Backup & Restore feature allows you to export and import your entire Homarr database as a portable ZIP file. This is useful for creating backups, migrating between instances, or recovering from failures.
+
+:::info SQLite only
+This feature is only available when using the SQLite database driver (`DB_DRIVER=better-sqlite3`). MySQL and PostgreSQL users should use their respective database backup tools.
+:::
+
+## Accessing Backup & Restore
+
+Navigate to **Management → Tools → Backup** from the sidebar. This page is only visible when running with SQLite.
+
+## Exporting a Backup
+
+Click the **Export** button to download a ZIP archive containing:
+
+- **`db.sqlite`** — A consistent snapshot of your database (created via `VACUUM INTO`)
+- **`metadata.json`** — Contains:
+  - `homarrVersion` — The version of Homarr that created the backup
+  - `exportedAt` — Timestamp of the export
+  - `dbDialect` — The database dialect (`sqlite`)
+  - `encryptionKey` — Your `SECRET_ENCRYPTION_KEY` (needed to decrypt integration secrets)
+
+:::caution
+The exported ZIP contains your encryption key and database. Store it securely and do not share it publicly.
+:::
+
+A confirmation dialog will ask you to type **"I understand"** before the export proceeds.
+
+## Importing a Backup
+
+1. Click the **Import** button and upload a previously exported ZIP file
+2. Homarr analyzes the backup **entirely in your browser** using WebAssembly (sql.js) — no data is sent to the server during preview
+3. The preview shows:
+   - **Entity counts** — How many boards, apps, users, integrations, etc. are in the backup
+   - **Board names** — A list of all boards contained in the backup
+   - **Migration status** — If the backup is from an older version, Homarr shows each pending database migration as animated timeline steps
+4. Review the preview and type **"I understand"** to confirm
+5. Homarr applies any pending migrations, re-encrypts integration secrets if the `SECRET_ENCRYPTION_KEY` differs between instances, and replaces the live database
+6. The server automatically restarts to pick up the new database
+
+:::tip
+The import process is **backward-compatible** with older backups that used a separate `encryption-key.txt` file instead of embedding the key in `metadata.json`.
+:::
+
+## Onboarding Integration
+
+When setting up a fresh Homarr instance with SQLite, the onboarding wizard includes a **"Restore from SQLite backup"** option. This lets you upload a backup ZIP to bootstrap your new instance with data from a previous installation.
+
+## Docker Restart Behavior
+
+After a successful import, only the Next.js process restarts — nginx and Redis remain running. The `run.sh` script automatically restarts Next.js in a loop, so the application comes back online within seconds. Running `docker stop` still works gracefully.
+
+## Best Practices
+
+- **Back up regularly** — Create exports before major updates or configuration changes
+- **Test restores** — Periodically verify your backups by importing them on a test instance
+- **Secure storage** — Keep backups in an encrypted or access-controlled location since they contain your encryption key
+- **Check versions** — Backups from newer versions cannot be imported into older Homarr instances; always import into the same or newer version

apps/docs/docs/widgets/beszel-alerts/index.mdx

@@ -0,0 +1,39 @@
+---
+title: 'Beszel Alerts'
+description: 'View Beszel alert configurations and history with triggered/ok status indicators.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { beszelAlertsWidget } from '.';
+import { beszelIntegration } from '@site/docs/integrations/beszel';
+
+import beszelAlerts from './img/beszel-alerts.png';
+
+<WidgetHeader
+  widget={beszelAlertsWidget}
+  categories={['System Monitoring', 'Alerts']}
+/>
+
+This widget displays your Beszel alert configurations separated by status (triggered and ok). It also shows alert history with timestamps. Alerts are updated in real time via WebSocket subscriptions.
+
+### Screenshots
+
+<img src={beszelAlerts} alt="Beszel Alerts widget showing triggered and ok alerts with history" />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: beszelIntegration,
+  note: "Displays alert configurations and trigger history"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={beszelAlertsWidget.configuration} />

apps/docs/docs/widgets/beszel-alerts/index.ts

@@ -0,0 +1,25 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconBell } from "@tabler/icons-react";
+
+export const beszelAlertsWidget: WidgetDefinition = {
+  icon: IconBell,
+  name: "Beszel Alerts",
+  description: "View Beszel alert configurations and history with triggered/ok status indicators.",
+  path: "../../widgets/beszel-alerts",
+  configuration: {
+    items: [
+      {
+        name: "Show history",
+        description: "Displays the alert trigger history",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Max history items",
+        description: "Maximum number of history entries to display (1-100)",
+        values: "Number (1-100)",
+        defaultValue: "10",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/beszel-system-grid/index.mdx

@@ -0,0 +1,39 @@
+---
+title: 'Beszel Systems (Grid)'
+description: 'Card grid view of all Beszel-monitored systems with real-time metrics.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { beszelSystemGridWidget } from '.';
+import { beszelIntegration } from '@site/docs/integrations/beszel';
+
+import beszelSystemGrid from './img/beszel-system-grid.png';
+
+<WidgetHeader
+  widget={beszelSystemGridWidget}
+  categories={['System Monitoring']}
+/>
+
+This widget displays all your Beszel-monitored systems as a responsive card grid. Each card shows real-time metrics like CPU, memory, disk, network, temperature, and more. Cards adapt their layout based on available space.
+
+### Screenshots
+
+<img src={beszelSystemGrid} alt="Beszel System Grid widget showing system cards with metrics" />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: beszelIntegration,
+  note: "Displays all monitored systems as a card grid"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={beszelSystemGridWidget.configuration} />

apps/docs/docs/widgets/beszel-system-grid/index.ts

@@ -0,0 +1,88 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconLayoutGrid } from "@tabler/icons-react";
+
+export const beszelSystemGridWidget: WidgetDefinition = {
+  icon: IconLayoutGrid,
+  name: "Beszel Systems (Grid)",
+  description: "Card grid view of all Beszel-monitored systems with real-time metrics.",
+  path: "../../widgets/beszel-system-grid",
+  configuration: {
+    items: [
+      {
+        name: "Status filter",
+        description: "Filter systems by their current status",
+        values: {
+          type: "select",
+          options: ["All Systems", "Up", "Down", "Paused"],
+        },
+        defaultValue: "All Systems",
+      },
+      {
+        name: "Show CPU",
+        description: "Displays CPU usage on each system card",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show memory",
+        description: "Displays memory usage on each system card",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show disk",
+        description: "Displays disk usage on each system card",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show GPU",
+        description: "Displays GPU usage on each system card",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show load average",
+        description: "Displays system load average",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show network",
+        description: "Displays network throughput",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show temperature",
+        description: "Displays system temperature",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show battery",
+        description: "Displays battery level (if available)",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show services",
+        description: "Displays running Docker services count",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show uptime",
+        description: "Displays system uptime",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show agent version",
+        description: "Displays the Beszel agent version",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/beszel-system-stats/index.mdx

@@ -0,0 +1,39 @@
+---
+title: 'Beszel System Stats'
+description: 'Time-series charts for CPU, memory, disk, network, and Docker container metrics from Beszel.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { beszelSystemStatsWidget } from '.';
+import { beszelIntegration } from '@site/docs/integrations/beszel';
+
+import beszelSystemStats from './img/beszel-system-stats.png';
+
+<WidgetHeader
+  widget={beszelSystemStatsWidget}
+  categories={['System Monitoring', 'Charts']}
+/>
+
+This widget displays time-series charts for a selected Beszel system, including CPU, memory, disk, network, and Docker container metrics. Data is cached and refreshed periodically. You can select a time period ranging from 1 hour to 30 days.
+
+### Screenshots
+
+<img src={beszelSystemStats} alt="Beszel System Stats widget showing CPU, memory, disk and network charts" />
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: beszelIntegration,
+  note: "Displays time-series charts for a selected system"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={beszelSystemStatsWidget.configuration} />

apps/docs/docs/widgets/beszel-system-stats/index.ts

@@ -0,0 +1,70 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconChartAreaLine } from "@tabler/icons-react";
+
+export const beszelSystemStatsWidget: WidgetDefinition = {
+  icon: IconChartAreaLine,
+  name: "Beszel System Stats",
+  description: "Time-series charts for CPU, memory, disk, network, and Docker container metrics from Beszel.",
+  path: "../../widgets/beszel-system-stats",
+  configuration: {
+    items: [
+      {
+        name: "Time period",
+        description: "The time range for chart data",
+        values: {
+          type: "select",
+          options: ["1 Hour", "12 Hours", "24 Hours", "1 Week", "30 Days"],
+        },
+        defaultValue: "1 Hour",
+      },
+      {
+        name: "Show CPU",
+        description: "Displays the CPU usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show memory",
+        description: "Displays the memory usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show disk",
+        description: "Displays the disk usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show disk I/O",
+        description: "Displays the disk I/O chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show network",
+        description: "Displays the network chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Docker CPU",
+        description: "Displays Docker container CPU usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Docker memory",
+        description: "Displays Docker container memory usage chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show Docker network",
+        description: "Displays Docker container network chart",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/beszel-system-table/index.mdx

@@ -0,0 +1,34 @@
+---
+title: 'Beszel Systems (Table)'
+description: 'Table view of all Beszel-monitored systems with sortable columns and status indicators.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { WidgetConfig } from '@site/src/components/widgets/configuration';
+import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { beszelSystemTableWidget } from '.';
+import { beszelIntegration } from '@site/docs/integrations/beszel';
+
+
+<WidgetHeader
+  widget={beszelSystemTableWidget}
+  categories={['System Monitoring']}
+/>
+
+This widget displays all your Beszel-monitored systems in a sortable data table. Each row shows system metrics like CPU, memory, disk, network, temperature, and more. Columns can be toggled on or off, and the table supports sorting by any column.
+
+### Supported Integrations
+
+<WidgetIntegrations items={[{
+  integration: beszelIntegration,
+  note: "Displays all monitored systems in a sortable table"
+}]} />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+<WidgetConfig configuration={beszelSystemTableWidget.configuration} />

apps/docs/docs/widgets/beszel-system-table/index.ts

@@ -0,0 +1,106 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconTable } from "@tabler/icons-react";
+
+export const beszelSystemTableWidget: WidgetDefinition = {
+  icon: IconTable,
+  name: "Beszel Systems (Table)",
+  description: "Table view of all Beszel-monitored systems with sortable columns and status indicators.",
+  path: "../../widgets/beszel-system-table",
+  configuration: {
+    items: [
+      {
+        name: "Status filter",
+        description: "Filter systems by their current status",
+        values: {
+          type: "select",
+          options: ["All Systems", "Up", "Down", "Paused"],
+        },
+        defaultValue: "All Systems",
+      },
+      {
+        name: "Sort by",
+        description: "Default column to sort the table by",
+        values: {
+          type: "select",
+          options: ["System", "CPU", "Memory", "Disk", "GPU", "Load Avg", "Net", "Temp", "Services", "Uptime", "Agent"],
+        },
+        defaultValue: "System",
+      },
+      {
+        name: "Sort direction",
+        description: "Default sort direction",
+        values: {
+          type: "select",
+          options: ["Ascending", "Descending"],
+        },
+        defaultValue: "Ascending",
+      },
+      {
+        name: "Show CPU",
+        description: "Displays the CPU column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show memory",
+        description: "Displays the memory column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show disk",
+        description: "Displays the disk column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show GPU",
+        description: "Displays the GPU column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show load average",
+        description: "Displays the load average column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show network",
+        description: "Displays the network column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show temperature",
+        description: "Displays the temperature column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show battery",
+        description: "Displays the battery column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show services",
+        description: "Displays the services column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show uptime",
+        description: "Displays the uptime column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+      {
+        name: "Show agent version",
+        description: "Displays the agent version column",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};

apps/docs/docs/widgets/custom-api/index.mdx

@@ -0,0 +1,29 @@
+---
+title: 'Custom API'
+description: 'Displays data from a custom API endpoint using configurable display types and optional JSX templates.'
+hide_title: true
+---
+
+import { WidgetHeader } from '@site/src/components/widgets/header';
+import { AddingWidget } from '@site/src/components/widgets/adding';
+import { customApiWidget } from '.';
+
+
+<WidgetHeader
+  widget={customApiWidget}
+  categories={['Custom', 'API']}
+/>
+
+This widget fetches data from a custom API endpoint defined in [Custom Widgets management](/docs/management/custom-widgets) and renders it using configurable display types.
+
+Custom API widgets are created and configured through the admin management page. Each widget definition specifies the API endpoint, authentication, display type, and refresh interval.
+
+See the [Custom Widgets documentation](/docs/management/custom-widgets) for full details on creating and configuring custom widgets.
+
+### Adding the widget
+
+<AddingWidget />
+
+:::note
+Custom API widgets must first be created in **Management → Custom Widgets** before they appear in the widget picker.
+:::

apps/docs/docs/widgets/custom-api/index.ts

@@ -0,0 +1,9 @@
+import { WidgetDefinition } from "@site/src/types";
+import { IconApi } from "@tabler/icons-react";
+
+export const customApiWidget: WidgetDefinition = {
+  icon: IconApi,
+  name: "Custom API",
+  description: "Displays data from a custom API endpoint using configurable display types and optional JSX templates.",
+  path: "../../widgets/custom-api",
+};

packages/definitions/src/docs/homarr-docs-sitemap.ts

@@ -156,6 +156,7 @@ export type HomarrDocumentationPath =
   | "/docs/integrations/adguard-home"
   | "/docs/integrations/anchor"
   | "/docs/integrations/aria2"
+  | "/docs/integrations/audiobookshelf"
   | "/docs/integrations/codeberg"
   | "/docs/integrations/coolify"
   | "/docs/integrations/dash-dot"
@@ -175,6 +176,7 @@ export type HomarrDocumentationPath =
   | "/docs/integrations/kubernetes"
   | "/docs/integrations/lidarr"
   | "/docs/integrations/linux-server-io"
+  | "/docs/integrations/navidrome"
   | "/docs/integrations/nextcloud"
   | "/docs/integrations/npm"
   | "/docs/integrations/ntfy"
@@ -182,6 +184,7 @@ export type HomarrDocumentationPath =
   | "/docs/integrations/open-media-vault"
   | "/docs/integrations/opnsense"
   | "/docs/integrations/overseerr"
+  | "/docs/integrations/paperless-ngx"
   | "/docs/integrations/peanut"
   | "/docs/integrations/pi-hole"
   | "/docs/integrations/plex"
@@ -198,12 +201,14 @@ export type HomarrDocumentationPath =
   | "/docs/integrations/sonarr"
   | "/docs/integrations/speedtest-tracker"
   | "/docs/integrations/tdarr"
+  | "/docs/integrations/technitium-dns"
   | "/docs/integrations/tracearr"
   | "/docs/integrations/transmission"
   | "/docs/integrations/truenas"
   | "/docs/integrations/umami"
   | "/docs/integrations/unifi-controller"
   | "/docs/integrations/unraid"
+  | "/docs/integrations/uptime-kuma"
   | "/docs/management/api"
   | "/docs/management/apps"
   | "/docs/management/boards"
@@ -216,6 +221,7 @@ export type HomarrDocumentationPath =
   | "/docs/management/users"
   | "/docs/widgets/anchor-note"
   | "/docs/widgets/app"
+  | "/docs/widgets/audio-stats"
   | "/docs/widgets/bookmarks"
   | "/docs/widgets/calendar"
   | "/docs/widgets/clock"
@@ -240,6 +246,7 @@ export type HomarrDocumentationPath =
   | "/docs/widgets/network-controller-summary"
   | "/docs/widgets/notebook"
   | "/docs/widgets/notifications"
+  | "/docs/widgets/paperless-ngx"
   | "/docs/widgets/releases"
   | "/docs/widgets/rss-feed"
   | "/docs/widgets/smart-home-entity-state"
@@ -251,6 +258,7 @@ export type HomarrDocumentationPath =
   | "/docs/widgets/tracearr"
   | "/docs/widgets/umami"
   | "/docs/widgets/ups"
+  | "/docs/widgets/uptime-kuma"
   | "/docs/widgets/video"
   | "/docs/widgets/weather"
   | ""
@@ -309,6 +317,7 @@ export type HomarrDocumentationPath =
   | "/docs/integrations/navidrome"
   | "/docs/integrations/umami"
   | "/docs/integrations/peanut"
+  | "/docs/integrations/beszel"
   | "/docs/widgets/clock"
   | "/docs/widgets/weather"
   | "/docs/widgets/app"
@@ -350,4 +359,9 @@ export type HomarrDocumentationPath =
   | "/docs/widgets/uptime-kuma"
   | "/docs/widgets/audio-stats"
   | "/docs/widgets/umami"
-  | "/docs/widgets/ups";
+  | "/docs/widgets/ups"
+  | "/docs/widgets/beszel-system-table"
+  | "/docs/widgets/beszel-system-grid"
+  | "/docs/widgets/beszel-alerts"
+  | "/docs/widgets/beszel-system-stats"
+  | "/docs/widgets/custom-api";

packages/definitions/src/docs/integration-doc-slugs.ts

@@ -55,6 +55,6 @@ export const integrationDocSlugs: Record<IntegrationKind, string | null> = {
   navidrome: "navidrome",
   umami: "umami",
   peaNut: "peanut",
-  beszel: null,
+  beszel: "beszel",
   mock: null,
 };

packages/definitions/src/docs/widget-doc-slugs.ts

@@ -44,9 +44,9 @@ export const widgetDocSlugs: Record<WidgetKind, string | null> = {
   audioStats: "audio-stats",
   umami: "umami",
   ups: "ups",
-  beszelSystemTable: null,
-  beszelSystemGrid: null,
-  beszelAlerts: null,
-  beszelSystemStats: null,
-  customApi: null,
+  beszelSystemTable: "beszel-system-table",
+  beszelSystemGrid: "beszel-system-grid",
+  beszelAlerts: "beszel-alerts",
+  beszelSystemStats: "beszel-system-stats",
+  customApi: "custom-api",
 };

packages/definitions/src/integration.ts

@@ -479,7 +479,7 @@ export const integrationDefs = {
     secretKinds: [["username", "password"]],
     iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/beszel.svg",
     category: ["healthMonitoring"],
-    documentationUrl: null,
+    documentationUrl: createDocumentationLink("/docs/integrations/beszel"),
     defaultPort: 8090,
   },
   // This integration only returns mock data, it is used during development (but can also be used in production by directly going to the create page)