diff --git a/docs/embedding/sdk/authentication.md b/docs/embedding/sdk/authentication.md
index e663ecd647cfa2f82b5aac0ce7a8ab1628e125c2..a303313703c9438eef7bf854e43eef4de2a01179 100644
--- a/docs/embedding/sdk/authentication.md
+++ b/docs/embedding/sdk/authentication.md
@@ -32,7 +32,7 @@ if (auth.status === "success") {
You can customize how the SDK fetches the refresh token by specifying the `fetchRefreshToken` function in the `config` prop:
-```typescript jsx
+```typescript
/**
* This is the default implementation used in the SDK.
* You can customize this function to fit your needs, such as adding headers or excluding cookies.
@@ -59,7 +59,7 @@ const config = { fetchRequestToken };
In case you need to reload a Metabase component, for example, your users modify your application data and that data is used to render a question in Metabase. If you embed this question and want to force Metabase to reload the question to show the latest data, you can do so by using the `key` prop to force a component to reload.
-```typescript jsx
+```typescript
// Inside your application component
const [data, setData] = useState({});
// This is used to force reloading Metabase components
diff --git a/docs/embedding/sdk/collections.md b/docs/embedding/sdk/collections.md
index 9ba286f889a5f80b19911041c1c457807ce33efc..5d8701b7fb99ed7761414c0ddf45d9e09e0d1ac0 100644
--- a/docs/embedding/sdk/collections.md
+++ b/docs/embedding/sdk/collections.md
@@ -12,17 +12,18 @@ You can embed Metabase's collection browser so that people can explore items in
## `CollectionBrowser` props
-| Prop | Type | Description |
-| ------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| collectionId | `number` | The numerical ID of the collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in `http://localhost:3000/collection/1-my-collection` would be `1`. If no ID is provided, the collection browser will start at the root `Our analytics` collection, which is ID = 0. |
-| onClick | `(item: CollectionItem) => void` | An optional click handler that emits the clicked entity. |
-| pageSize | `number` | The number of items to display per page. The default is 25. |
-| visibleEntityTypes | `("question" \| "model" \| "dashboard" \| "collection")[]` | The types of entities that should be visible. If not provided, all entities will be shown. |
+| Prop | Type | Description |
+| ------------------ | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| collectionId | `number` | The numerical ID of the collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in `http://localhost:3000/collection/1-my-collection` would be `1`. If no ID is provided, the collection browser will start at the root `Our analytics` collection, which is ID = 0. |
+| onClick | `(item: CollectionItem) => void` | An optional click handler that emits the clicked entity. |
+| pageSize | `number` | The number of items to display per page. The default is 25. |
+| visibleEntityTypes | `["question", "model", "dashboard", "collection"]` | The types of entities that should be visible. If not provided, all entities will be shown. |
+
## Example embedding code with `CollectionBrowser`
```tsx
import React from "react";
-import { CollectionBrowser } from "@metabase/embedding-sdk-react"
+import { CollectionBrowser } from "@metabase/embedding-sdk-react";
export default function App() {
const collectionId = 123; // This is the collection ID you want to browse
diff --git a/docs/embedding/sdk/dashboards.md b/docs/embedding/sdk/dashboards.md
index 1878c7cd4d160de52ccd9ab151aba5414d7cb0f9..d140f81b9d9f9a2968b5979df6b5e0cc96d65c92 100644
--- a/docs/embedding/sdk/dashboards.md
+++ b/docs/embedding/sdk/dashboards.md
@@ -37,7 +37,7 @@ _\* Not available for `StaticDashboard`._
## Example embedded dashboard with `InteractiveDashboard` component
-```typescript jsx
+```typescript
import React from "react";
import {MetabaseProvider, InteractiveDashboard} from "@metabase/embedding-sdk-react";
@@ -72,7 +72,7 @@ This plugin allows you to add, remove, and modify the custom actions on the over
The plugin's default configuration looks like this:
-```typescript jsx
+```typescript
const plugins = {
dashboard: {
dashcardMenu: {
@@ -86,7 +86,7 @@ const plugins = {
`dashcardMenu`: can be used in the InteractiveDashboard like this:
-```typescript jsx
+```typescript
{% raw %}
<InteractiveDashboard
questionId={1}
@@ -103,7 +103,7 @@ const plugins = {
To remove the download button from the dashcard menu, set `withDownloads` to `false`. To remove the edit link from the dashcard menu, set `withEditLink` to `false`.
-```typescript jsx
+```typescript
const plugins = {
dashboard: {
dashcardMenu: {
@@ -119,7 +119,7 @@ const plugins = {
You can add custom actions to the dashcard menu by adding an object to the `customItems` array. Each element can either be an object or a function that takes in the dashcard's question, and outputs a list of custom items in the form of:
-```typescript jsx
+```typescript
{
iconName: string;
label: string;
@@ -130,7 +130,7 @@ You can add custom actions to the dashcard menu by adding an object to the `cust
Here's an example:
-```typescript jsx
+```typescript
const plugins: SdkPluginsConfig = {
dashboard: {
dashcardMenu: {
@@ -161,7 +161,7 @@ const plugins: SdkPluginsConfig = {
If you want to replace the existing menu with your own component, you can do so by providing a function that returns a React component. This function also can receive the question as an argument.
-```typescript jsx
+```typescript
const plugins: SdkPluginsConfig = {
dashboard: {
dashcardMenu: ({ question }) => (
@@ -177,7 +177,7 @@ Creating a dashboard could be done with `useCreateDashboardApi` hook or `CreateD
### Hook
-```typescript jsx
+```typescript
const { createDashboard } = useCreateDashboardApi();
const handleDashboardCreate = async () => {
@@ -199,7 +199,7 @@ Props:
### Component
-```typescript jsx
+```typescript
const [dashboard, setDashboard] = useState<Dashboard | null>(null);
if (dashboard) {
diff --git a/docs/embedding/sdk/introduction.md b/docs/embedding/sdk/introduction.md
index f93662a8d400e7c85e5dd5bb3250116b2cdde5e5..7eac22ff126264701f71f26064b977bc249f6a63 100644
--- a/docs/embedding/sdk/introduction.md
+++ b/docs/embedding/sdk/introduction.md
@@ -18,16 +18,16 @@ To give you and idea of what's possible with the SDK, we've put together example
-# Embedding SDK prerequisites
+# Embedded analytics SDK prerequisites
- React application. The SDK is tested to work with React 18 or higher, though it may work with earlier versions.
- [Metabase Pro or Enterprise subscription or free trial](https://www.metabase.com/pricing/).
- Metabase version 1.50 or higher.
- [Node.js 18.x LTS](https://nodejs.org/en) or higher.
-## Embedding SDK on NPM
+## Embedded analytics SDK on NPM
-Check out the [Metabase embedding SDK on NPM: [metaba.se/sdk](https://metaba.se/sdk).
+Check out the Metabase Embedded analytics SDK on NPM: [metaba.se/sdk](https://metaba.se/sdk).
## Installation
diff --git a/docs/embedding/sdk/plugins.md b/docs/embedding/sdk/plugins.md
index ae162cc54529b3cb03a6b6ab745cba3194c81423..73cc6560cb0caf34b9aca13f58eb91f8bc0c2998 100644
--- a/docs/embedding/sdk/plugins.md
+++ b/docs/embedding/sdk/plugins.md
@@ -14,7 +14,7 @@ The Metabase Embedding SDK supports plugins to customize the behavior of compone
To use a plugin globally, add the plugin to the `MetabaseProvider`'s `pluginsConfig` prop:
-```typescript jsx
+```typescript
{% raw %}
<MetabaseProvider
config={config}
@@ -32,7 +32,7 @@ To use a plugin globally, add the plugin to the `MetabaseProvider`'s `pluginsCon
To use a plugin on a per-component basis, pass the plugin as a prop to the component:
-```typescript jsx
+```typescript
{% raw %}
<InteractiveQuestion
questionId={1}
diff --git a/docs/embedding/sdk/questions.md b/docs/embedding/sdk/questions.md
index fd79ffb7c59d839cb1a0459fc170ab1243619dd8..8d0a5c02bde93155e7f00a2498c68e540c2e93cd 100644
--- a/docs/embedding/sdk/questions.md
+++ b/docs/embedding/sdk/questions.md
@@ -21,7 +21,7 @@ You can embed a static question using the `StaticQuestion` component.
The component has a default height, which can be customized by using the `height` prop. To inherit the height from the parent container, you can pass `100%` to the height prop.
-```typescript jsx
+```typescript
import React from "react";
import {MetabaseProvider, StaticQuestion} from "@metabase/embedding-sdk-react";
@@ -50,7 +50,7 @@ You can pass parameter values to questions defined with SQL via `parameterValues
You can embed an interactive question using the `InteractiveQuestion` component.
-```typescript jsx
+```typescript
import React from "react";
import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";
@@ -89,13 +89,13 @@ By default, the Embedded Analytics SDK provides a default layout for interactive
Here's an example of using the `InteractiveQuestion` component with its default layout:
-```typescript jsx
+```typescript
<InteractiveQuestion questionId={95} />
```
To customize the layout, use namespaced components within the `InteractiveQuestion` component. For example:
-```typescript jsx
+```typescript
{% raw %}
<InteractiveQuestion questionId={95}>
<div
@@ -160,7 +160,7 @@ This plugin allows you to add custom actions to
the click-through menu of an interactive question. You can add and
customize the appearance and behavior of the custom actions.
-```typescript jsx
+```typescript
// You can provide a custom action with your own `onClick` logic.
const createCustomAction = clicked => ({
buttonType: "horizontal",