---
title: VertiWiki — 100% Static, Single-File, Zero-Backend Markdown Wiki Engine
description: Zero node servers, zero build steps, instant client-side rendering with Marked v15, DOMPurify, multi-theme GPU switching, and built-in Answer Engine Optimization (AEO).
tags: [vertiwiki, documentation, engine, markdown-wiki, zero-backend, single-file, aeo, static-wiki]
layout: landing
contentWidth: full
---

# VertiWiki

> For the complete documentation index and agent navigation, see [llms.txt](/llms.txt).

<div class="landing-page">

<!-- =========================================================
HERO SECTION
========================================================= -->
<section class="hero-wrap">
<div class="landing-container">
<div class="hero-meta-bar">
<span class="hero-status-dot"></span>
<span>Zero Server Runtime &bull; 100% Client-Side Pipeline &bull; Standalone 4 MB Bundle</span>
</div>

<h1 class="hero-heading">
100% Static, Single-File
<span class="accent-gradient">Markdown Wiki &amp; Docs Engine</span>
</h1>

<p class="hero-lead-text">
Drop a single standalone <code>index.html</code> alongside your Markdown documents. No Node.js build pipelines, no databases, and zero rebuild commands. Instant client-side compilation with Marked v15, DOMPurify, KaTeX, Prism, Mermaid, and GPU theme switching.
</p>

<div class="hero-cta-group">
<a href="quickstart.md" class="btn-hero-primary">
<span>Get Started in 5 Minutes</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</a>
<a href="concepts/architecture.md" class="btn-hero-secondary">
<span>Explore Architecture</span>
</a>
</div>
<div class="hero-quick-command">
<span class="cmd-prefix">$</span>
<code>curl -fsSL https://github.com/Octadira/vertiwiki/releases/latest/download/vertiwiki.html -o index.html</code>
</div>
</div>
</section>

<!-- =========================================================
DOCUMENTATION HUB (6 INTERACTIVE SECTIONS)
========================================================= -->
<section class="landing-section" id="hub">
<div class="landing-container">
<span class="section-eyebrow">Documentation Hub</span>
<h2 class="section-title">Direct Access to Engineering Guides</h2>
<p class="section-desc">
Explore hands-on quickstarts, architectural blueprints, runbooks, and comprehensive API references.
</p>

<div class="hub-grid">
<a href="quickstart.md" class="hub-card">
<div class="hub-card-icon">🚀</div>
<div class="hub-card-title">
<span>Getting Started</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Jump into a 5-minute hands-on tutorial with runnable code, quick setups, and minimal configurations.</p>
</a>

<a href="concepts/architecture.md" class="hub-card">
<div class="hub-card-icon">🏛️</div>
<div class="hub-card-title">
<span>System Architecture</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Explore the zero-backend client-side pipeline, state machines, and C4 container topology.</p>
</a>

<a href="configuration/overview.md" class="hub-card">
<div class="hub-card-icon">⚙️</div>
<div class="hub-card-title">
<span>Configuration Guide</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Discover all runtime schema parameters, layout modes, i18n locales, and branding settings.</p>
</a>

<a href="operations/runbook.md" class="hub-card">
<div class="hub-card-icon">🛠️</div>
<div class="hub-card-title">
<span>Operations &amp; Runbooks</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Production hosting runbooks for Cloudflare Pages, AWS CloudFront, Vercel, and incident triage.</p>
</a>

<a href="reference/api.md" class="hub-card">
<div class="hub-card-icon">📖</div>
<div class="hub-card-title">
<span>TypeScript API Catalog</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">Verbatim typed signatures, parameter tables, plugin hooks, and boundary interfaces.</p>
</a>

<a href="concepts/workflows.md" class="hub-card">
<div class="hub-card-icon">🔄</div>
<div class="hub-card-title">
<span>Execution Workflows</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
</div>
<p class="hub-card-desc">End-to-end request flow, route dispatch, DOM sanitization, and hydration sequence diagrams.</p>
</a>
</div>
</div>
</section>

<!-- =========================================================
ARCHITECTURAL BLUEPRINT (THE 6 PILLARS)
========================================================= -->
<section class="landing-section landing-section-subtle" id="blueprint">
<div class="landing-container">
<span class="section-eyebrow">Technical Architecture</span>
<h2 class="section-title">Engineered for Permanence &amp; Speed</h2>
<p class="section-desc">
Six foundational architectural attributes that eliminate backend complexity and guarantee long-term documentation reliability.
</p>

<div class="blueprint-grid">
<div class="blueprint-card">
<span class="blueprint-num">01 / CLIENT-SIDE RUNTIME</span>
<h3 class="blueprint-title">Zero Backend &amp; Zero Build Steps</h3>
<p class="blueprint-body">
No server pipelines, no Node.js processes, and no rebuild commands upon editing Markdown. Drop <code>index.html</code> in any folder and serve statically.
</p>
<span class="blueprint-tag">DOMPurify &bull; Marked v15 &bull; SPA Router</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">02 / SINGLE-FILE BUNDLE</span>
<h3 class="blueprint-title">Standalone Single-File Distribution</h3>
<p class="blueprint-body">
Compiled via Vite 6 with <code>vite-plugin-singlefile</code>. Marked v15, DOMPurify, KaTeX, Prism, and Mermaid are all packed into a single 4 MB self-contained bundle.
</p>
<span class="blueprint-tag">Zero Node Modules &bull; Air-Gapped Portable</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">03 / SECURITY BOUNDARY</span>
<h3 class="blueprint-title">Defense-in-Depth Trust Boundary</h3>
<p class="blueprint-body">
Automated iframe sandboxing enforces <code>allow-presentation</code> while blocking frame-busting exploits. Dangerous schemes (<code>javascript:</code>, <code>vbscript:</code>) are stripped from all anchors.
</p>
<span class="blueprint-tag">Strict DOMPurify &bull; Zero-XSS Invariant</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">04 / AEO &amp; AGENT DISCOVERY</span>
<h3 class="blueprint-title">Static Bot Crawl Tree &amp; AEO</h3>
<p class="blueprint-body">
Integrated semantic crawl tree allows instant discovery by Googlebot without SSR, combined with dynamic Schema.org <code>TechArticle</code> JSON-LD and standard <code>llms.txt</code>.
</p>
<span class="blueprint-tag">AgentDocsSpec &bull; llms.txt &bull; JSON-LD</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">05 / GPU THEMING ENGINE</span>
<h3 class="blueprint-title">Decoupled Themes &amp; 11 Presets</h3>
<p class="blueprint-body">
Swaps CSS custom properties on <code>document.documentElement</code> in under 1ms without page reloads. Supports external custom theme JSON files via the <code>themes/</code> directory.
</p>
<span class="blueprint-tag">11 Presets &bull; Obsidian &bull; Editorial &bull; Nord</span>
</div>

<div class="blueprint-card">
<span class="blueprint-num">06 / IN-MEMORY SEARCH</span>
<h3 class="blueprint-title">Instant Client-Side Search (&fnof;K)</h3>
<p class="blueprint-body">
Lightning-fast in-memory client search with MiniSearch. Includes fuzzy matching, automatic document tokenization, keyboard shortcuts (<code>&fnof;K</code> or <code>/</code>), and locale scoping.
</p>
<span class="blueprint-tag">MiniSearch &bull; Sub-millisecond &bull; Zero Lag</span>
</div>
</div>
</div>
</section>

<!-- =========================================================
DETERMINISTIC 10-STEP PIPELINE
========================================================= -->
<section class="landing-section" id="pipeline">
<div class="landing-container">
<span class="section-eyebrow">Lifecycle Architecture</span>
<h2 class="section-title">Deterministic 10-Step Rendering Pipeline</h2>
<p class="section-desc">
How VertiWiki transforms raw Markdown into a sanitized, fully-interactive documentation interface in milliseconds upon navigation.
</p>

<div class="pipeline-grid">
<div class="pipeline-step">
<span class="pipeline-index">01</span>
<div class="pipeline-details">
<h4>Route Hash &amp; Query Parsing</h4>
<p>Resolves <code>#/path.md</code> or query parameter <code>?page=</code> for Server Content Negotiation rewrites.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">02</span>
<div class="pipeline-details">
<h4>Asynchronous Resource Fetch</h4>
<p>Fetches raw Markdown via <code>fetch()</code> with deterministic subfolder resolution and 404 fallback.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">03</span>
<div class="pipeline-details">
<h4>YAML Frontmatter Parsing</h4>
<p>Extracts metadata headers, document author, custom tags, and per-page theme/layout overrides.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">04</span>
<div class="pipeline-details">
<h4>beforeParse Lifecycle Hooks</h4>
<p>Processes custom macros including code tabs (<code>::: tabs</code>), expandable details, and badges.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">05</span>
<div class="pipeline-details">
<h4>Marked v15 &amp; DOMPurify</h4>
<p>Compiles CommonMark + GFM and enforces strict Zero-XSS sanitization with iframe sandboxing.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">06</span>
<div class="pipeline-details">
<h4>afterParse Lifecycle Hooks</h4>
<p>Allows plugin extensions to inspect or mutate the safe sanitized HTML before DOM mounting.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">07</span>
<div class="pipeline-details">
<h4>DOM Mounting &amp; Link Resolution</h4>
<p>Mounts HTML into <code>#verti-app</code> and transforms relative links (<code>../guide.md</code> &rarr; <code>#/guides/guide.md</code>).</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">08</span>
<div class="pipeline-details">
<h4>afterRender Plugins</h4>
<p>Initializes Prism syntax highlighting, KaTeX mathematical formulas, Mermaid diagrams, and image zooms.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">09</span>
<div class="pipeline-details">
<h4>Table of Contents &amp; Scrollspy</h4>
<p>Constructs the heading tree and registers <code>IntersectionObserver</code> for active section tracking.</p>
</div>
</div>

<div class="pipeline-step">
<span class="pipeline-index">10</span>
<div class="pipeline-details">
<h4>Search Indexing &amp; AEO Microdata</h4>
<p>Indexes the document tokens in MiniSearch and updates Schema.org <code>TechArticle</code> JSON-LD microdata.</p>
</div>
</div>
</div>
</div>
</section>

<!-- =========================================================
TECHNICAL COMPARISON MATRIX
========================================================= -->
<section class="landing-section landing-section-subtle" id="comparison">
<div class="landing-container">
<span class="section-eyebrow">Technical Comparison</span>
<h2 class="section-title">Why Developers Choose VertiWiki</h2>
<p class="section-desc">
See how VertiWiki compares with traditional static site generators and legacy wikis.
</p>

<div class="comparison-wrap">
<table class="matrix-table">
<thead>
<tr>
<th>Architectural Feature</th>
<th class="col-verti">VertiWiki Standard</th>
<th>Traditional SSGs (Docusaurus, VitePress)</th>
<th>Legacy Wikis (DokuWiki, MediaWiki)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Hosting Model</strong></td>
<td class="col-verti">100% Static (Any HTTP Server, CDN, S3, Git Pages)</td>
<td>Static build artifact (Requires CI/CD)</td>
<td>PHP / Node / Database server required</td>
</tr>
<tr>
<td><strong>Content Update Pipeline</strong></td>
<td class="col-verti">0s (Instant live refresh upon editing .md)</td>
<td>30s - 3min (CI/CD rebuild &amp; deploy)</td>
<td>Direct database write or PHP file lock</td>
</tr>
<tr>
<td><strong>Search Engine</strong></td>
<td class="col-verti">In-browser MiniSearch index (Zero latency)</td>
<td>Algolia DocSearch or pre-computed JSON</td>
<td>Server-side SQL fulltext search</td>
</tr>
<tr>
<td><strong>Diagrams &amp; Math</strong></td>
<td class="col-verti">Native client-side Mermaid &amp; KaTeX</td>
<td>Plugin dependencies &amp; build transforms</td>
<td>Server extensions (Mathoid, Graphviz)</td>
</tr>
<tr>
<td><strong>Security Surface</strong></td>
<td class="col-verti">Strict DOMPurify sandbox, zero backend vectors</td>
<td>Build-time npm dependency chain risk</td>
<td>SQL injection, PHP vulnerabilities</td>
</tr>
<tr>
<td><strong>Autonomous AI Optimization</strong></td>
<td class="col-verti">Native llms.txt + Schema.org JSON-LD</td>
<td>Manual plugin integration</td>
<td>Absent</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>

<!-- =========================================================
QUICKSTART (3 STEPS)
========================================================= -->
<section class="landing-section" id="quickstart">
<div class="landing-container">
<span class="section-eyebrow">Getting Started</span>
<h2 class="section-title">Ready in 3 Simple Steps</h2>
<p class="section-desc">
No complex Node.js build pipelines and no databases required.
</p>

<div class="quickstart-steps">
<div class="qs-step-card">
<span class="qs-step-num">STEP 01</span>
<h3 class="qs-step-title">Write Content in Markdown</h3>
<p class="qs-step-desc">
Create your <code>index.md</code>, subfolders (e.g. <code>concepts/</code>), and navigation manifest in <code>navigation.md</code>.
</p>
<div class="qs-code-box">mkdir -p my-wiki &amp;&amp; touch index.md navigation.md</div>
</div>

<div class="qs-step-card">
<span class="qs-step-num">STEP 02</span>
<h3 class="qs-step-title">Download Engine</h3>
<p class="qs-step-desc">
Download the pre-compiled standalone engine bundle directly from GitHub Releases into your root directory.
</p>
<div class="qs-code-box"><code>curl -fsSL https://github.com/Octadira/vertiwiki/releases/latest/download/vertiwiki.html -o index.html</code></div>
</div>

<div class="qs-step-card">
<span class="qs-step-num">STEP 03</span>
<h3 class="qs-step-title">Deploy &amp; Host Anywhere</h3>
<p class="qs-step-desc">
Deploy to GitHub Pages, Cloudflare Pages, S3, or test locally with any static HTTP server.
</p>
<div class="qs-code-box">npx serve . # or python3 -m http.server</div>
</div>
</div>
</div>
</section>

<!-- =========================================================
FREQUENTLY ASKED QUESTIONS
========================================================= -->
<section class="landing-section landing-section-subtle" id="faq">
<div class="landing-container">
<span class="section-eyebrow">Frequently Asked Questions</span>
<h2 class="section-title">Technical Clarifications</h2>
<p class="section-desc">
Answers to architectural questions regarding client-side execution, security, bot crawling, and performance.
</p>

<div class="faq-grid">
<details class="faq-item">
<summary class="faq-summary">
<span>How does VertiWiki work without a server-side build step?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
VertiWiki executes 100% inside the browser client. When a route is requested, it fetches the raw Markdown via <code>fetch()</code>, parses YAML frontmatter, executes pipeline hooks, compiles with Marked v15, sanitizes through DOMPurify, and mounts into the DOM in under 2ms.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>How does relative link resolution work in subfolders?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
VertiWiki incorporates an automated link transformer (<code>router.transformLinks()</code>) that computes relative directory traversal paths based on the active file path, guaranteeing that relative Markdown links and images resolve accurately across nested folders.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>How does Answer Engine Optimization (AEO) help AI crawlers?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
On every route transition, VertiWiki generates dynamic Schema.org <code>TechArticle</code> and <code>BreadcrumbList</code> microdata, serves a structured <code>llms.txt</code> index adhering to AgentDocsSpec, and offers a 1-click Markdown copy button for autonomous coding agents.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>Can VertiWiki run completely offline or on an air-gapped network?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
Yes. All styles, fonts (WOFF2), KaTeX formulas, and Mermaid libraries are bundled into the single <code>index.html</code> payload. With a lightweight static server (e.g. <code>python3 -m http.server</code>), it functions 100% offline without internet access.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>How do I create and load custom theme presets?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
Create JSON files in your <code>themes/</code> directory declaring CSS variables for light/dark palettes. Register them in <code>config.json</code> under <code>"customThemes"</code> and they become instantly selectable without code compilation.
</div>
</details>

<details class="faq-item">
<summary class="faq-summary">
<span>How do search bots index VertiWiki without server-side rendering (SSR)?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-content">
VertiWiki embeds a <strong>Static Bot Crawl Tree</strong> directly into the loading HTML shell. Search crawlers discover standard anchor links to every document immediately upon the first HTTP request.
</div>
</details>
</div>
</div>
</section>

<!-- =========================================================
BOTTOM CALL TO ACTION
========================================================= -->
<section class="landing-section">
<div class="landing-container">
<div class="bottom-cta-box">
<h2 class="bottom-cta-title">Ready to Experience Zero-Backend Documentation?</h2>
<p class="bottom-cta-desc">
Explore the embedded VertiWiki documentation portal directly in your browser or inspect the source repository on GitHub.
</p>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
<a href="quickstart.md" class="btn-hero-primary">Open Documentation Portal</a>
<a href="https://github.com/Octadira/vertiwiki" target="_blank" rel="noopener noreferrer" class="btn-hero-secondary">GitHub Repository</a>
</div>
</div>
</div>
</section>

<!-- =========================================================
RICH SITE FOOTER
========================================================= -->
<footer class="site-footer">
<div class="landing-container">
<div class="footer-grid">
<div class="footer-brand">
<h3>
<img src="assets/logo.svg" width="22" height="22" alt="VertiWiki Logo" />
<span>VertiWiki</span>
</h3>
<p>
100% static, single-file Markdown wiki and documentation engine built for 2026 and beyond.
</p>
</div>

<div class="footer-col">
<h4>Documentation</h4>
<ul>
<li><a href="quickstart.md">5-Minute Quickstart</a></li>
<li><a href="installation.md">Installation &amp; Hosting</a></li>
<li><a href="concepts/architecture.md">Architecture Overview</a></li>
<li><a href="configuration/overview.md">Configuration &amp; Themes</a></li>
</ul>
</div>

<div class="footer-col">
<h4>Engineering &amp; API</h4>
<ul>
<li><a href="reference/api.md">TypeScript API Catalog</a></li>
<li><a href="reference/boundary-interfaces.md">Boundary Interfaces</a></li>
<li><a href="guides/development.md">Development Guide</a></li>
<li><a href="configuration/security.md">Security &amp; CSP</a></li>
<li><a href="sitemap.md">Interactive Sitemap</a></li>
</ul>
</div>

<div class="footer-col">
<h4>Open Source</h4>
<ul>
<li><a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener noreferrer">MIT License</a></li>
<li><a href="llms.txt" target="_blank">llms.txt Index</a></li>
<li><a href="robots.txt" target="_blank">robots.txt</a></li>
<li><a href="Changelog.md">Release Notes</a></li>
</ul>
</div>
</div>

<div class="footer-bottom">
<div>&copy; 2026 VertiWiki Contributors. Released under the MIT License.</div>
<div>Built for 2026 and beyond &bull; Powered by VertiWiki</div>
</div>
</div>
</footer>

</div>
