HTML preview

htmlPreview shows an HTML file in a window floating over the workbench: a preview button in the tab bar, and a window that renders the file itself as the frame, with a lock in its own bar. The file keeps the whole pane and the preview keeps up as you type.

import { htmlPreview } from "codelet/extensions/html";
import { FileSystem, Workbench } from "codelet/workbench";

const workbench = new Workbench({
  parent: document.getElementById("app")!,
  fs: new FileSystem({ "/index.html": "<h1>Hello</h1>" }),
  extensions: [htmlPreview],
});

htmlPreview takes no options. There's no renderer to fetch — an HTML file previews as itself.

#Try it

Open the preview over index.html with the eye button, then click the lock to let its script run.

#Opening a preview

The same four ways in as the Markdown preview, running Open Preview: the tab bar, a Markdown row's context menu in the explorer, a tab's own context menu, and the command palette (HTML: Open Preview). Running it on a file already showing a preview brings that window to the front rather than opening a second one. The file stays where it was — the preview floats over the pane rather than replacing what's in it. On a narrow screen there's nowhere to put a window, so the preview opens as a tab in the pane instead.

#The lock

A page is a program, so a preview opens restricted: the frame is built without scripts, and nothing in the document runs — no <script>, no onclick, no javascript: link. The lock button in the preview window's own title bar toggles that for the file it's over, and the frame rebuilds with scripts allowed.

Trust lasts as long as the extension is running: stopping and starting it from the Extensions view restricts every file again.

A restricted page with something to run says so along its foot, so a script that's blocked isn't mistaken for a preview that's broken. A page with no scripts at all previews identically either way, and says nothing.

#Stylesheets and scripts from the tree

A frame has no origin and the workbench serves no files, so a relative href in a previewed page names nothing a browser could fetch. Every <link rel="stylesheet"> and <script src> that points at a path — /src/styles.css, ./app.js — is answered out of the workbench's own tree instead, carrying that file's text as a data: URI. Editing the stylesheet in another tab redraws the preview.

Only .css, .js and .mjs are answered this way, being the files the tree holds the whole of. An image is not — what a media file holds in a workbench is where the image is, a URL or a data: URI, the same thing media reads — so write that address into the <img src> and it works as it stands.

#Not the same as the HTML language server

htmlPreview only shows a file's contents — it doesn't touch the editor. For diagnostics, completion and hover while editing the markup itself, use the HTML language server instead. The two are independent and can run together.