TypeScript Playground

Write type-safe analytics code that transpiles in-browser via esbuild-wasm, then runs in the same JS sandbox — how production data teams build Next.js dashboards and Node ETL scripts.

In this workspace

What you get when you open TypeScript Studio.

Run Script

Script editor
Monaco editor with console output and chart images
File explorer
main.js / main.ts plus mounted data files
⌘/Ctrl+Enter
Run the script from the keyboard or toolbar
Cheatsheet insert
Drop common snippets into the editor in one click

Your TypeScript playgrounds

🚀

No TypeScript playgrounds yet

Opens in the TypeScript Studio workspace.

Starter template

// sales.csv loads from the Data panel
type Sale = { region: string; product: string; revenue: number; units: number };

const rows = loadCSV("sales.csv") as Sale[];
console.log("Sample row:", rows[0]);

const total = rows.reduce((sum, row) => sum + Number(row.revenue), 0);
console.log("Total revenue:", total);

const top = [...rows].sort((a, b) => Number(b.revenue) - Number(a.revenue))[0];
console.log("Top sale:", top.region, top.product, top.revenue);

await renderChart({
 type: "doughnut",
 data: {
 labels: [...new Set(rows.map((r) => r.region))],
 datasets: [{
 data: Object.values(groupBy(rows, "region")).map((group) =>
 sumBy(group as Sale[], "revenue")
 ),
 backgroundColor: ["#6366f1", "#ec4899", "#14b8a6", "#f59e0b"],
 }],
 },
});

What you'll learn

✓Typed data pipelines
✓Full-stack data courses
✓API response modeling
✓Production-style notebooks

Starter template

// sales.csv loads from the Data panel type Sale = { region: string; product: string; revenue: number; units: number }; const rows = loadCSV("sales.csv") as Sale[]; console.log("Sample row:", rows[0]); const total = rows.reduce((sum, row) => sum + Number(row.revenue), 0); console.log("Total revenue:", total); const top = [...rows].sort((a, b) => Number(b.revenue) - Number(a.revenue))[0]; console.log("Top sale:", top.region, top.product, top.revenue); await renderChart({ type: "doughnut", data: { labels: [...new Set(rows.map((r) => r.region))], datasets: [{ data: Object.values(groupBy(rows, "region")).map((group) => sumBy(group as Sale[], "revenue") ), backgroundColor: ["#6366f1", "#ec4899", "#14b8a6", "#f59e0b"], }], }, });