AeroDeck

AeroDeck visually edits Bento presentations and previews ordinary HTML in VS Code and VS Code for the Web. Commit a clean *.bento.json document to Git, adjust it on the Bento canvas, and export a portable single-file HTML presentation when you need one.

The Marketplace extension keeps the established bpcarson.slideloop identifier so existing installations continue to receive updates. Commands, settings, tools, skills, protocols, artifacts, and the CLI use aerodeck everywhere else.

AeroDeck visual editor running in VS Code for the Web

What works

Opens *.bento.json and *.bento.html in AeroDeck by default on web and desktop VS Code.
Renders JSON sources with the bundled Bento editor shell, then saves visual changes back as JSON only.
Imports a portable Bento HTML file into *.bento.json and exports a JSON source as self-contained HTML.
Applies a repository-owned .aerodeck/theme.json when creating new decks.
Supports a workspace-owned export shell through aerodeck.exportTemplate.
Bundles a self-contained AeroDeck Agent Skill plus create/open language-model tools for compatible VS Code agents.
Ships a standalone agent CLI for Bento-specific create, validate, preview, and export operations without taking over JSON editing.
Routes Bento's Save action through VS Code, so changes appear in Source Control and can be committed or included in a pull request normally.
Keeps the presentation runtime in a sandboxed frame and validates the Bento document before writing it back.
Removes Bento's online update, collaboration, and language-download behavior; preserves offline restrictions in standalone exports.
Previews ordinary *.html and *.htm files with inline or linked JavaScript, CSS, images, fonts, and media without requiring a local server.

Use Reopen Editor With… → Text Editor whenever you want to inspect or edit the underlying JSON or HTML directly.

AeroDeck enforces an offline policy in both editors and every newly created, saved, or exported HTML deck. The bundled runtime has online updates, collaboration (including automatic joining on Save), relay asset transfers, and language downloads disabled. External scripts, styles, images, fonts, media, connections, forms, workers, WebRTC, and popups are blocked. Use embedded assets or workspace files that the HTML preview can inline. See offline enforcement and audit for scope and testing.

HTML preview

Open an ordinary HTML file and run AeroDeck: Preview HTML, or choose Reopen Editor With… → AeroDeck HTML Preview. The preview is intentionally optional, so ordinary HTML continues to open in the text editor by default. *.bento.html continues to default to the editable Bento canvas, with the generic preview available as an alternative.

The preview executes page JavaScript in a sandbox under the same mandatory offline policy and reloads when the source document changes. External URLs are blocked, including authored network calls; popup-based speaker windows are disabled. Relative linked CSS, scripts, images, fonts, and media are embedded from the workspace at preview time, including in VS Code for the Web. It is a static-file preview rather than a development server, so module graphs, runtime fetch() calls, server routes, backend APIs, and root-relative deployment paths are outside its scope.

Recommended file model

Keep the presentation itself in Git:

product-update.bento.json

AeroDeck injects that document into its internal Bento shell for visual editing. The runtime, CSS, and editor application do not become part of every source-file diff. Run AeroDeck: Export as Self-Contained HTML when you need a presentation that opens without the extension.

Existing *.bento.html decks remain first-class. Run AeroDeck: Import Bento HTML as JSON to extract their #bento-doc data into the JSON-first format.

To use a customized runtime or presentation shell, set aerodeck.exportTemplate to a safe workspace-relative HTML path. It must contain exactly one application/bento+json script with id="bento-doc" and the Bento runtime marker id="bento-rt". The setting affects JSON preview and HTML export; it never changes the committed JSON source.

Workspace theme

Run AeroDeck: Configure Workspace Theme to create and open .aerodeck/theme.json. Commit that file when the repository should share a default presentation palette and font family.

The configuration contains background, foreground, accent, surface, muted, success, warning, and danger colors. When aerodeck_createDeck creates a deck, AeroDeck copies the core colors and typography into the new document and remaps elements that used the document's previous core theme values. Existing decks are not changed retroactively, so every deck remains portable outside its original workspace.

Compatible agents are instructed to read the same file before generation and use the complete semantic palette for shapes and secondary text. The implementation uses VS Code's workspace filesystem API and works in VS Code for the Web without Node.js, Python, or a template engine.

Agent integration

Compatible VS Code agents receive the bundled aerodeck Agent Skill. It includes a complete minimal Bento document inline and instructs agents to prefer *.bento.json, so deck creation does not depend on a skill-side asset or terminal access.

The extension also contributes:

aerodeck_createDeck (#createAeroDeckPresentation) to create and open a JSON or HTML deck.
aerodeck_openDeck (#openInAeroDeck) to open an existing valid deck without changing it.

Portable agent CLI

Release builds include a standalone aerodeck-cli.js for Codex, Claude Code, and other Node.js 20+ environments. The bundle carries AeroDeck's Bento shell inside it, so it can materialize a browser-openable viewer without VS Code, a template download, or a running server.

When installed as a package, use the aerodeck command.

The CLI intentionally does not edit presentation JSON. Agents and humans should keep using their normal file tools for content changes, then use only the Bento-specific operations:

node aerodeck-cli.js create product-update.bento.json
node aerodeck-cli.js validate product-update.bento.json
node aerodeck-cli.js preview product-update.bento.json
node aerodeck-cli.js export product-update.bento.json product-update.bento.html

The CLI also exposes the canonical VS Code tool interface for agent harnesses. Tool names and input fields are shared across both surfaces:

aerodeck tools
aerodeck tool aerodeck_createDeck --input '{"filePath":"product-update.bento.json"}'
aerodeck tool aerodeck_openDeck --input '{"filePath":"product-update.bento.json"}'

Results are versioned JSON envelopes with explicit ok, recoverable, effectOutcome, error, and artifacts semantics. Since a CLI cannot open the VS Code visual editor, it reports capabilityStatus: "degraded" while still creating or validating the same deck artifact. Tool-mode paths are confined to the real current workspace and reject symbolic-link components. A future stdio MCP adapter can use this contract without defining another interface.

aerodeck tools reports both each tool's canonical VS Code schema and the effective CLI schema. In particular, the CLI marks openDeck.filePath as required and publishes an active_editor_unavailable limitation because it has no active-editor fallback. Harnesses should invoke the advertised effective inputSchema and may inspect canonicalInputSchema when comparing adapters.

create writes the built-in starter and applies .aerodeck/theme.json from the current workspace when present. preview writes a deterministic temporary HTML file and prints both its absolute path and file:// URL; a browser-capable harness can open that directly or serve it with its existing static-file support. export writes the same offline, self-contained viewer to a chosen repository path. Pass --force only when replacing a created or exported file intentionally.

How saving works

For a JSON-backed deck, AeroDeck combines the open document with the selected shell in memory. When Bento saves, AeroDeck captures the serialized HTML, validates its single #bento-doc block, pretty-prints only that document into the open *.bento.json file, and asks VS Code to save it.

For *.bento.html, AeroDeck preserves the existing behavior and writes Bento's complete serialized HTML back to the same file. The active filesystem provider decides where the save goes: local disk on desktop, or the open repository workspace in VS Code for the Web.

AeroDeck's commands in the real VS Code for the Web workbench

Both screenshots are generated by the Playwright browser test in GitHub Actions. They capture the real VS Code for the Web workbench, not UI mockups. The capture pins VS Code Web 1.100.0, AeroDeck's minimum supported version.

Development

npm install
npm run verify
npm run test:web
npm run package:vsix

The release workflows verify the package, build a VSIX, attach it to a GitHub release, and publish to the VS Code Marketplace when publishing credentials are configured.

Project relationship and license

AeroDeck is an independent interoperability extension and is not affiliated with or endorsed by the Bento project. It bundles Bento's MIT-licensed editor/runtime shell as its default preview and export template; Bento remains a separate project with its own license and notices.

AeroDeck is released under the MIT License.

Pure skill + template

skills/aerodeck-portable is a separate, self-contained skill for file-capable agents such as Codex and Work. It includes JSON Schema, example JSON, the existing offline HTML viewer/editor, and precise instructions for replacing the embedded document. No product CLI, extension, package installation, API key, or server is required to use the skill.

Copy the entire folder into your harness's skill directory, or provide its files as task context in an environment that can read and write files. Skill discovery, archive upload, and HTML preview support depend on the host; the portable contract is the files, not a host-specific integration. A chat limited to text cannot copy the bundled runtime or produce a verified HTML file.

Example request: "Use aerodeck-portable to create a five-slide project update. Deliver the editable JSON and the self-contained HTML using the bundled shell."

Keep the whole folder together, including assets/ and references/. The agent authors the JSON and replaces one safely escaped JSON block in a copy of the HTML template. Browser edits must be downloaded before closing, then used as the source for subsequent edits. The existing extension-oriented aerodeck skill is unchanged.

Maintainers regenerate bundled files from the repository's existing renderer:

npm run build:skill
npm run check:skill
npm run package:skill

The checked-in template supports use directly from a checkout. check:skill rejects stale generated assets; run build:skill after changing the renderer, schema, or example. package:skill creates dist/aerodeck-portable-skill.tar.gz for distribution. Build commands are for maintainers, not a prerequisite for agents consuming the package.