React Embed SDK

React Embed SDK is currently in public preview. The API may change in future releases.

The React Embed SDK provides React components for embedding Cube analytics directly into your React applications. It offers tighter integration with React’s component model, giving you more control over styling, theming, and user interactions compared to iframe embedding.

Installation

npm install @cube-dev/embed-sdk
# or
yarn add @cube-dev/embed-sdk

Quick Start

The SDK requires TanStack Query as a peer dependency. Wrap your application with QueryClientProvider, then add CubeEmbedProvider inside it:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { CubeEmbedProvider } from "@cube-dev/embed-sdk";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <CubeEmbedProvider
        apiUrl="https://your-account.cubecloud.dev"
        sessionId="YOUR_SESSION_ID"
      >
        {/* Your embedded analytics components go here */}
      </CubeEmbedProvider>
    </QueryClientProvider>
  );
}

Authentication

The React Embed SDK uses the same session-based authentication as signed embedding. Generate a session using the Generate Session API and pass the sessionId to the provider.

Example

For a complete working implementation, see the antd-cube-embed-sdk example on GitHub.

Overview Dashboards

⌘I

Embedding

Iframe embedding

Using Core Data APIs

Installation

Quick Start

Authentication

Example

​Installation

​Quick Start

​Authentication

​Example

Installation

Quick Start

Authentication

Example