@metabase/embedding-sdk-react

Metabase embedded analytics SDK

This SDK is in public beta and actively being developed. You can expect some changes to the API, especially during the beta. The SDK currently only works with a Metabase 1.51 or higher.

With Metabase's Embedded analytics SDK, you can embed individual Metabase components with React (like standalone charts, dashboards, the query builder, and more). You can manage access and interactivity per component, and you have advanced customization for seamless styling.

Learn more.

Installing Metabase Enterprise Edition

You can run Metabase Pro on a Cloud plan (with a free trial)](https://www.metabase.com/pricing).

Or run it locally. Here's a docker one-liner:

docker run -d -p 3000:3000 --name metabase metabase/metabase-enterprise:latest

You can also download the JAR, and run it like so:

java -jar metabase.jar

By default, Metabase will run at http://localhost:3000.

If you get stuck, check out our installation docs.

Installing the SDK

You can install Metabase Embedded analytics SDK for React via npm:

npm install @metabase/embedding-sdk-react

or using yarn:

yarn add @metabase/embedding-sdk-react

Which SDK version to use

The SDK version tracks with the Metabase version.

So, for example, if you're on Metabase version 1.51.x, you should use the SDK with the tag 51-stable.

See Versioning.

Docs

For how to use the SDK, check out our docs for the Embedded analytics SDK.

Development

Storybook

You can use storybook to run SDK components during local development.

When you have Metabase instance running:

yarn storybook-embedding-sdk

Initial configuration

1. Set JWT secret to be "0000000000000000000000000000000000000000000000000000000000000000" in Admin > Authentication > JWT > String used by the JWT signing key
2. Make sure "User Provisioning" setting is set to "on".
3. Set Authorized Origins to "*" in Admin > Embedding > Interactive embedding

Building locally

First you need to build the Metabase Embedding SDK for React locally:

yarn build-release:cljs

And then run:

yarn build-embedding-sdk:watch

Using the local build

After that you need to add this built SDK package location to your package.json. In this example we assume that your application is located in the same directory as Metabase directory:

"dependencies": {
"@metabase/embedding-sdk-react": "file:../metabase/resources/embedding-sdk"
}

And then you can install the package using npm or yarn:

npm install
# or
yarn

Releases

Embedding SDK package build happens with Github actions if embedding-sdk-build label has been set on the PR.

Published package will use a version from package.template.json + current date and commit short hash.