⌘ K
Sandboxed iframe · JS / TS only · console capture

Markdown Snippet Runner

Executes JavaScript / TypeScript code blocks from a Markdown doc inside a sandboxed iframe — perfect for live tutorials and runnable READMEs.

Markdown Snippet Runner
Snippets
2
all
Runnable
2
js/ts
Active
1
js
Source
237 B
11 lines
Pick
input · markdown + code
output · 2 runnable
Sandboxed: snippets cannot access this page, your data, or (in most browsers) the network.
Quick Start

How to run Markdown snippets

Wrap JavaScript in fenced code blocks tagged js or ts — click Run to execute inside a sandboxed iframe.

  1. 01

    Fence with `js`

    Only fences tagged js / javascript / ts / typescript are runnable.

    Parsing runs through marked with GFM extensions enabled — tables, task lists, strikethrough, and fenced code blocks all match GitHub’s rendering.

    fenceGFMmarkedCommonMarklive
    lang · markdownjs · GFM
    ```js
console.log(1);
```
    loaded · GFMGFM · ready
  2. 02

    Pick + run

    The Pick dropdown lists each runnable snippet — choose one and click Run.

    Soft-break behaviour is configurable: by default a single newline becomes a space (CommonMark), toggle on for chat-style <br> insertion.

    runsoft-breaksoptionsconfiglive
    snippet · options1 · live
    ▶ run
    options applied · livelive
  3. 03

    See output

    console.log and console.error appear in the iframe panel.

    The preview is scoped under a .mde class so its CSS doesn’t bleed into the rest of the page. Output HTML is whitespace-controlled for clean diffs.

    consolepreviewscoped CSSrenderstable
    stdout · renderedcaptured · ready
    1 + 2 = 3
    rendered · liverendered
  4. 04

    Run all

    Combine every snippet into one run — separator lines between each.

    Export covers both raw Markdown and rendered HTML; downloads stream as text/markdown or text/html via Blob + object URL.

    batchclipboard.md.htmlblob
    ✓ · exportedall · done
    ✓ Running all
    shipped · ready to shipsuccess
Pro tips

Author Markdown that renders everywhere

GFM is the safe default

GitHub-Flavored Markdown is the de-facto baseline (tables, task lists, strikethrough). CommonMark is stricter but ubiquitous as a fallback.

Soft-break behaviour varies

A single newline is a space in CommonMark, a <br> in GFM. Toggle soft breaks when source matters.

Escape inside code fences

Backticks inside fenced blocks need a longer fence — three becomes four. Use ~~~ if your content has many backticks.

Anchors are slugified

GitHub lowercases, strips punctuation, and joins with hyphens. Duplicate headings get -1, -2 suffixes.

Tables need a header row

The dash row sets alignment (:---, :-:, ---:). Use Table Aligner for diff-friendly columns.

Front matter is YAML

Triple-dash blocks at the top of files are parsed by static-site generators. Use the Front-Matter Validator to catch syntax errors.

Related toolsCode ExtractorLang TaggerSyntax HighlighterEditorGitHub PreviewMD to HTML
Use Cases

When to run snippets

Tutorials, demos, education.

Live tutorials

Verify every snippet in a docs page actually runs. Render path uses marked with GFM extensions enabled (tables, task lists, strikethrough, autolinks), so what you preview matches what GitHub publishes bit-for-bit. Soft-break behaviour is configurable for chat-style vs prose Markdown.

GFM-compliant

Runnable READMEs

Embed quick-start code that readers can try inline. Pairs cleanly with the Markdown Cheatsheet for syntax you can't quite remember — callout blocks, footnotes, definition lists. Output stays diff-friendly so style-only changes don't drown out real edits in PRs.

GitHub-perfect

Code samples

Test the demo before publishing a blog post. Cross-platform safe: anchors, code fences, and tables behave identically on GitHub, GitLab, Bitbucket, and Gitea. Heading-anchor slugs follow GitHub's lowercase-and-hyphenate rules so deep links survive a docs migration.

diff-friendly

Workshops

Run every step's code without leaving the slide deck. No server roundtrip — perfect for proprietary content you can't paste into a public tool. The full marked + GFM bundle ships with the page, so it works offline once loaded.

render-stable

Spec exploration

Quickly try out a JavaScript API while reading the spec. Front matter (YAML / TOML / JSON) passes through unchanged so static-site pipelines (Jekyll, Hugo, Astro, Eleventy) read it correctly. Pair with the Front-Matter Validator to catch syntax errors before deploy.

cross-platform

Bug repros

Drop a snippet into the runner to share a minimal repro. Output is reproducible: identical input always produces identical Markdown, so doc-generation scripts can rely on it for snapshot tests and embedded into release workflows.

SEO-friendly
FAQ

Frequently asked questions

Snippets run inside a sandboxed iframe with no access to the parent page, cookies, or storage.
Tagged ts/typescript snippets run — types are ignored by the browser, so plain JS will work.
Mostly no — the sandbox blocks most fetches. Use this for pure logic, not API calls.
Use Run all to share scope; each individual run starts fresh.
No — execution happens locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!