{"slug": "show-hn-hmr-serve-hot-loading-web-app-for-any-folder-mit", "title": "Show HN: hmr-serve, hot-loading web app for any folder (MIT)", "summary": "HMR-serve, a new open-source tool by an unnamed developer, turns any folder into a hot-loading web app with instant updates via Vite's HMR, supporting Markdown, HTML, code, CSV, and images. Released under MIT license, it aims to simplify previewing files locally, including AI agent output, without a build step.", "body_md": "HMR-serve is inspired by `npm run dev`\n\nand by [ serve](https://www.npmjs.com/package/serve). It turns any folder into a hot-loading web app, because sometimes it's nice to preview HTML, Markdown, images and other files in the browser.\n\nPoint `hmr-serve`\n\nat any folder and review it live in the browser: a VSCode-style\nfile tree on the left, a content pane on the right and **instant updates as files\nchange on disk**, powered by Vite's real dev server and\n[HMR](https://vitejs.dev/guide/features.html#hot-module-replacement) client. 🔥\n\n**HMR** (Hot Module Replacement) is the mechanism that pushes file changes into the\nbrowser over a WebSocket so the page updates without a full refresh. This project\nuses [Vite's HMR](https://vitejs.dev/guide/features.html#hot-module-replacement)\nrather than inventing its own.\n\nTip:Helpful for reviewing AI agent output (markdown/HTML docs) as it iterates.\n\n```\nnpx hmr-serve ./some-folder\n# → opens http://localhost:5183 with a live tree + content pane\n```\n\nOr run it like ** serve** without the nav, which serves a directory listing or\n\n`index.html`\n\nif present, plus rendered Markdown, CSV/TSV, all with HMR:\n\n```\nnpx hmr-serve ./some-folder --no-nav\n```\n\nFor a permanent setup, install globally and use the short `hmr`\n\ncommand:\n\n```\nnpm install -g hmr-serve\nhmr ./some-folder\nhmr ./some-folder --no-nav\n```\n\nCLI:\n\n```\nhmr [dir]              Folder to serve (default: current directory)\n  --port <port>        Port to listen on (default: 5183)\n  --open               Open the browser on start\n  --no-nav             Like serve, without the tree UI\n```\n\n**Default (nav) mode** shows a VS Code-style file tree and content pane. Supported\ntypes: **Markdown** (rendered), **HTML** (sandboxed iframe), **code** (`.css`\n\n,\n`.js`\n\n, `.ts`\n\n, `.json`\n\n, … syntax-highlighted), **text**, **CSV/TSV** (tables),\n**images** and **video**. A gear menu toggles which categories show in the tree,\nplus an **Other files** option. Choices are remembered per folder (localStorage).\n\n** --no-nav** skips the tree UI: if the folder has\n\n`index.html`\n\n(or `index.htm`\n\n),\nthat is the root page; otherwise you get a directory listing. Markdown, CSV and\nTSV are still rendered to HTML, and edits hot-reload via Vite.**No build step for your content.** Runs in Vite dev-server mode only. The app shell (a tiny Vue UI) is Vite's root; your folder is mounted alongside it via middleware +`server.fs.allow`\n\n. Your files*are*the content — nothing is compiled.**Live search index.** Built at startup with[MiniSearch](https://github.com/lucaong/minisearch)(no native deps) and kept current incrementally off file-watch events — no rebuild step.**Plain HTTP + WebSocket, cross-browser.** The browser only talks to the Node server over HTTP and Vite's HMR socket. No File System Access API, no Chromium-only APIs — works in Safari and Firefox.**Extensible renderer registry.**`.md`\n\n→`markdown-it`\n\n;`.html`\n\n→ sandboxed iframe;`.css`\n\n/`.txt`\n\n→ server-side`highlight.js`\n\n;`.csv`\n\n/`.tsv`\n\n→ HTML tables styled with GitHub markdown CSS. New types register in`src/server/renderers/`\n\nwithout touching routing.**Lightweight CLI** via:`cac`\n\n`<path>`\n\n,`--port`\n\n,`--open`\n\n,`--no-nav`\n\n.\n\nLive content updates ride Vite's HMR channel: the server pushes a custom\n`hmr-serve:update`\n\nevent and the content pane re-fetches — so Vite's client\nhandles transport and reconnection for us.\n\n**Links & URLs.** Raw HTML is served at mirror paths (`/__hmrserve/raw/<file>`\n\n),\nso **relative** links and assets inside a framed doc (`href=\"contact.html\"`\n\n,\n`<img src=\"logo.png\">`\n\n) resolve against the real folder layout. The selected file\nis reflected in a clean, bookmarkable URL under the served folder's name — e.g.\nserving `./aurora-notes`\n\ngives `/aurora-notes/docs/intro.md`\n\n. These are real\nHistory-API paths (no `#`\n\n): shareable, reload-safe and back/forward works.\nUnknown paths 404 rather than rendering the app, so a stray absolute link can't\nnest the shell inside the content pane.\n\n```\nsrc/\n  cli/       arg parsing + entry\n  server/    Vite plugin, middleware, search index, watcher, renderers\n  client/    Vue app shell (tree + content pane)\n  shared/    types shared across server and client\nfixtures/    versioned sample files used by tests\ntests/       unit · component · e2e\n```\n\nSee [CONTRIBUTING.md](/floodtide/hmr-serve/blob/main/CONTRIBUTING.md) for local setup and test expectations.", "url": "https://wpnews.pro/news/show-hn-hmr-serve-hot-loading-web-app-for-any-folder-mit", "canonical_source": "https://github.com/floodtide/hmr-serve", "published_at": "2026-07-17 12:01:45+00:00", "updated_at": "2026-07-17 12:21:31.798893+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["hmr-serve", "Vite", "MiniSearch", "markdown-it", "highlight.js", "cac"], "alternates": {"html": "https://wpnews.pro/news/show-hn-hmr-serve-hot-loading-web-app-for-any-folder-mit", "markdown": "https://wpnews.pro/news/show-hn-hmr-serve-hot-loading-web-app-for-any-folder-mit.md", "text": "https://wpnews.pro/news/show-hn-hmr-serve-hot-loading-web-app-for-any-folder-mit.txt", "jsonld": "https://wpnews.pro/news/show-hn-hmr-serve-hot-loading-web-app-for-any-folder-mit.jsonld"}}