# Embed a Gallery with the SDK

The [`playbook-sdk`](https://www.npmjs.com/package/playbook-sdk) is a lightweight, framework-agnostic frontend library that renders a responsive masonry gallery — with search, board navigation, a full-screen viewer, and downloads — backed by your Playbook workspace. It talks to the same [REST API](/docs/api.md) documented here, so anything the gallery shows, you can also drive directly over HTTP.

## Install[​](#install "Direct link to Install")

```
npm install playbook-sdk
```

Or drop it in from a CDN:

```
<script src="https://unpkg.com/playbook-sdk@latest/dist/playbook-sdk.min.js"></script>
```

## Initialize[​](#initialize "Direct link to Initialize")

Add a container element, then initialize the SDK with your organization slug and an [auth token](/docs/getting_started.md):

```
<div id="gallery"></div>
```

```
import PlaybookSDK from "playbook-sdk";



const gallery = PlaybookSDK.init({

  containerId: "gallery",

  organizationSlug: "your-org-slug",

  authToken: "your-auth-token",

});
```

That's it — a live, searchable gallery renders into `#gallery`.

## Customize[​](#customize "Direct link to Customize")

Toggle features, tune the responsive column layout, and hook into events:

```
PlaybookSDK.init({

  containerId: "gallery",

  organizationSlug: "your-org-slug",

  authToken: "your-auth-token",



  // Toggle built-in features

  enableSearch: true,

  enableBoards: true,

  enableModal: true,

  enableDownload: true,



  // Responsive columns (breakpoint in px → column count)

  columnBreakpoints: {

    default: 1,

    768: 2,

    1024: 3,

  },



  // Events

  onAssetClick: (asset) => console.log("Clicked:", asset.title),

  onSearch: (query) => console.log("Searching:", query),

  onDownload: (asset) => console.log("Downloaded:", asset.token),

});
```

## Control it programmatically[​](#control-it-programmatically "Direct link to Control it programmatically")

`init` returns a handle you can drive from your own UI:

```
gallery.refresh(); // reload assets

gallery.search("logo"); // run a search

gallery.selectBoardById("brand-assets"); // switch board

const assets = gallery.getAssets(); // current assets
```

## Style it[​](#style-it "Direct link to Style it")

The rendered markup uses `pb-`-prefixed classes you can override:

```
.pb-masonry-item img {

  border-radius: 16px !important;

}



.pb-board-btn.active {

  background-color: var(--brand-color) !important;

}
```

## Next steps[​](#next-steps "Direct link to Next steps")

* **Get access:** [request an API token](/docs/getting_started.md#how-to-get-access) for your organization.
* **Go deeper:** the SDK is powered by the [Playbook REST API](/docs/api.md) — use it directly for server-side or custom workflows.
* **Add AI:** connect an assistant to the same workspace via the [MCP server](/docs/guides/mcp.md).