# HTML preview `htmlPreview` shows an HTML file next to itself: a preview button and a lock in the tab bar, and a preview tab that renders the file itself as the frame. It keeps up as you type. ```ts 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": "

Hello

" }), 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. ::codelet-playground{mode="workbench" extensions="html-preview" active="index.html" height="460"} ```html [index.html]

codelet

A minimal web IDE you can embed in your own app.

The script has not run.

``` ```css [style.css] body { font-family: ui-sans-serif, system-ui, sans-serif; padding: 8px 16px; } h1 { color: #e5484d; } ``` ```js [app.js] document.getElementById("when").textContent = `The script ran at ${new Date().toLocaleTimeString()}.`; ``` :: ## 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 reveals that tab rather than opening a second one. The way back is **Open Source**, next to the lock, on the preview's own tab. ## 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 `