Microsoft Fabric Embed SDK

A JavaScript/TypeScript library for embedding Microsoft Fabric items into your own browser-based web applications.

Preview. The Fabric Embed SDK is currently in preview. Its APIs, interfaces, types, and properties may change before general availability (GA).

Features

• Easy embedding — Embed Fabric items into your browser-based web application with a few lines of code.
• Typed interaction APIs — Interact with embedded items through a strongly typed API.
• Rich event model — Subscribe to rendered, error, and user-interaction events.
• Lifecycle management — Reuse and preload embed containers for faster load times and efficient resource use.

Supported items

| Item type | Status | |-----------|--------| | KQLDashboard | Preview |

Prerequisites

Before you begin, complete the setup steps in the Microsoft Fabric Embed documentation, including the Microsoft Entra ID app registration, an active Fabric capacity, and the workspace and item you want to embed.

Installation

npm install @microsoft/fabric-embed

Authentication

The SDK never acquires tokens on your behalf — your application owns authentication. We recommend using MSAL.js with your Entra ID app registration.

Every embed session requires an accessToken. Because tokens are short-lived, also provide an accessTokenProvider callback: the SDK invokes it whenever a fresh token is needed for the requested scopes, so the embedded item keeps working without a reload. Supplying the callback is the recommended approach, since it lets the SDK refresh tokens as needed — always return a current token rather than caching one indefinitely.

Quick start

1. Initialize the EmbedManager

Register the client classes for the item types you intend to embed.

import {
  EmbedManager,
  KQLDashboardEmbedClient,
  KQLDashboardEmbedConfiguration,
  ErrorEvent,
} from '@microsoft/fabric-embed';

const embedManager = new EmbedManager({
  embedClientClasses: [KQLDashboardEmbedClient],
});

2. Embed a Fabric item

Pass the workspace and item IDs along with an initial accessToken and an accessTokenProvider callback for refresh.

const embedContainer = document.getElementById('embed-container')!;

const config: KQLDashboardEmbedConfiguration = {
  itemType: 'KQLDashboard',
  workspaceId: '<your-fabric-workspace-id>',
  itemId: '<your-fabric-item-id>',
  accessToken: { token: await acquireToken() },
  eventHooks: {
    accessTokenProvider: {
      callback: async ({ scopes }) => {
        // Acquire and return a fresh token for the requested scopes,
        // e.g. using MSAL: const result = await msal.acquireTokenSilent({ scopes });
        // Example scope: 'https://api.fabric.microsoft.com/.default'
        return { token: await acquireToken(scopes) };
      },
    },
  },
  // Additional configuration options...
};

const embedClient: KQLDashboardEmbedClient = embedManager.embed(embedContainer, config);

3. Interact with the embedded item

// Call APIs on the embedded item
embedClient.fullscreen();

// Subscribe to events
embedClient.on('error', (event: ErrorEvent) => {
  console.error(event.errorCode, event.message);
});

Support & feedback

• Documentation: Microsoft Fabric Embed documentation
• Community: Microsoft Fabric Community
• Product feedback: Microsoft Fabric Ideas