Previews and images

See what you write: Markdown, web pages, SVG, images.

Show the preview

• Ctrl+Shift+V (or View › Preview) shows the preview of the open file to the right of the editor: Markdown, web page (HTML or PHP), SVG. The same shortcut hides it.
• Resize: drag the bar between the code and the preview (double-click: default width).
• Detach: the button at the top of the preview (or View › “Detach Preview into a Window”) opens it in its own window, on your second screen if you have one: one screen to code, the other to look. Closing that window puts the preview back in the editor.

Markdown preview

• It understands all the common syntax: headings, nested lists, task lists, tables, quotes, alerts, collapsible sections, footnotes, basic HTML, LaTeX formulas, Mermaid diagrams, emojis, automatic table of contents, code block highlighting. See the Markdown cheat sheet.
• Images: web images show; so do images from your folder (![](./images/photo.png), path relative to the file). A setting lets you not load remote images.
• Links: a link to a section (#heading) scrolls to the heading; a link to a neighbouring file (./other.md) opens it in Scriptorium; a web link opens in your browser.
• The text is interpreted without running any code: HTML is filtered (no scripts, frames or forms).

Web page preview (HTML, PHP) with their CSS

• Open a site folder, then an .html or .php file and show the preview: the page appears as a browser would show it, with its CSS, images and scripts found in the folder.
• CSS files are found even when paths do not match: exact path first, then the page folder and its parents (handy for /css/style.css written from the site root), then a file of the same name if it is unique in the project.
• Live: the page updates as you type, without saving. A CSS change applies without reloading the page.
• From a CSS or JS file: the preview shows the project page that uses it.
• PHP: .php files are run with the PHP from ServBay (or the one given by the SCRIPTORIUM_PHP variable). Save the file to see the result.
• CSS picker: the “CSS” button at the top of the preview lists all CSS files of the project (the ones used by the page are marked). Tick or untick them to try them on the page, without touching your files. Theme files (theme-*.css) exclude each other: choosing theme-ostavae.css replaces the current theme and updates data-theme. “Reset” puts the page back the way the site builds it.
• Full PHP sites: you can open a parent folder (for example the one holding all your sites): Scriptorium finds the site root (the folder with .htaccess, .env, composer.json or package.json) and uses it as the web root. Redirects, sessions (login) and headers that normally forbid showing a page in a frame are handled for the preview.
• Phone, tablet, laptop: the menu at the top of the preview chooses the device (Responsive, Phone 390×844, Tablet 820×1180, Laptop, Desktop); the ⟲ button rotates it; the page scales to fit the panel. The width triggers media queries like on a real device.
• The ↻ (reload) and ↗ (open in your browser) buttons are on the right. The page is only visible on your PC, and sensitive files (.env, .sql, keys…) are never served.

SVG preview

• In an .svg file open as text, the preview shows the drawing live. And clicking an SVG in the explorer opens it as an image (the “Open as text” button shows the code).

Open images

• PNG, JPG, GIF, WebP, BMP, ICO, AVIF and SVG open in a tab (explorer, drag and drop, File › Open).
• Zoom: − and + buttons, or Ctrl+wheel; “Fit” to fit the window; “1:1” for real size. Background: checkerboard (to see transparency), dark or light. The image size and file size show on the right.
• If the image is changed elsewhere, it reloads by itself.