Notebook Assets Renderer

Preview DataFrame HTML and image files directly in VS Code notebooks without embedding the full asset in the .ipynb file.

Features

• Renders application/vnd.notebook-assets.dataframe+json outputs inline.
• Renders application/vnd.notebook-assets.image+json image outputs inline.
• Keeps large pandas HTML previews outside the notebook for smaller diffs and coding-agent-friendly files.
• Provides inline pan/zoom, a separate image viewer with selectable background colors, image clipboard copy, and a read-only property panel.
• Preserves pandas and Styler CSS while matching VS Code's native notebook table appearance.
• Supports notebook-relative paths and absolute file paths through the VS Code workspace file-system API.
• Removes scripts, iframes, forms, event handlers, and external resource URLs before inserting HTML into the notebook output.

Requirements

• VS Code 1.100 or later.
• A notebook output producer that emits the MIME descriptor below. In Jupyter, this is typically Python with IPython and pandas.
• A trusted workspace. The extension reads HTML files referenced by notebook outputs and is disabled in Restricted Mode.

Descriptor format

The custom MIME type is:

application/vnd.notebook-assets.dataframe+json

Its JSON value can contain:

{
  "version": 1,
  "kind": "dataframe",
  "shape": [1000, 20],
  "html": "assets/example.ipynb/result.html",
  "mtime_ns": 1750000000000000000,
  "data": {
    "parquet": "assets/example.ipynb/result.parquet"
  }
}

Only html is required by the renderer. It may be relative to the notebook's directory or an absolute Windows, UNC, or POSIX file path. Absolute file:// URIs are also accepted. Relative paths (including ./ and ../, forward or back slashes, and Unicode names) are tried from the notebook's directory first. If the file is missing there, the renderer tries the containing workspace root, which supports common kernel working-directory layouts. Literal filenames take precedence over URL-decoded relative filenames. Other URI schemes, query strings, and fragments in relative paths are rejected. If the kernel uses a different working directory, emit an absolute path; it cannot be inferred from the output.

For an image, use the image MIME type and an image path:

{
  "version": 1,
  "kind": "image",
  "image": "assets/example.ipynb/plot.png"
}

PNG, JPEG, GIF, WebP, AVIF, and BMP files are supported. The renderer also accepts path or src, and paths stored under data.image, data.png, data.jpeg, or another supported image extension key. Image and DataFrame assets use the same relative and absolute path rules.

Right-click an image to open its menu. Hold Ctrl while scrolling to enter inline viewing and zoom around the pointer; dragging with the primary mouse button beyond a short movement threshold also enters inline viewing, but a normal click does not. Drag the preview's bottom, right, or bottom-right border to resize its pane. The reset button in the image's upper-right corner restores both the image transform and the pane size.

Reload failed assets

If an image or DataFrame asset times out or fails to load, double-click its error message to reload it. Right-click the failed output for Reload Current Asset or Reload All Failed Assets in This Notebook. Batch reload retries failed outputs in the current notebook only; successful and currently loading outputs are left as they are. You can also focus a failed output and press Enter to retry, or Shift+F10 to open the reload menu.

Settings

The default notebookAssetsRenderer.language setting is auto, which follows the VS Code display language. Chinese VS Code locales use Simplified Chinese; all other locales use English. Choose zh-cn or en in Settings → Notebook Assets Renderer → Language to override automatic detection. Existing image menus update when the setting changes; reopen a separate image viewer to apply the new language there.

notebookAssetsRenderer.imagePreviewMaxHeight controls the automatic maximum height of inline image previews and defaults to 600 pixels. Preview panes use the full available width. In the default and reset state, oversized images are scaled proportionally to fit completely, centered in the pane, and use the configured maximum image height when height is the limiting dimension. Manual border resizing can temporarily exceed the automatic height; resetting the viewer restores the configured layout. The image context menu includes a shortcut to these extension settings.

Image appearance settings apply live to notebook previews and separate viewers:

Colors accept #RRGGBB, #RRGGBBAA (alpha last), or transparent. For example, #00000000 is fully transparent and #ffffff80 is half-transparent white. The paper preset uses a transparent pane, white image background and black 1px outline. Explicit color/border settings override preset values.

Open Appearance in the separate viewer to adjust any background, border, or preset. Every color field has the same swatches, rounded custom color picker, HEX input and opacity slider. Edits are saved to extension settings and survive closing/reopening the viewer and restarting VS Code. An existing workspace override is updated in place; otherwise edits are saved in user settings. Selecting a preset in the viewer applies its complete palette, including any previously customized fields. Existing explicit viewer-background settings are preserved when upgrading.

Python example

Write the rich HTML or image to disk and emit its relative or absolute path:

from pathlib import Path
from IPython.display import display

MIME = "application/vnd.notebook-assets.dataframe+json"
html_path = Path("assets/example.ipynb/result.html")
html_path.parent.mkdir(parents=True, exist_ok=True)
html_path.write_text(df._repr_html_(), encoding="utf-8")

display(
    {
        MIME: {
            "version": 1,
            "kind": "dataframe",
            "shape": list(df.shape),
            "html": html_path.as_posix(),
        },
        "text/plain": repr(df),
    },
    raw=True,
)

An image descriptor can be emitted in the same way:

IMAGE_MIME = "application/vnd.notebook-assets.image+json"

display(
    {
        IMAGE_MIME: {
            "version": 1,
            "kind": "image",
            "image": "assets/example.ipynb/plot.png",
        },
        "text/plain": "<plot.png>",
    },
    raw=True,
)

Keep a text/plain fallback so the output remains readable when the extension is unavailable.

Security and privacy

HTML and image assets are read only after Workspace Trust is granted. Active content and external resource references are removed before rendering. The extension does not execute notebook code, send telemetry, or transmit files over the network. An absolute path is resolved on the extension host: in a local VS Code window it refers to the local machine, while in Remote/SSH environments it refers to the remote machine.

Known limitations

• JavaScript and interactive HTML widgets are intentionally not supported.
• The referenced asset must remain available to the VS Code extension host.

Support

Use the Q & A section on this extension's Marketplace page for usage questions and bug reports. Include your VS Code version, operating system, workspace type, trust status, sanitized MIME descriptor, and the exact renderer error. Do not include private notebook contents or credentials.

License

Copyright © 2026 GrayF. All rights reserved. The full license is included in the extension package.