ext·host Studio: build a Tableau viz extension

ext·host Studio · Tableau viz extensions

Start every extension here. Nothing green here fails in Tableau.

A live React + D3 canvas, a code pane that recompiles as you type, and 60-odd checks that catch what Tableau only tells you after the add: the fifth tile, the duplicate icon, the field you read but never declared, the chart that dies at 150 pixels.

0accounts needed to build, check and download

2024.2+Tableau Desktop, Server, Cloud

API 1.17export-safe runtime, guarded

1contract, shared with /build and the MCP

Starters each one is a complete, checked component you can gut · ★ = enhanced, guided recipe

Ranked barsSorted horizontal bars, leader called out, average line.

categoryvaluecolor

Trend lineOne measure over time, focus marker, delta badge.

datevalue

DonutShare of total with a center figure that follows hover.

categoryshare

ScatterTwo measures, optional label, alpha for overplot.

xylabel

KPI tileBig number, delta versus prior period.

valuedate

HeatmapRows by columns, one-hue ramp, cell outline on hover.

rowscolsvalue

TableRight-aligned numbers, tabular digits, sticky header.

rowscolumns

SankeyFlow between two dimensions, ribbons weighted by a measure.

fromtovalue

WaterfallRunning total across steps, rises and falls colored, total bar.

stepvalue

SunburstTwo hierarchy rings, arc angle by measure, total in the center.

inneroutervalue

RadarOne measure across spokes, filled polygon, per-axis hover.

axisvalue

BulletActual bar against a target tick, one row per label.

labelactualtarget

Bump chartRank of each series by month, lines cross as positions change.

seriesperiodvalue

Polar barBars wrapped around a circle, length by measure, one hue.

categoryvalue

Nightingale roseEqual-angle petals, area-true radius, colored per category.

categoryvalue

ChordTwo-way flows between members of one set, ribbons weighted.

sourcetargetvalue

TreemapNested blocks, tile area by measure, grouped and labeled.

groupitemvalue

StreamgraphStacked bands over months, wiggle offset, smoothed.

seriesperiodvalue

NetworkForce-laid nodes and edges, node size by weight.

fromtoweight

{ }

Paste your ComponentOr a blank one with the two metadata lines already in place.

blankfrom clipboard

Data parsed in this tab, never uploaded

▦Superstore sample500 rows, the usual dimensions and measures. Fine for every starter.

csvYour CSVDrop a file. Types are inferred; tweak them with the dropdowns.

{ }Paste rowsJSON array or tab-separated cells from a spreadsheet.

CodeAssistManifest

{ }

Nothing to draw yet.Pick a starter on the left, or paste a Component here. The two metadata lines at the top are what make it a Tableau extension.

The contract, in five lines

Line 1: // viz: {"type":"bar"}
Line 2: // fields: [ …two to four tiles… ], each with its own icon
One function Component({ data, schema, theme, fields })
Globals: React 18 and d3 v7. No imports, no network, no DOM.
Root <svg viewBox> at 100%, so it survives a 150 px zone.

Checks run the moment there is something to check.Static rules, then a render at three sizes. About a second.