Skip to main content

Embed a Gallery with the SDK

The 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 documented here, so anything the gallery shows, you can also drive directly over HTTP.

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​

Add a container element, then initialize the SDK with your organization slug and an auth token:

<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​

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​

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​

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​

  • Get access: request an API token for your organization.
  • Go deeper: the SDK is powered by the Playbook REST API — use it directly for server-side or custom workflows.
  • Add AI: connect an assistant to the same workspace via the MCP server.