# Interactive Examples > Live demos mirrored as markdown with runnable Svelte source for LLMs and agents. **Source:** [https://markdown.svelte.page/examples](https://markdown.svelte.page/examples) **Markdown mirror:** [https://markdown.svelte.page/examples.md](https://markdown.svelte.page/examples.md) --- Each linked mirror includes the live page description, section notes, and fenced source for the demo components used on that page. ## Examples - [Live Playground](https://markdown.svelte.page/examples/playground.md) - Try an interactive @humanspeak/svelte-markdown playground with live preview, editable markdown and HTML, renderer behavior, and Svelte 5 output. (live: [https://markdown.svelte.page/examples/playground](https://markdown.svelte.page/examples/playground), tag: `DEMO`) - [Custom Renderers](https://markdown.svelte.page/examples/custom-renderers.md) - Compare renderer policies in @humanspeak/svelte-markdown, rendering the same markdown with defaults and an allow-list via allowRenderersOnly. (live: [https://markdown.svelte.page/examples/custom-renderers](https://markdown.svelte.page/examples/custom-renderers), tag: `RENDERERS`) - [HTML Filtering](https://markdown.svelte.page/examples/html-filtering.md) - Compare HTML filtering policies in @humanspeak/svelte-markdown, rendering the same markdown with unrestricted, safe-only, and blocked tag rules. (live: [https://markdown.svelte.page/examples/html-filtering](https://markdown.svelte.page/examples/html-filtering), tag: `SECURITY`) - [Caching Performance](https://markdown.svelte.page/examples/caching-performance.md) - Explore the built-in LRU TokenCache in @humanspeak/svelte-markdown, measuring cold and warm render times plus repeat-render speedups in the demo. (live: [https://markdown.svelte.page/examples/caching-performance](https://markdown.svelte.page/examples/caching-performance), tag: `PERFORMANCE`) - [Marked Extensions](https://markdown.svelte.page/examples/marked-extensions.md) - Render live KaTeX math in @humanspeak/svelte-markdown with markedKatex, using a built-in KatexRenderer component or an inline Svelte 5 snippet. (live: [https://markdown.svelte.page/examples/marked-extensions](https://markdown.svelte.page/examples/marked-extensions), tag: `EXTENSIONS`) - [Reactive Extensions](https://markdown.svelte.page/examples/reactive-extensions.md) - Build reactive marked extensions for @humanspeak/svelte-markdown in Svelte 5, dynamically rebuilding extension state without duplicate token handlers. (live: [https://markdown.svelte.page/examples/reactive-extensions](https://markdown.svelte.page/examples/reactive-extensions), tag: `EXTENSIONS`) - [Mermaid Diagrams](https://markdown.svelte.page/examples/mermaid.md) - Render live Mermaid diagrams in @humanspeak/svelte-markdown with markedMermaid, using a MermaidRenderer component or an inline Svelte 5 snippet. (live: [https://markdown.svelte.page/examples/mermaid](https://markdown.svelte.page/examples/mermaid), tag: `EXTENSIONS`) - [GitHub Alerts](https://markdown.svelte.page/examples/github-alerts.md) - Render GitHub-style alert admonitions in @humanspeak/svelte-markdown with markedAlert, using AlertRenderer components or inline Svelte 5 snippets. (live: [https://markdown.svelte.page/examples/github-alerts](https://markdown.svelte.page/examples/github-alerts), tag: `EXTENSIONS`) - [Footnotes](https://markdown.svelte.page/examples/footnotes.md) - Render academic-style footnotes in @humanspeak/svelte-markdown with markedFootnote, using built-in components or inline Svelte 5 snippet overrides. (live: [https://markdown.svelte.page/examples/footnotes](https://markdown.svelte.page/examples/footnotes), tag: `EXTENSIONS`) - [Code Formatting](https://markdown.svelte.page/examples/code-formatting.md) - Format code blocks in @humanspeak/svelte-markdown with an async marked-code-format walkTokens extension or an inline Svelte 5 code snippet override. (live: [https://markdown.svelte.page/examples/code-formatting](https://markdown.svelte.page/examples/code-formatting), tag: `EXTENSIONS`) - [Snippet Overrides](https://markdown.svelte.page/examples/snippet-overrides.md) - Customize @humanspeak/svelte-markdown output with inline Svelte 5 snippet overrides for paragraphs, headings, links, blockquotes, lists, code, and tables. (live: [https://markdown.svelte.page/examples/snippet-overrides](https://markdown.svelte.page/examples/snippet-overrides), tag: `SNIPPETS`) - [Linked Headings](https://markdown.svelte.page/examples/linked-headings.md) - Add clickable anchor links to markdown headings with @humanspeak/svelte-markdown using default output, a custom heading renderer, or Svelte 5 snippets. (live: [https://markdown.svelte.page/examples/linked-headings](https://markdown.svelte.page/examples/linked-headings), tag: `SNIPPETS`) - [LLM Streaming](https://markdown.svelte.page/examples/llm-streaming.md) - Simulate model streaming with @humanspeak/svelte-markdown: offset patches, speed and jitter controls, live metrics, and converging markdown output. (live: [https://markdown.svelte.page/examples/llm-streaming](https://markdown.svelte.page/examples/llm-streaming), tag: `STREAMING`) - [Agent Output](https://markdown.svelte.page/examples/agent-output.md) - Watch @humanspeak/svelte-markdown render streaming HTML from a simulated AI agent, with live sanitization blocking unsafe URLs and event handlers. (live: [https://markdown.svelte.page/examples/agent-output](https://markdown.svelte.page/examples/agent-output), tag: `STREAMING`)