[{"data":1,"prerenderedAt":569},["ShallowReactive",2],{"guide-live-reload-html-workflow":3},{"id":4,"title":5,"body":6,"date":560,"description":561,"extension":562,"meta":563,"navigation":564,"path":565,"readingTime":193,"seo":566,"stem":567,"__hash__":568},"guides\u002Fguides\u002Flive-reload-html-workflow.md","Live Reload HTML Development Tips",{"type":7,"value":8,"toc":550},"minimark",[9,13,18,21,29,35,56,59,63,68,71,106,109,120,127,259,263,266,269,330,336,340,343,391,394,398,401,407,475,488,498,524,530,534,537,546],[10,11,12],"p",{},"When prototyping HTML layouts or building static pages, waiting for a full build pipeline to rebuild on every change slows you down. Live reload tools watch your files and automatically refresh the browser the moment you save, giving you near-instant feedback without configuring Webpack, Vite, or any bundler. This is especially valuable for designers, content authors, and developers who want to focus on markup and styling rather than tooling.",[14,15,17],"h2",{"id":16},"how-live-reload-works","How Live Reload Works",[10,19,20],{},"Live reload systems consist of two components: a file watcher and a browser refresh mechanism.",[10,22,23,24,28],{},"The ",[25,26,27],"strong",{},"file watcher"," monitors a directory for changes using OS-level file events (inotify on Linux, FSEvents on macOS, ReadDirectoryChangesW on Windows). When a file is saved, the watcher detects the event and sends a signal.",[10,30,23,31,34],{},[25,32,33],{},"refresh mechanism"," communicates with the browser. Two approaches exist:",[36,37,38,50],"ul",{},[39,40,41,44,45,49],"li",{},[25,42,43],{},"Full page reload:"," The server sends a WebSocket message to a client-side script, which calls ",[46,47,48],"code",{},"location.reload()",". Simple and reliable but loses application state (scroll position, form inputs, expanded sections).",[39,51,52,55],{},[25,53,54],{},"Hot replacement (HMR):"," The server sends only the changed file, and the client replaces it without a full reload. More complex but preserves state. True HMR requires a bundler to module-map the dependencies.",[10,57,58],{},"For pure HTML prototyping, full page reload is sufficient and much simpler to set up.",[14,60,62],{"id":61},"lightweight-live-reload-tools","Lightweight Live Reload Tools",[64,65,67],"h3",{"id":66},"browsersync","BrowserSync",[10,69,70],{},"BrowserSync is the most feature-rich standalone option. It creates a local dev server, injects a reload script into your HTML, and watches files for changes:",[72,73,78],"pre",{"className":74,"code":75,"language":76,"meta":77,"style":77},"language-bash shiki shiki-themes github-light github-dark","npx browser-sync start --server --files \"*.html, css\u002F*.css, js\u002F*.js\"\n","bash","",[46,79,80],{"__ignoreMap":77},[81,82,85,89,93,96,100,103],"span",{"class":83,"line":84},"line",1,[81,86,88],{"class":87},"sScJk","npx",[81,90,92],{"class":91},"sZZnC"," browser-sync",[81,94,95],{"class":91}," start",[81,97,99],{"class":98},"sj4cs"," --server",[81,101,102],{"class":98}," --files",[81,104,105],{"class":91}," \"*.html, css\u002F*.css, js\u002F*.js\"\n",[10,107,108],{},"Key features:",[36,110,111,114,117],{},[39,112,113],{},"Multi-device sync: scrolls, clicks, and form inputs are mirrored across connected devices",[39,115,116],{},"Network access: other devices on your LAN can connect via your IP address",[39,118,119],{},"No configuration file required for simple setups",[10,121,122,123,126],{},"For more control, create a ",[46,124,125],{},"bs-config.js",":",[72,128,132],{"className":129,"code":130,"language":131,"meta":77,"style":77},"language-javascript shiki shiki-themes github-light github-dark","module.exports = {\n  server: {\n    baseDir: '.\u002Fapp',\n    routes: {\n      '\u002Fassets': '.\u002Fdist\u002Fassets',\n    },\n  },\n  files: ['app\u002F**\u002F*.html', 'app\u002Fcss\u002F*.css'],\n  notify: false,\n  open: false,\n  port: 3000,\n}\n","javascript",[46,133,134,153,159,171,177,191,197,203,221,232,242,253],{"__ignoreMap":77},[81,135,136,139,143,146,150],{"class":83,"line":84},[81,137,138],{"class":98},"module",[81,140,142],{"class":141},"sVt8B",".",[81,144,145],{"class":98},"exports",[81,147,149],{"class":148},"szBVR"," =",[81,151,152],{"class":141}," {\n",[81,154,156],{"class":83,"line":155},2,[81,157,158],{"class":141},"  server: {\n",[81,160,162,165,168],{"class":83,"line":161},3,[81,163,164],{"class":141},"    baseDir: ",[81,166,167],{"class":91},"'.\u002Fapp'",[81,169,170],{"class":141},",\n",[81,172,174],{"class":83,"line":173},4,[81,175,176],{"class":141},"    routes: {\n",[81,178,180,183,186,189],{"class":83,"line":179},5,[81,181,182],{"class":91},"      '\u002Fassets'",[81,184,185],{"class":141},": ",[81,187,188],{"class":91},"'.\u002Fdist\u002Fassets'",[81,190,170],{"class":141},[81,192,194],{"class":83,"line":193},6,[81,195,196],{"class":141},"    },\n",[81,198,200],{"class":83,"line":199},7,[81,201,202],{"class":141},"  },\n",[81,204,206,209,212,215,218],{"class":83,"line":205},8,[81,207,208],{"class":141},"  files: [",[81,210,211],{"class":91},"'app\u002F**\u002F*.html'",[81,213,214],{"class":141},", ",[81,216,217],{"class":91},"'app\u002Fcss\u002F*.css'",[81,219,220],{"class":141},"],\n",[81,222,224,227,230],{"class":83,"line":223},9,[81,225,226],{"class":141},"  notify: ",[81,228,229],{"class":98},"false",[81,231,170],{"class":141},[81,233,235,238,240],{"class":83,"line":234},10,[81,236,237],{"class":141},"  open: ",[81,239,229],{"class":98},[81,241,170],{"class":141},[81,243,245,248,251],{"class":83,"line":244},11,[81,246,247],{"class":141},"  port: ",[81,249,250],{"class":98},"3000",[81,252,170],{"class":141},[81,254,256],{"class":83,"line":255},12,[81,257,258],{"class":141},"}\n",[64,260,262],{"id":261},"live-server-vs-code-extension","Live Server (VS Code Extension)",[10,264,265],{},"If you use VS Code, the Live Server extension provides one-click live reload. Right-click an HTML file and select \"Open with Live Server.\" It starts a local server on port 5500 with file watching built in.",[10,267,268],{},"Configuration options in VS Code settings:",[72,270,274],{"className":271,"code":272,"language":273,"meta":77,"style":77},"language-json shiki shiki-themes github-light github-dark","{\n  \"liveServer.settings.root\": \"\u002Fapp\",\n  \"liveServer.settings.port\": 3000,\n  \"liveServer.settings.wait\": 500,\n  \"liveServer.settings.file\": \"index.html\"\n}\n","json",[46,275,276,281,293,304,316,326],{"__ignoreMap":77},[81,277,278],{"class":83,"line":84},[81,279,280],{"class":141},"{\n",[81,282,283,286,288,291],{"class":83,"line":155},[81,284,285],{"class":98},"  \"liveServer.settings.root\"",[81,287,185],{"class":141},[81,289,290],{"class":91},"\"\u002Fapp\"",[81,292,170],{"class":141},[81,294,295,298,300,302],{"class":83,"line":161},[81,296,297],{"class":98},"  \"liveServer.settings.port\"",[81,299,185],{"class":141},[81,301,250],{"class":98},[81,303,170],{"class":141},[81,305,306,309,311,314],{"class":83,"line":173},[81,307,308],{"class":98},"  \"liveServer.settings.wait\"",[81,310,185],{"class":141},[81,312,313],{"class":98},"500",[81,315,170],{"class":141},[81,317,318,321,323],{"class":83,"line":179},[81,319,320],{"class":98},"  \"liveServer.settings.file\"",[81,322,185],{"class":141},[81,324,325],{"class":91},"\"index.html\"\n",[81,327,328],{"class":83,"line":193},[81,329,258],{"class":141},[10,331,23,332,335],{},[46,333,334],{},"wait"," setting adds a delay before triggering the reload, which is useful when your editor saves files in multiple steps (atomic saves).",[64,337,339],{"id":338},"python-httpserver-watchdog","Python http.server + Watchdog",[10,341,342],{},"For environments where installing Node.js is inconvenient, Python offers a minimal alternative:",[72,344,346],{"className":74,"code":345,"language":76,"meta":77,"style":77},"python -m http.server 8000 &\nwatchmedo shell-command --patterns=\"*.html;*.css\" --recursive --command=\"echo 'reload'\" .\n",[46,347,348,365],{"__ignoreMap":77},[81,349,350,353,356,359,362],{"class":83,"line":84},[81,351,352],{"class":87},"python",[81,354,355],{"class":98}," -m",[81,357,358],{"class":91}," http.server",[81,360,361],{"class":98}," 8000",[81,363,364],{"class":141}," &\n",[81,366,367,370,373,376,379,382,385,388],{"class":83,"line":155},[81,368,369],{"class":87},"watchmedo",[81,371,372],{"class":91}," shell-command",[81,374,375],{"class":98}," --patterns=",[81,377,378],{"class":91},"\"*.html;*.css\"",[81,380,381],{"class":98}," --recursive",[81,383,384],{"class":98}," --command=",[81,386,387],{"class":91},"\"echo 'reload'\"",[81,389,390],{"class":91}," .\n",[10,392,393],{},"This approach lacks automatic browser refresh, but you can pair it with a browser extension like LiveReload for Safari or Chrome to complete the loop.",[14,395,397],{"id":396},"optimizing-for-speed","Optimizing for Speed",[10,399,400],{},"Several small adjustments make the live reload experience feel instantaneous:",[10,402,403,406],{},[25,404,405],{},"Debounce file events."," Some editors trigger multiple change events per save (write, truncate, rename during atomic save). A 100-300ms debounce eliminates duplicate reloads:",[72,408,410],{"className":129,"code":409,"language":131,"meta":77,"style":77},"let reloadTimeout\nwatcher.on('change', () => {\n  clearTimeout(reloadTimeout)\n  reloadTimeout = setTimeout(triggerReload, 200)\n})\n",[46,411,412,420,442,450,470],{"__ignoreMap":77},[81,413,414,417],{"class":83,"line":84},[81,415,416],{"class":148},"let",[81,418,419],{"class":141}," reloadTimeout\n",[81,421,422,425,428,431,434,437,440],{"class":83,"line":155},[81,423,424],{"class":141},"watcher.",[81,426,427],{"class":87},"on",[81,429,430],{"class":141},"(",[81,432,433],{"class":91},"'change'",[81,435,436],{"class":141},", () ",[81,438,439],{"class":148},"=>",[81,441,152],{"class":141},[81,443,444,447],{"class":83,"line":161},[81,445,446],{"class":87},"  clearTimeout",[81,448,449],{"class":141},"(reloadTimeout)\n",[81,451,452,455,458,461,464,467],{"class":83,"line":173},[81,453,454],{"class":141},"  reloadTimeout ",[81,456,457],{"class":148},"=",[81,459,460],{"class":87}," setTimeout",[81,462,463],{"class":141},"(triggerReload, ",[81,465,466],{"class":98},"200",[81,468,469],{"class":141},")\n",[81,471,472],{"class":83,"line":179},[81,473,474],{"class":141},"})\n",[10,476,477,480,481,214,484,487],{},[25,478,479],{},"Watch only what changes."," Excluding ",[46,482,483],{},"node_modules",[46,485,486],{},".git",", build output directories, and large asset folders reduces CPU overhead and prevents false-positive reloads from non-visual file changes.",[10,489,490,493,494,497],{},[25,491,492],{},"Use CSS injection for stylesheets."," BrowserSync can inject CSS changes without a full page reload by replacing ",[46,495,496],{},"\u003Clink>"," tags in-place. Enable it by watching CSS files separately:",[72,499,501],{"className":74,"code":500,"language":76,"meta":77,"style":77},"npx browser-sync start --server --files \"css\u002F*.css\" --reload-delay 0\n",[46,502,503],{"__ignoreMap":77},[81,504,505,507,509,511,513,515,518,521],{"class":83,"line":84},[81,506,88],{"class":87},[81,508,92],{"class":91},[81,510,95],{"class":91},[81,512,99],{"class":98},[81,514,102],{"class":98},[81,516,517],{"class":91}," \"css\u002F*.css\"",[81,519,520],{"class":98}," --reload-delay",[81,522,523],{"class":98}," 0\n",[10,525,526,529],{},[25,527,528],{},"Skip reload for non-visual assets."," Changes to build config files, READMEs, or data files should not trigger a reload. Configure your watcher to include only files that affect the visual output.",[14,531,533],{"id":532},"when-to-graduate-to-a-full-dev-server","When to Graduate to a Full Dev Server",[10,535,536],{},"Live reload tools are ideal for static HTML prototyping. When your project needs component hot replacement, module bundling, TypeScript compilation, or API proxying, it is time to move to a full development server. Vite, Nuxt, and Next.js all include live reload as a subset of their dev server capabilities, so you lose nothing by upgrading—your reload speed stays the same, and you gain additional tooling.",[10,538,539,540,545],{},"To quickly preview any HTML snippet with live reload, try the ",[541,542,544],"a",{"href":543},"\u002Ftools\u002Fhtml-preview","HTML Preview tool"," for instant rendered output right in your browser.",[547,548,549],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":77,"searchDepth":155,"depth":155,"links":551},[552,553,558,559],{"id":16,"depth":155,"text":17},{"id":61,"depth":155,"text":62,"children":554},[555,556,557],{"id":66,"depth":161,"text":67},{"id":261,"depth":161,"text":262},{"id":338,"depth":161,"text":339},{"id":396,"depth":155,"text":397},{"id":532,"depth":155,"text":533},"2026-05-28","Set up instant browser refresh for HTML prototyping without a full build pipeline.","md",{},true,"\u002Fguides\u002Flive-reload-html-workflow",{"title":5,"description":561},"guides\u002Flive-reload-html-workflow","9H8uSvreDF3Ev4KZHoG5HhZLkY-SCyduQA7godwcwbw",1780401334953]