Vscode Extension Video Script
Video Script: Ginexys VS Code Extension — Build in Public
_Format: talking head + screen recording, ~8-10 min_ _Tone: direct, honest, no hype_
HOOK (0:00 – 0:30)
[SCREEN: VS Code with a CSV file open]
I built a table editor that runs in the browser. Fast, free, offline. People used it. And then someone asked: "Can I use this without leaving VS Code?"
That question sent me down a two-week rabbit hole. This is what I learned — and what broke along the way.
WHAT I BUILT (0:30 – 1:30)
[SCREEN: ginexys.com tools overview — TAFNE, PDF Processor, Schema Editor]
Quick context. Ginexys is a suite of developer tools I've been building in public.
TAFNE — a table IDE. You paste CSV, JSON, Markdown, SQL, HTML — it renders an editable table. You can join tables, run lookups, validate data. Three modes: table editor, node editor for data pipelines, and lab mode for analysis.
PDF Processor — geometry-based text and table extraction. Runs entirely offline. No ML model weights, no backend.
Schema Editor — a node-and-wire canvas for circuit diagrams, ERDs, FSMs. Exports SVG, SQL DDL, Mermaid, XState.
All browser-based. All offline-capable. The question was: how do I bring these into VS Code without rewriting everything?
THE ARCHITECTURE DECISION (1:30 – 3:00)
[SCREEN: Draw simple diagram — Extension Pack → core + tafne + pdf + schema]
The naive approach: wrap the HTML in a webview, done. That doesn't work. I'll explain why in a second.
The approach that actually works: a thin shell.
One core extension handles auth, routing, and shared utilities. Three satellite extensions — one per tool — each registers as a Custom Editor for its file types. An Extension Pack bundles all four so you can install them together with one click.
The key insight is that VS Code webviews are basically browsers. The tool HTML loads directly as the webview document — no iframe, no extra server. The extension rewrites paths at open time and injects a bridge script. The tool code doesn't know it's in VS Code.
[SCREEN: Show vscode.openWith call + webview loading the tool]
WHY NAIVE DOESN'T WORK (3:00 – 4:30)
[SCREEN: DevTools console showing blank white panel + CSP errors]
Here's what breaks when you naively load web tool HTML in a VS Code webview.
First problem: path resolution. My tool has scripts like src="src/js/tifany.js". In a browser, that resolves relative to the HTML file. In a VS Code webview, there's no base URL — the browser has no idea what to do with that path. Blank panel.
Second problem: CDN scripts. My tool loads jQuery, Bootstrap, Monaco, GSAP from CDN. VS Code webviews have a strict Content Security Policy. CDN domains need to be explicitly whitelisted. None of them were. Every script blocked.
Third problem — and this one was subtle. My tools detect embedding by checking window.parent !== window. In a normal iframe, that's true. In a VS Code webview, there's no parent frame. That check is always false. So my bridge.js installed silent no-ops. Everything appeared to work. Nothing actually worked.
The fix for each:
- HTML rewriter that converts all paths to
vscode-webview://URIs at open time - CSP meta tag with explicit CDN sources
- New
vsc-bridge.jsthat usesacquireVsCodeApi()instead of parent frame detection
LIVE DEMO (4:30 – 6:30)
[SCREEN: VS Code with extension running — F5 Extension Development Host]
Let me show you what it actually looks like.
[ACTION: Right-click a CSV file in Explorer]
Right-click on any CSV file — "Open with Table Formatter and Node Editor" is in the context menu. Click it.
[ACTION: TAFNE opens in panel with table rendered]
The table renders. The CSV data is loaded. I'm in VS Code, not in a browser.
[ACTION: Open the same file in VS Code text editor beside it]
Now I'll open a split view — VS Code text editor on the left, TAFNE on the right.
[ACTION: Type a new row in the text editor, pause]
Watch what happens when I add a row... pause... and the table updates automatically. That's the live sync. 300ms debounce so it doesn't fire on every keystroke.
[ACTION: Open a .md file with fenced CSV blocks]
Here's something I didn't plan but ended up loving. Open a Markdown file with fenced code blocks tagged as csv and json...
[ACTION: Show two sheets appearing in TAFNE]
Two sheets. Each fenced block becomes a live table. Edit the CSV fence in VS Code — Sheet 1 updates. Edit the JSON fence — Sheet 2 updates. This is basically a data notebook built on top of a Markdown file.
[ACTION: Command Palette → "Ginexys: Open Node Editor"]
And the mode commands. Command Palette, search "Ginexys" — you get the full list. Open Node Editor, Open Lab Mode, Open Electrical Schematic, Extract Text from PDF. Each one opens the right tool in the right mode immediately.
WHAT BROKE (6:30 – 7:30)
[SCREEN: Code — the 10,000 sheet bug]
I want to be honest about what went wrong, because it's a useful lesson.
The first version of live sync called parseInput() on every document change. parseInput() always calls addSheet(). After 30 seconds of typing, I had 400 sheet tabs. After a few minutes, thousands.
The fix: don't call addSheet() at all during live sync. Patch the existing sheet objects in-place. Call generateTabs() directly. The sheet count stays stable.
The broader lesson: when you add live sync to a tool that wasn't designed for it, you have to understand where state is created, not just where it's rendered.
[SCREEN: Show the ginexysUpdateSheets function]
WHAT'S NEXT (7:30 – 8:30)
[SCREEN: Architecture diagram — Supabase + Cloudflare + Lemon Squeezy]
The extension works offline. But the long-term plan is a cloud backend: Supabase for auth, Cloudflare Workers as an API gateway, Lemon Squeezy for billing.
The paid tier unlocks two AI MCP tools — AI-powered PDF extraction using Docling, and GINEX Agent for schema analysis. When you're in VS Code with Copilot or Cursor, those tools become available to the AI automatically.
The free tier — table formatting, geometry PDF extraction, schema editing — stays free, offline, no account required.
That's the model I'm calling SiaS: Software-in-a-Service. The software is genuinely useful on its own. The service layer adds intelligence on top.
[SCREEN: VS Code extension in Marketplace — coming soon]
The Marketplace listing is coming soon. Subscribe to get notified when it drops.
CLOSE (8:30 – END)
[CAMERA: talking head]
If you're building web developer tools, I'd encourage you to think about VS Code early. Not as a port — as a shell. Your tool code doesn't need to change. The extension is just a distribution layer that removes the context switch.
The fence block notebook thing? I didn't design that. It emerged from the architecture. That's the kind of thing that happens when you build in public and keep pushing on what the tool can do.
Links in the description. Follow along at @GINEXYS. And if you're building something similar, I'd genuinely like to see it.
B-ROLL NOTES
- Screen recording of the blank white panel moment (before the fix)
- Side-by-side split view with CSV text editor + TAFNE live updating
- Command Palette with all 11 Ginexys commands visible
- The 400-tab screenshot (before debounce fix)
- Fenced block → multi-sheet demo with the test.md file
- Architecture diagram (hand-drawn or Excalidraw style fits the build-in-public tone)
THUMBNAIL CONCEPTS
Option A: VS Code screenshot with TAFNE table rendered, "Your web tool → VS Code in one weekend" text Option B: Split screen — browser tab vs VS Code panel, same tool Option C: The 10,000 sheet screenshot with "I broke it. Here's the fix."