SlideLoop

SlideLoop 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.

What works

• Opens *.bento.json and *.bento.html in SlideLoop 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 .slideloop/theme.json when creating new decks.
• Supports a workspace-owned export shell through slideloop.exportTemplate.
• Bundles a self-contained SlideLoop Agent Skill plus create/open language-model tools for compatible VS Code agents.
• 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.
• Disables Bento's update and live-collaboration network access and removes its Share/Live controls inside SlideLoop.
• 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.

SlideLoop runs the Bento editor as an offline component: outbound fetches, WebSockets, EventSource, XMLHttpRequest, and sendBeacon are blocked before the runtime boots. Bento's Share/Live UI and programmatic sharing entry point are disabled as well. This policy applies to the Bento editor only; the generic HTML preview intentionally continues to execute the page as authored.

HTML preview

Open an ordinary HTML file and run SlideLoop: Preview HTML, or choose Reopen Editor With… → SlideLoop 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 and reloads when the source document changes. 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

SlideLoop 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 SlideLoop: Export as Self-Contained HTML when you need a presentation that opens without the extension.

Existing *.bento.html decks remain first-class. Run SlideLoop: 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 slideloop.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 SlideLoop: Configure Workspace Theme to create and open .slideloop/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 slideloop_createDeck creates a deck, SlideLoop 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 slideloop 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:

• slideloop_createDeck (#createSlideLoopDeck) to create and open a JSON or HTML deck.
• slideloop_openDeck (#openSlideLoopDeck) to open an existing valid deck without changing it.

How saving works

For a JSON-backed deck, SlideLoop combines the open document with the selected shell in memory. When Bento saves, SlideLoop 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, SlideLoop 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.

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, SlideLoop'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

SlideLoop 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.

SlideLoop is released under the MIT License.