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.

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

``cmd
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:

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

function MyComponent() {
return (
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