Playbook Gallery SDK

A lightweight frontend SDK for creating masonry grid galleries with search, board navigation, and modal views. Works for asset management, photo galleries, and media libraries.

!Version
!License
!Size

!SDK UI

Features

- Fully responsive - adapts from 2 to 8 columns based on screen size
- Search with AI toggle - regular and semantic search
- Board navigation - organize assets into categories
- Modal viewer - full-screen asset view with keyboard navigation
- Download support - one-click downloads
- Customizable - extensive configuration options
- Framework agnostic - works with vanilla JS, React, Vue, Angular
- Zero dependencies
- TypeScript support
- Accessible - ARIA labels and keyboard navigation
- Lightweight - ~15KB minified

Installation

$3

``html




















`

$3

`bash
npm install playbook-sdk
`

`javascript
import PlaybookSDK from "playbook-sdk";

const gallery = PlaybookSDK.init({
containerId: "my-gallery",
organizationSlug: "your-org-slug",
authToken: "your-auth-token",
});
`

$3

Download playbook-sdk.min.js and include it in your project:

`html

`

Quick Start

$3

Request API access at dev.playbook.com or email beta@playbook.com. You'll need:

- Organization Slug (e.g., playbook-sdk)
- Auth Token (OAuth2 bearer token)
- Board ID (optional - to scope gallery to specific board)

$3

`html



`

$3

`javascript
const gallery = PlaybookSDK.init({
containerId: "gallery-container",
organizationSlug: "playbook-sdk", // Your organization/workspace slug
authToken: "your-token-here", // Your API access token
boardId: "", // Optional: Scope gallery to specific board
enableSearch: true,
enableBoards: true,
enableModal: true,
});
`

$3

The SDK will fetch and display your assets from Playbook.

Configuration Options

`javascript
PlaybookSDK.init({
// ===== Required =====
containerId: "my-gallery", // ID of the container element
organizationSlug: "your-org-slug", // Your Playbook workspace slug
authToken: "your-auth-token", // Your API bearer token

// ===== Optional Scoping =====
boardId: "", // Scope to specific board (empty = workspace-wide)
// When boardId is set:
// - "All Assets" shows only assets from this board + nested boards
// - Board navigation shows only children of this board
// - Users cannot navigate outside this board tree

// ===== Features =====
enableSearch: true, // Show search bar with AI toggle
enableBoards: true, // Show board/collection navigation
enableModal: true, // Enable full-screen asset viewer
enableDownload: true, // Show download button in modal
enableInfo: true, // Show info button in modal

// ===== Responsive Columns =====
columnBreakpoints: {
default: 2, // Mobile (< 768px)
768: 3, // Tablet
1024: 4, // Desktop
1280: 5, // Large desktop
1536: 6, // XL screens
1800: 7, // 2XL screens
2000: 8, // Ultra-wide
},

// ===== Styling =====
theme: "light", // 'light' or 'dark' (future)
customStyles: {}, // Custom CSS overrides

// ===== Callbacks =====
onAssetClick: function (asset) {
console.log("Asset clicked:", asset);
},

onSearch: function (query) {
console.log("Search performed:", query);
},

onBoardChange: function (boardId, boardTitle) {
console.log("Board changed:", boardTitle || boardId);
},

onModalOpen: function (asset) {
console.log("Modal opened:", asset);
},

onModalClose: function () {
console.log("Modal closed");
},

onDownload: function (asset) {
console.log("Asset downloaded:", asset);
},
});
`

$3

Workspace-wide gallery:

`javascript
PlaybookSDK.init({
containerId: "gallery",
organizationSlug: "acme-corp",
authToken: "abc123...",
boardId: "", // Empty = show all workspace assets
});
`

Board-scoped gallery:

`javascript
PlaybookSDK.init({
containerId: "gallery",
organizationSlug: "acme-corp",
authToken: "abc123...",
boardId: "SddGjNcAFZThZb3yVTSvbGbe", // Only this board + children
});
`

Usage Examples

$3

`html













`

$3

`javascript
const gallery = PlaybookSDK.init({
containerId: "gallery",
organizationSlug: "my-company",
authToken: "your-token",

onAssetClick: function (asset) {
// Track analytics
gtag("event", "asset_view", {
asset_id: asset.token,
asset_name: asset.title,
});
},

onSearch: function (query) {
// Track search
console.log("User searched for:", query);
},

onBoardChange: function (boardId, boardTitle) {
// Track board navigation
console.log("Navigated to:", boardTitle);
},

onDownload: function (asset) {
// Track downloads
gtag("event", "asset_download", {
asset_id: asset.token,
});
},
});
`

$3

`javascript
PlaybookSDK.init({
containerId: "gallery",
organizationSlug: "my-company",
authToken: "your-token",

// Custom breakpoints for your design
columnBreakpoints: {
default: 1, // 1 column on mobile
640: 2, // 2 columns on small tablets
1024: 3, // 3 columns on desktop
1440: 4, // 4 columns on large screens
},
});
`

$3

`jsx
import { useEffect, useRef } from "react";
import PlaybookSDK from "playbook-sdk";

function GalleryComponent() {
const galleryRef = useRef(null);
const sdkInstance = useRef(null);

useEffect(() => {
if (galleryRef.current && !sdkInstance.current) {
sdkInstance.current = PlaybookSDK.init({
containerId: "react-gallery",
organizationSlug: "your-org-slug",
authToken: "your-auth-token",

onAssetClick: (asset) => {
console.log("Asset clicked:", asset);
},
});
}

return () => {
if (sdkInstance.current) {
PlaybookSDK.destroy("react-gallery");
sdkInstance.current = null;
}
};
}, []);

return