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.14.x of the React component includes version 3.14.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.14.x of @tableau/embedding-api-react.

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.14.0 of the @tableau/embedding-api-react library.

   npm install @tableau/embedding-api-react@~3.14.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