# microsoft/fabric-extensibility-toolkit architecture

> Architecture diagram of the GitHub repository microsoft/fabric-extensibility-toolkit, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/microsoft/fabric-extensibility-toolkit
- Repository: https://github.com/microsoft/fabric-extensibility-toolkit

## Overview

This repository is a Microsoft Fabric workload-extension toolkit, with a runnable Hello World item illustrating the user experience: Fabric opens the workload, routes to an item editor, and the editor can use Fabric APIs and OneLake storage. The app also provides OneLake browsing and a development-only SDK playground. The tree includes remote setup and job-scheduling code, matching the README’s release notes, but the available excerpts do not establish its runtime wiring. Edges are limited to relationships shown in excerpts, the source index, or README; unsampled subsystem internals are not inferred.

Main entry points: [`Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx`](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx) (Client SDK playground), [`Workload/app/components/OneLakeView/OneLakeViewController.ts`](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/components/OneLakeView/OneLakeViewController.ts) (Explorer data logic), [`Workload/app/clients/FabricPlatformClient.ts`](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/FabricPlatformClient.ts) (Platform API client), [`Workload/app/clients/OneLakeStorageClient.ts`](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/OneLakeStorageClient.ts) (OneLake storage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Workload experience"]
  node_app_entry["Workload routes<br/>[App.tsx]"]
  node_hello_editor["Hello World editor"]
end

subgraph group_fabric["Fabric integration"]
  node_item_crud["Item CRUD"]
  node_navigation["Navigation API"]
  node_datahub["Data hub dialogs"]
  node_platform_client["Platform API client"]
  node_platform_scopes["Platform scopes"]
  node_platform_types["Platform types"]
end

subgraph group_onelake["OneLake exploration"]
  node_onelake_view["OneLake explorer<br/>[OneLakeView.tsx]"]
  node_onelake_controller["Explorer data logic"]
  node_onelake_model["Explorer view model"]
  node_storage_client["OneLake storage"]
  node_storage_wrapper["Item storage wrapper"]
end

subgraph group_playground["SDK playground"]
  node_playground_routes["Optional playground routes"]
  node_sdk_playground["Client SDK playground"]
  node_playground_store["Playground state<br/>[Store.ts]"]
  node_api_auth["Authentication examples"]
  node_api_auth_frontend["Frontend auth example"]
  node_api_data["Data hub example<br/>[ApiData.tsx]"]
  node_api_variables["Variable library example"]
  node_ui_components["UI component examples<br/>[UIComponents.tsx]"]
end

subgraph group_remote["Remote operations"]
  node_remote_job["Job scheduling"]
  node_remote_api["Remote workload APIs"]
  node_onelake_service["OneLake remote service"]
  node_token_exchange["Token exchange"]
end

node_fabric_user(("Fabric user"))
node_fabric_host["Fabric host"]

node_fabric_user -->|"opens workload"| node_fabric_host
node_fabric_host -.->|"loads routes"| node_app_entry
node_app_entry -->|"routes to editor"| node_hello_editor
node_app_entry -->|"adds optional routes"| node_playground_routes
node_hello_editor -.->|"uses item APIs"| node_item_crud
node_item_crud -->|"gets and updates items"| node_fabric_host
node_navigation -->|"calls navigation API"| node_fabric_host
node_datahub -->|"opens data hub dialogs"| node_fabric_host
node_platform_client -.->|"calls platform APIs"| node_fabric_host
node_platform_client -.->|"uses scopes"| node_platform_scopes
node_platform_client -.->|"uses types"| node_platform_types
node_onelake_view -.->|"uses explorer logic"| node_onelake_controller
node_onelake_controller -->|"reads path metadata"| node_storage_client
node_onelake_controller -->|"fetches item"| node_platform_client
node_onelake_controller -->|"uses metadata types"| node_onelake_model
node_storage_client -->|"requests OneLake DFS"| node_fabric_host
node_storage_client -->|"supports item wrapper"| node_storage_wrapper
node_storage_wrapper -->|"delegates storage calls"| node_storage_client
node_playground_routes -->|"routes to SDK demos"| node_sdk_playground
node_sdk_playground -->|"reads and updates state"| node_playground_store
node_sdk_playground -->|"renders auth demo"| node_api_auth
node_sdk_playground -->|"renders frontend auth demo"| node_api_auth_frontend
node_sdk_playground -->|"renders data demo"| node_api_data
node_sdk_playground -->|"renders variable demo"| node_api_variables
node_sdk_playground -->|"renders UI demo"| node_ui_components

click node_app_entry "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/App.tsx"
click node_hello_editor "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/items/HelloWorldItem/HelloWorldItemEditor.tsx"
click node_item_crud "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/controller/ItemCRUDController.ts"
click node_navigation "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/controller/NavigationController.ts"
click node_datahub "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/controller/DataHubController.ts"
click node_platform_client "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/FabricPlatformClient.ts"
click node_platform_scopes "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/FabricPlatformScopes.ts"
click node_platform_types "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/FabricPlatformTypes.ts"
click node_onelake_view "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/components/OneLakeView/OneLakeView.tsx"
click node_onelake_controller "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/components/OneLakeView/OneLakeViewController.ts"
click node_onelake_model "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/components/OneLakeView/OneLakeViewModel.ts"
click node_storage_client "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/OneLakeStorageClient.ts"
click node_storage_wrapper "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/OneLakeStorageClientItemWrapper.ts"
click node_playground_routes "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ConditionalPlaygroundRoutes.tsx"
click node_sdk_playground "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx"
click node_playground_store "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/Store/Store.ts"
click node_api_auth "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ApiAuthentication.tsx"
click node_api_auth_frontend "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ApiAuthenticationFrontend.tsx"
click node_api_data "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ApiData.tsx"
click node_api_variables "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ApiVariableLibrary.tsx"
click node_ui_components "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/UIComponents.tsx"
click node_remote_job "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/scripts/Setup/job/JobSchedulerController.ts"
click node_remote_api "https://github.com/microsoft/fabric-extensibility-toolkit/tree/main/scripts/Setup/remote"
click node_onelake_service "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/scripts/Setup/remote/oneLakeClientService.js"
click node_token_exchange "https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/scripts/Setup/remote/tokenExchangeService.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app_entry,node_hello_editor,node_fabric_user toneBlue
class node_item_crud,node_navigation,node_datahub,node_platform_client,node_platform_scopes,node_platform_types toneAmber
class node_onelake_view,node_onelake_controller,node_onelake_model,node_storage_client,node_storage_wrapper toneMint
class node_playground_routes,node_sdk_playground,node_playground_store,node_api_auth,node_api_auth_frontend,node_api_data,node_api_variables,node_ui_components toneRose
class node_remote_job,node_remote_api,node_onelake_service,node_token_exchange,node_fabric_host toneIndigo
```

## Components

### Workload experience

- [Workload routes](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/App.tsx): `Workload/app/App.tsx`
- [Hello World editor](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/items/HelloWorldItem/HelloWorldItemEditor.tsx): `Workload/app/items/HelloWorldItem/HelloWorldItemEditor.tsx`

### Fabric integration

- [Item CRUD](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/controller/ItemCRUDController.ts): `Workload/app/controller/ItemCRUDController.ts`
- [Navigation API](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/controller/NavigationController.ts): `Workload/app/controller/NavigationController.ts`
- [Data hub dialogs](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/controller/DataHubController.ts): `Workload/app/controller/DataHubController.ts`
- [Platform API client](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/FabricPlatformClient.ts): `Workload/app/clients/FabricPlatformClient.ts`
- [Platform scopes](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/FabricPlatformScopes.ts): `Workload/app/clients/FabricPlatformScopes.ts`
- [Platform types](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/FabricPlatformTypes.ts): `Workload/app/clients/FabricPlatformTypes.ts`

### OneLake exploration

- [OneLake explorer](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/components/OneLakeView/OneLakeView.tsx): `Workload/app/components/OneLakeView/OneLakeView.tsx`
- [Explorer data logic](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/components/OneLakeView/OneLakeViewController.ts): `Workload/app/components/OneLakeView/OneLakeViewController.ts`
- [Explorer view model](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/components/OneLakeView/OneLakeViewModel.ts): `Workload/app/components/OneLakeView/OneLakeViewModel.ts`
- [OneLake storage](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/OneLakeStorageClient.ts): `Workload/app/clients/OneLakeStorageClient.ts`
- [Item storage wrapper](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/clients/OneLakeStorageClientItemWrapper.ts): `Workload/app/clients/OneLakeStorageClientItemWrapper.ts`

### SDK playground

- [Optional playground routes](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ConditionalPlaygroundRoutes.tsx): `Workload/app/playground/ConditionalPlaygroundRoutes.tsx`
- [Client SDK playground](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx): `Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx`
- [Playground state](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/Store/Store.ts): `Workload/app/playground/ClientSDKPlayground/Store/Store.ts`
- [Authentication examples](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ApiAuthentication.tsx): `Workload/app/playground/ClientSDKPlayground/ApiAuthentication.tsx`
- [Frontend auth example](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ApiAuthenticationFrontend.tsx): `Workload/app/playground/ClientSDKPlayground/ApiAuthenticationFrontend.tsx`
- [Data hub example](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ApiData.tsx): `Workload/app/playground/ClientSDKPlayground/ApiData.tsx`
- [Variable library example](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/ApiVariableLibrary.tsx): `Workload/app/playground/ClientSDKPlayground/ApiVariableLibrary.tsx`
- [UI component examples](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/Workload/app/playground/ClientSDKPlayground/UIComponents.tsx): `Workload/app/playground/ClientSDKPlayground/UIComponents.tsx`

### Remote operations

- [Job scheduling](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/scripts/Setup/job/JobSchedulerController.ts): `scripts/Setup/job/JobSchedulerController.ts`
- [Remote workload APIs](https://github.com/microsoft/fabric-extensibility-toolkit/tree/main/scripts/Setup/remote): `scripts/Setup/remote`
- [OneLake remote service](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/scripts/Setup/remote/oneLakeClientService.js): `scripts/Setup/remote/oneLakeClientService.js`
- [Token exchange](https://github.com/microsoft/fabric-extensibility-toolkit/blob/main/scripts/Setup/remote/tokenExchangeService.js): `scripts/Setup/remote/tokenExchangeService.js`

### Other components

- **Fabric user**
- **Fabric host**

## Connections

- Fabric user → Fabric host: opens workload (evidence: `README.md`)
- Fabric host → Workload routes: loads routes
- Workload routes → Hello World editor: routes to editor (evidence: `Workload/app/App.tsx`)
- Workload routes → Optional playground routes: adds optional routes (evidence: `Workload/app/App.tsx`)
- Hello World editor → Item CRUD: uses item APIs
- Item CRUD → Fabric host: gets and updates items (evidence: `Workload/app/controller/ItemCRUDController.ts`)
- Navigation API → Fabric host: calls navigation API (evidence: `Workload/app/controller/NavigationController.ts`)
- Data hub dialogs → Fabric host: opens data hub dialogs (evidence: `Workload/app/controller/DataHubController.ts`)
- Platform API client → Fabric host: calls platform APIs
- Platform API client → Platform scopes: uses scopes
- Platform API client → Platform types: uses types
- OneLake explorer → Explorer data logic: uses explorer logic
- Explorer data logic → OneLake storage: reads path metadata (evidence: `Workload/app/components/OneLakeView/OneLakeViewController.ts`)
- Explorer data logic → Platform API client: fetches item (evidence: `Workload/app/components/OneLakeView/OneLakeViewController.ts`)
- Explorer data logic → Explorer view model: uses metadata types (evidence: `Workload/app/components/OneLakeView/OneLakeViewController.ts`)
- OneLake storage → Fabric host: requests OneLake DFS (evidence: `Workload/app/clients/OneLakeStorageClient.ts`)
- OneLake storage → Item storage wrapper: supports item wrapper (evidence: `Workload/app/clients/OneLakeStorageClient.ts`)
- Item storage wrapper → OneLake storage: delegates storage calls (evidence: `Workload/app/clients/OneLakeStorageClientItemWrapper.ts`)
- Optional playground routes → Client SDK playground: routes to SDK demos (evidence: `Workload/app/playground/ConditionalPlaygroundRoutes.tsx`)
- Client SDK playground → Playground state: reads and updates state (evidence: `Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx`)
- Client SDK playground → Authentication examples: renders auth demo (evidence: `Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx`)
- Client SDK playground → Frontend auth example: renders frontend auth demo (evidence: `Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx`)
- Client SDK playground → Data hub example: renders data demo (evidence: `Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx`)
- Client SDK playground → Variable library example: renders variable demo (evidence: `Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx`)
- Client SDK playground → UI component examples: renders UI demo (evidence: `Workload/app/playground/ClientSDKPlayground/ClientSDKPlayground.tsx`)