Power BI Custom Visuals Development

Custom Power BI visuals are web components — written in TypeScript, rendered with D3/SVG/Canvas/HTML, and packaged as a single .pbiviz file — that run sandboxed inside an iframe in Power BI Desktop and the Power BI service. You build them with the pbiviz command-line tool (the powerbi-visuals-tools npm package) against the typed powerbi-visuals-api. This skill covers the full lifecycle: scaffold → develop → debug → package → certify.

This is a knowledge plugin. It generates and reviews source files (visual.ts, capabilities.json, settings.ts, pbiviz.json) and drives the local pbiviz CLI — it does not require any MCP server or cloud credentials.

Prerequisites

• Node.js (current LTS) and npm. Install the toolchain globally: npm i -g powerbi-visuals-tools@latest (provides the pbiviz command).
• A Power BI Pro or Premium Per User (PPU) account to test in the service, plus an IDE (VS Code recommended).
• Developer mode enabled — in Power BI Desktop (File ▸ Options ▸ Report settings ▸ Develop a visual, per session) or in the service (Developer settings ▸ Power BI Developer mode). See ${CLAUDE_PLUGIN_ROOT}/skills/powerbi-custom-visuals/references/environment-setup.md.
• For certification: a Partner Center account and a public/reviewable GitHub repository.

Choosing how to build

The pbiviz SDK is the most powerful path, but not always the right one. Pick the lightest approach that meets the need: SVG rendered from a DAX measure (inline sparklines/KPIs in tables, no visual to build), Deneb (declarative Vega/Vega-Lite, certified), the HTML Content visual, Charticulator (no-code), or the full pbiviz SDK (TypeScript + D3/React) when you need lifecycle control, a custom format pane, advanced interactivity, or AppSource distribution. The full decision guide and low-code patterns are in ${CLAUDE_PLUGIN_ROOT}/skills/powerbi-custom-visuals/references/building-approaches.md. The rest of this skill covers the SDK path in depth.

Deneb — declarative Vega / Vega-Lite (the no-build path)