Toolkit
← All tools

Markdown previewer

Write Markdown — with live HTML, CSS, JavaScript and PHP — and see it rendered in a big, sandboxed preview.

Raw HTML works in the Markdown tab. CSS, JS & PHP run in a sandboxed preview, so they can't affect this page. Your work is saved in this browser.

PHP runs in your browser via WebAssembly — the first run downloads the engine (~5 MB), then it's cached. Pure PHP only: no database, filesystem, sessions or network. The PHP output appears below the rendered Markdown.

How to use the Markdown previewer

  1. Write Markdown in the first tab — headings, lists, tables and fenced code blocks all render, and raw HTML passes straight through untouched.
  2. Open the CSS and JS tabs to style the preview and add behavior. Your script runs inside the preview, and if it throws, the error message is printed at the bottom of the preview instead of failing silently.
  3. Use the PHP tab for server-style snippets: the first run fetches a ~5 MB WebAssembly PHP engine (cached afterwards), and your script's output appears below the rendered Markdown.
  4. The preview refreshes about a quarter of a second after you stop typing. Click ⛶ Fullscreen to give it the whole screen — Esc exits.
  5. Export with Copy rendered HTML (the rendered body, PHP output included) or Download .html (a complete standalone page with your CSS and JS bundled in). Your work autosaves to this browser as you type.

Common uses

  • Preview a GitHub README before you push — check that tables, code blocks and nested lists actually look the way you meant.
  • Prototype a small HTML / CSS / JS idea with zero setup — a scratchpad that keeps your last state between visits.
  • Test a PHP snippet without installing PHP: a date format, a string function, a quick loop — the engine runs entirely in your browser.
  • Draft a formatted document in Markdown, style it with CSS, then download a standalone .html you can send or publish anywhere.
  • Teach or learn web basics: Markdown, styling and scripting side by side with instant feedback.

Tips & limitations

  • Autosave uses this browser's localStorage: drafts survive reloads and restarts, but they don't sync to other devices or private windows, and Reset replaces everything with the sample. Copy anything precious out.
  • The preview iframe is sandboxed with no same-origin access — your JS can't touch this site, and storage APIs like localStorage are blocked inside the preview, so snippets that depend on them won't run there.
  • PHP here is pure computation: echo, strings, arrays, dates and math all work, but there's no filesystem, database, sessions or network — so file_get_contents() on a URL or a MySQL call won't.
  • PHP output is cached until the code changes — a snippet printing the current time won't tick forward on its own. Edit any character to force a fresh run.

How it's built & why it's safe

The editors use CodeMirror for syntax highlighting; Markdown is rendered with the open-source marked library and shown with your CSS and JavaScript inside a sandboxed <iframe> (srcdoc, no same-origin access) so your code runs but can't touch this page. PHP is executed right in your browser with php-wasm (WebAssembly), loaded only when you use the PHP tab. Everything happens locally — nothing is uploaded — and your work is saved in localStorage.

Related tools: Word Counter · Diff Checker · Lorem Ipsum

Frequently asked questions

Can I add CSS and JavaScript?

Yes — use the CSS and JS tabs; both run with your Markdown inside a sandboxed preview, so they can't affect the rest of the site. A small base stylesheet keeps the preview readable, and your CSS loads after it, so your rules win.

Can it really run PHP?

Yes. The PHP tab executes your code in the browser using php-wasm, a WebAssembly build of PHP — the first run downloads the engine (about 5 MB), then it's cached. It's pure PHP: no database, filesystem, sessions or network.

Does raw HTML work in the Markdown?

Yes — HTML written in the Markdown tab renders as-is, which is handy for anything Markdown can't express, like custom containers or embeds. Mixing Markdown and HTML in one document is fine.

How do I get the HTML out?

Copy rendered HTML puts the rendered body on your clipboard, including any PHP output. Download .html saves a complete standalone page with your CSS and JavaScript bundled in, ready to open or host.

Is anything I write uploaded?

No — rendering, your scripts and even PHP all execute in your browser, and drafts are stored in this browser's localStorage. Nothing is sent to a server; clearing site data removes your drafts.

Why doesn't localStorage work inside the preview?

The preview is a sandboxed iframe without same-origin access, so browser storage is blocked inside it by design — that isolation is what makes it safe to run arbitrary code. DOM scripting, timers and alert() all work normally.

Which Markdown features are supported?

It uses the marked renderer: all core Markdown plus GitHub-style tables and fenced code blocks. GitHub-specific extras such as footnotes, callout alerts and Mermaid diagrams aren't supported — use raw HTML when you need more.