Trello Power-Up TypeScript SDK

Features

Type-Safe

Full TypeScript support with complete type definitions for all Trello Power-Up capabilities.

Builder Pattern

Intuitive builder pattern for Power-Up initialization with method chaining.

Auto-Injection

Automatic injection of Trello Power-Up client script, no manual script tags needed.

Getting Started

Installation

npm install trello-powerup

Basic Usage

import { TrelloPowerUpBuilder } from 'trello-powerup';

const powerUp = new TrelloPowerUpBuilder({
  appKey: 'YOUR_APP_KEY',
  appName: 'Your PowerUp Name'
})
.onCardBadges(async (t) => {
  return [{
    text: 'Priority',
    color: 'blue'
  }];
})
.onCardButtons((t) => [{
  icon: './assets/icon.svg',
  text: 'Settings',
  callback: (t) => t.popup({
    title: 'Settings',
    url: './settings.html'
  })
}])
.initialize();

Using in Popups

// settings.html
import { TrelloIFrame } from 'trello-powerup';

const iframe = new TrelloIFrame({
  appKey: 'YOUR_APP_KEY',
  appName: 'Your PowerUp Name'
});

// Access card data
const data = await iframe.getCardData('myKey');

// Update card data
await iframe.setCardData('myKey', newValue);

// Close popup
iframe.closePopup();

API Reference

TrelloPowerUpBuilder

Main class for initializing your Power-Up with a fluent interface.

onCardBadges(callback)
onCardButtons(callback)
onCardBackSection(callback)
onBoardButtons(callback)
initialize()

TrelloIFrame

Helper class for working with Trello's iframe capabilities.

getCardData(key)
setCardData(key, value)
getSharedData(key)
setSharedData(key, value)
closePopup()