<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Octadira</title>
    <description>The latest articles on DEV Community by Octadira (@octadira).</description>
    <link>https://dev.to/octadira</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4101179%2Fc4fde73c-29c6-4065-92a8-109bfc4ce20f.jpg</url>
      <title>DEV Community: Octadira</title>
      <link>https://dev.to/octadira</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/octadira"/>
    <language>en</language>
    <item>
      <title>Why I Built VertiWiki: A Zero-Backend, Single-File Markdown Wiki Engine</title>
      <dc:creator>Octadira</dc:creator>
      <pubDate>Sun, 30 Aug 2026 09:17:52 +0000</pubDate>
      <link>https://dev.to/octadira/why-i-built-vertiwiki-a-zero-backend-single-file-markdown-wiki-engine-2m7k</link>
      <guid>https://dev.to/octadira/why-i-built-vertiwiki-a-zero-backend-single-file-markdown-wiki-engine-2m7k</guid>
      <description>&lt;p&gt;When building project documentation, knowledge bases, or internal wikis, developers typically face a choice between two paradigms:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Static Site Generators (SSGs)&lt;/strong&gt; like Docusaurus, VitePress, or MkDocs. These generate great static HTML, but require a local Node/Python runtime and a CI/CD build step every time a markdown file is updated.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Database-backed CMS Wikis&lt;/strong&gt; like Wiki.js or BookStack. These offer instant editing, but require databases, backend daemons, and ongoing server maintenance.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I wanted a third option: &lt;strong&gt;the simplicity of raw Markdown files on disk, combined with instant client-side rendering and zero backend requirements.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That led to &lt;strong&gt;&lt;a href="https://verti.wiki" rel="noopener noreferrer"&gt;VertiWiki&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Architecture: Single-File Distribution
&lt;/h2&gt;

&lt;p&gt;VertiWiki is distributed as a single standalone HTML file (&lt;code&gt;vertiwiki.html&lt;/code&gt; or &lt;code&gt;index.html&lt;/code&gt;). &lt;/p&gt;

&lt;p&gt;Using &lt;strong&gt;Vite 6&lt;/strong&gt; and &lt;code&gt;vite-plugin-singlefile&lt;/code&gt;, all application logic, routing, stylesheets, and third-party libraries are bundled directly into that one file:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Markdown Parser:&lt;/strong&gt; &lt;code&gt;marked&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Security:&lt;/strong&gt; &lt;code&gt;DOMPurify&lt;/code&gt; (sanitizing every HTML output before injection)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Syntax Highlighting:&lt;/strong&gt; &lt;code&gt;prismjs&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Math &amp;amp; Diagrams:&lt;/strong&gt; &lt;code&gt;katex&lt;/code&gt; &amp;amp; &lt;code&gt;mermaid&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Search Engine:&lt;/strong&gt; &lt;code&gt;minisearch&lt;/code&gt; (in-memory client-side fuzzy search)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Example Directory Structure
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.
├── index.html          &amp;lt;-- Standalone VertiWiki bundle
├── config.json         &amp;lt;-- Wiki title, theme, analytics config
├── navigation.md       &amp;lt;-- Sidebar navigation hierarchy
├── index.md            &amp;lt;-- Home page
└── docs/               &amp;lt;-- Your raw markdown files
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Zero Build Step for Content
&lt;/h2&gt;

&lt;p&gt;Because the engine runs in the browser, you never need to run &lt;code&gt;npm run build&lt;/code&gt; when authoring or updating content:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Edit or add any &lt;code&gt;.md&lt;/code&gt; file in your repository or server folder.&lt;/li&gt;
&lt;li&gt;Refresh the browser.&lt;/li&gt;
&lt;li&gt;The client fetches the raw Markdown via standard &lt;code&gt;fetch()&lt;/code&gt;, executes the plugin pipeline, sanitizes the HTML, and renders it dynamically on the fly.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Client-Side Offline Search
&lt;/h2&gt;

&lt;p&gt;Traditional static sites either build massive static search index JSON files at compile time or rely on third-party search APIs (like Algolia).&lt;/p&gt;

&lt;p&gt;VertiWiki indexes documents dynamically into &lt;strong&gt;MiniSearch&lt;/strong&gt; on the client. Pressing &lt;code&gt;⌘K&lt;/code&gt; or &lt;code&gt;/&lt;/code&gt; opens an instant fuzzy-search modal that scans article titles and body content with zero network calls.&lt;/p&gt;




&lt;h2&gt;
  
  
  Open Source &amp;amp; Getting Started
&lt;/h2&gt;

&lt;p&gt;VertiWiki is 100% open source under the &lt;strong&gt;MIT License&lt;/strong&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;GitHub Repository:&lt;/strong&gt; &lt;a href="https://github.com/Octadira/vertiwiki" rel="noopener noreferrer"&gt;github.com/Octadira/vertiwiki&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Live Demo &amp;amp; Docs:&lt;/strong&gt; &lt;a href="https://verti.wiki" rel="noopener noreferrer"&gt;verti.wiki&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can grab the latest &lt;code&gt;vertiwiki.html&lt;/code&gt; from the GitHub Releases, drop it into your folder of markdown files, and host it anywhere (Nginx, Caddy, Cloudflare Pages, GitHub Pages, or an S3 bucket).&lt;/p&gt;

&lt;p&gt;Let me know what you think in the comments!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>opensource</category>
      <category>markdown</category>
    </item>
  </channel>
</rss>
