TabFlip
Toggle a file between code and rendered preview in the same tab — no second pane, no new window.
Usage
- Click the
preview icon in the editor title bar, or
- Press
Cmd+Shift+V (macOS) / Ctrl+Shift+V (Windows/Linux), or
- Run Toggle Preview / Code from the Command Palette
Code mode is the regular native editor — full syntax highlighting, formatting, and all other extensions keep working.
| Extension |
Preview |
.md, .markdown |
Rendered via markdown-it |
.adoc, .asciidoc |
Rendered via @asciidoctor/core |
.html, .htm |
Rendered live in a sandboxed iframe (the page's own scripts/styles run) |
.css |
Style gallery — common elements (headings, buttons, forms, a card) rendered with the stylesheet applied |
.scss, .sass, .less |
Compiled to CSS, then the same style gallery |
.svg |
Rendered as an image |
.csv, .tsv |
Rendered as an HTML table |
.mmd, .mermaid |
Diagram via mermaid |
.dot, .gv |
Graphviz diagram via @viz-js/viz (offline, wasm) |
.json, .jsonc, .json5 |
Collapsible tree view |
.yaml, .yml |
Collapsible tree view (multi-document files render as separate sections) |
.xml |
Collapsible tree view (attributes and text nodes included) |
.toml |
Collapsible tree view |
.ini, .cfg, .properties |
Collapsible tree view |
.env, .env.* |
Collapsible tree view (quoted values unwrapped) |
.vl.json |
Vega-Lite chart via vega-embed |
Font files (.woff, .woff2, .ttf, .otf) get a type specimen page automatically — no toggle, since a font has no "code" side to switch back to.
By default, toggling closes the tab you switched from. Uncheck TabFlip: Close Original Tab in Settings (tabFlip.closeOriginalTab) to keep both the code and preview tabs open side by side instead.
Extending to other file types
src/registry.ts maps file extensions to a preview viewType. To support a new format:
- Implement a
CustomTextEditorProvider for it under src/preview/ (the renderShellHtml/watchAndRender helpers in src/preview/webview.ts handle the boilerplate).
- Register it in
src/extension.ts.
- Add
{ viewType, extensions } to the registry.
- Add a matching
customEditors entry and extend the when clauses in package.json.
The toggle command, keybinding, and title-bar button work for any registered type automatically.
Development
npm install
npm run compile # or: npm run watch
Press F5 in VS Code to launch the Extension Development Host.
Packaging
npm run package # produces tabflip-0.0.1.vsix
code --install-extension tabflip-0.0.1.vsix
