@tableau/embedding-api-react

Tableau Embedding API React Component

The Tableau Embedding API enables you to integrate Tableau visualizations into your own web applications. Add custom controls, and take advantage of modern, secure methods of authentication to interact with the visualization from your web application.

1. The Embedding API React component is built on top of the Embedding API NPM package and their major/minor versions are kept in sync. That is, version 3.13.x of the React component includes version 3.13.y of the Embedding API (patch versions may differ). If you install @tableau/embedding-api-react, you do not need to install @tableau/embedding-api at all.

2. For compatibility, you should use the latest version of the library that matches the version of Tableau you are using. Using the table found at Versions of the Tableau Embedding API, determine the version of the NPM package to install. For example, if your embedded vizzes are hosted on Tableau version 2025.2, you should use version 3.13.x of @tableau/embedding-api-react.

   Warning: If your embedded vizzes are in environments where you do not control the deployed version of Tableau, like Tableau Public or Tableau Cloud, it is recommended to import the Embedding API library from the server itself—not installing it from NPM—since the server will always provide the latest compatible version. See Where to get the Embedding API v3 library.

3. Install the version of the Tableau Embedding API React component that is compatible with the version of Tableau. For example, the following command installs v3.13.0 of the @tableau/embedding-api-react library.

   npm install @tableau/embedding-api-react@~3.13.0

4. In your React application, import TableauViz and Api from 'embedding-api-react'. Api is a re-export of the Embedding API from @tableau/embedding-api in its entirety.

5. Here is an example to embed a basic viz:

import { Api, TableauViz } from 'embedding-api-react';

function MyComponent() {
  return (
    <TableauViz
      src="https://my-server/views/my-workbook/my-view"
      toolbar="hidden"
      onFirstInteractive={async (event) => {
        const { target: viz } = event;
        const dashboard = viz.workbook.activeSheet as Api.Dashboard;
        const filters = await dashboard.getFiltersAsync();
        console.log('filters', filters);
      }}
    />
  );
}

6. For more samples, see https://github.com/tableau/embedding-api-v3-samples/tree/main/react-samples

More information

• Tableau Embedding API NPM package
• Official Tableau Embedding API Documentation