[{"data":1,"prerenderedAt":774},["ShallowReactive",2],{"guide-live-reload-html-development":3},{"id":4,"title":5,"body":6,"date":766,"description":767,"extension":768,"meta":769,"navigation":426,"path":770,"readingTime":463,"seo":771,"stem":772,"__hash__":773},"guides\u002Fguides\u002Flive-reload-html-development.md","Live Reload Techniques for HTML Development",{"type":7,"value":8,"toc":755},"minimark",[9,14,18,30,34,37,92,98,104,107,111,114,141,144,150,156,160,163,230,233,238,304,311,316,320,323,360,363,499,502,575,580,584,683,687,714,718,738,742,751],[10,11,13],"h2",{"id":12},"what-is-live-reload","What Is Live Reload?",[15,16,17],"p",{},"Live reload automatically refreshes your browser when you save a file. Instead of switching to the browser and pressing F5 after every edit, the page updates on its own. For HTML development, this means you see changes the instant you save — no manual refresh, no context switching.",[15,19,20,21,25,26,29],{},"Live reload comes in two flavors: ",[22,23,24],"strong",{},"full page reload"," replaces the entire page, while ",[22,27,28],{},"hot module replacement (HMR)"," swaps only the changed parts without losing state. For plain HTML work, full reload is usually sufficient. HMR matters more when you are working with JavaScript-heavy frameworks.",[10,31,33],{"id":32},"method-1-browser-extensions","Method 1: Browser Extensions",[15,35,36],{},"The simplest approach. Install an extension, point it at a local file, and it watches for changes.",[38,39,40,56],"table",{},[41,42,43],"thead",{},[44,45,46,50,53],"tr",{},[47,48,49],"th",{},"Extension",[47,51,52],{},"Browser",[47,54,55],{},"How It Works",[57,58,59,71,82],"tbody",{},[44,60,61,65,68],{},[62,63,64],"td",{},"LiveReload",[62,66,67],{},"Chrome, Firefox",[62,69,70],{},"Monitors local files via a companion app",[44,72,73,76,79],{},[62,74,75],{},"Live JS",[62,77,78],{},"Chrome",[62,80,81],{},"Watches file changes via the file:\u002F\u002F protocol",[44,83,84,87,89],{},[62,85,86],{},"Auto Refresh",[62,88,78],{},[62,90,91],{},"Reloads on a timer or file change",[15,93,94,97],{},[22,95,96],{},"Pros:"," Zero configuration. Open your HTML file and start editing.",[15,99,100,103],{},[22,101,102],{},"Cons:"," Limited to file:\u002F\u002F or localhost. No support for preprocessors. Each developer needs the extension installed.",[15,105,106],{},"Browser extensions are fine for quick prototypes. They break down when your project involves a build step or multiple developers.",[10,108,110],{"id":109},"method-2-vs-code-live-server","Method 2: VS Code Live Server",[15,112,113],{},"If you edit in VS Code, the Live Server extension is the fastest path to live reload.",[115,116,117,125,131,138],"ol",{},[118,119,120,121,124],"li",{},"Install the ",[22,122,123],{},"Live Server"," extension from the VS Code marketplace",[118,126,127,128],{},"Right-click an HTML file and select ",[22,129,130],{},"Open with Live Server",[118,132,133,134],{},"A browser tab opens at ",[135,136,137],"code",{},"http:\u002F\u002F127.0.0.1:5500",[118,139,140],{},"Save any file in the project — the browser reloads automatically",[15,142,143],{},"Live Server spawns a lightweight Node server and injects a WebSocket script into your pages. When a file changes, the server pushes a reload command to all connected browsers.",[15,145,146,149],{},[22,147,148],{},"When to use it:"," Static HTML sites, prototypes, and learning projects. If your workflow is \"edit HTML + CSS → save → check browser,\" this is the tool.",[15,151,152,155],{},[22,153,154],{},"Limitations:"," No bundler integration. If you compile Sass, TypeScript, or PostCSS, you need a separate watch process running alongside Live Server.",[10,157,159],{"id":158},"method-3-build-tool-dev-servers","Method 3: Build Tool Dev Servers",[15,161,162],{},"Modern build tools include dev servers with live reload built in.",[38,164,165,178],{},[41,166,167],{},[44,168,169,172,175],{},[47,170,171],{},"Tool",[47,173,174],{},"Command",[47,176,177],{},"Reload Type",[57,179,180,193,205,217],{},[44,181,182,185,190],{},[62,183,184],{},"Vite",[62,186,187],{},[135,188,189],{},"vite",[62,191,192],{},"HMR + full reload",[44,194,195,198,203],{},[62,196,197],{},"Webpack Dev Server",[62,199,200],{},[135,201,202],{},"webpack serve",[62,204,192],{},[44,206,207,210,215],{},[62,208,209],{},"Parcel",[62,211,212],{},[135,213,214],{},"parcel serve",[62,216,192],{},[44,218,219,222,227],{},[62,220,221],{},"11ty",[62,223,224],{},[135,225,226],{},"eleventy --serve",[62,228,229],{},"Full reload",[15,231,232],{},"These servers do more than reload — they transform your source files before serving. Sass becomes CSS. TypeScript becomes JavaScript. Markdown becomes HTML. The reload happens after the transformation completes.",[15,234,235],{},[22,236,237],{},"Example with Vite:",[239,240,245],"pre",{"className":241,"code":242,"language":243,"meta":244,"style":244},"language-bash shiki shiki-themes github-light github-dark","npm create vite@latest my-site -- --template vanilla\ncd my-site\nnpm install\nnpm run dev\n","bash","",[135,246,247,276,285,293],{"__ignoreMap":244},[248,249,252,256,260,263,266,270,273],"span",{"class":250,"line":251},"line",1,[248,253,255],{"class":254},"sScJk","npm",[248,257,259],{"class":258},"sZZnC"," create",[248,261,262],{"class":258}," vite@latest",[248,264,265],{"class":258}," my-site",[248,267,269],{"class":268},"sj4cs"," --",[248,271,272],{"class":268}," --template",[248,274,275],{"class":258}," vanilla\n",[248,277,279,282],{"class":250,"line":278},2,[248,280,281],{"class":268},"cd",[248,283,284],{"class":258}," my-site\n",[248,286,288,290],{"class":250,"line":287},3,[248,289,255],{"class":254},[248,291,292],{"class":258}," install\n",[248,294,296,298,301],{"class":250,"line":295},4,[248,297,255],{"class":254},[248,299,300],{"class":258}," run",[248,302,303],{"class":258}," dev\n",[15,305,306,307,310],{},"Vite starts a dev server at ",[135,308,309],{},"http:\u002F\u002Flocalhost:5173",". Edit any file — the browser updates in milliseconds. Vite serves source files directly using native ES modules, so startup is near-instant regardless of project size.",[15,312,313,315],{},[22,314,148],{}," Any project with a build pipeline. If you preprocess files, use a framework, or need production builds later, start with a build tool dev server.",[10,317,319],{"id":318},"method-4-file-watchers-custom-server","Method 4: File Watchers + Custom Server",[15,321,322],{},"For maximum control, combine a file watcher with a custom server.",[239,324,326],{"className":241,"code":325,"language":243,"meta":244,"style":244},"# Using nodemon to watch HTML files\nnpx nodemon --watch src --ext html,css,js --exec \"echo 'change detected'\"\n",[135,327,328,334],{"__ignoreMap":244},[248,329,330],{"class":250,"line":251},[248,331,333],{"class":332},"sJ8bj","# Using nodemon to watch HTML files\n",[248,335,336,339,342,345,348,351,354,357],{"class":250,"line":278},[248,337,338],{"class":254},"npx",[248,340,341],{"class":258}," nodemon",[248,343,344],{"class":268}," --watch",[248,346,347],{"class":258}," src",[248,349,350],{"class":268}," --ext",[248,352,353],{"class":258}," html,css,js",[248,355,356],{"class":268}," --exec",[248,358,359],{"class":258}," \"echo 'change detected'\"\n",[15,361,362],{},"Pair this with a WebSocket server that pushes reload commands:",[239,364,368],{"className":365,"code":366,"language":367,"meta":244,"style":244},"language-javascript shiki shiki-themes github-light github-dark","const ws = require('ws');\nconst wss = new ws.Server({ port: 35729 });\n\nchokidar.watch('src').on('change', () => {\n  wss.clients.forEach(client => client.send('reload'));\n});\n","javascript",[135,369,370,395,422,428,461,493],{"__ignoreMap":244},[248,371,372,376,379,382,385,389,392],{"class":250,"line":251},[248,373,375],{"class":374},"szBVR","const",[248,377,378],{"class":268}," ws",[248,380,381],{"class":374}," =",[248,383,384],{"class":254}," require",[248,386,388],{"class":387},"sVt8B","(",[248,390,391],{"class":258},"'ws'",[248,393,394],{"class":387},");\n",[248,396,397,399,402,404,407,410,413,416,419],{"class":250,"line":278},[248,398,375],{"class":374},[248,400,401],{"class":268}," wss",[248,403,381],{"class":374},[248,405,406],{"class":374}," new",[248,408,409],{"class":387}," ws.",[248,411,412],{"class":254},"Server",[248,414,415],{"class":387},"({ port: ",[248,417,418],{"class":268},"35729",[248,420,421],{"class":387}," });\n",[248,423,424],{"class":250,"line":287},[248,425,427],{"emptyLinePlaceholder":426},true,"\n",[248,429,430,433,436,438,441,444,447,449,452,455,458],{"class":250,"line":295},[248,431,432],{"class":387},"chokidar.",[248,434,435],{"class":254},"watch",[248,437,388],{"class":387},[248,439,440],{"class":258},"'src'",[248,442,443],{"class":387},").",[248,445,446],{"class":254},"on",[248,448,388],{"class":387},[248,450,451],{"class":258},"'change'",[248,453,454],{"class":387},", () ",[248,456,457],{"class":374},"=>",[248,459,460],{"class":387}," {\n",[248,462,464,467,470,472,476,479,482,485,487,490],{"class":250,"line":463},5,[248,465,466],{"class":387},"  wss.clients.",[248,468,469],{"class":254},"forEach",[248,471,388],{"class":387},[248,473,475],{"class":474},"s4XuR","client",[248,477,478],{"class":374}," =>",[248,480,481],{"class":387}," client.",[248,483,484],{"class":254},"send",[248,486,388],{"class":387},[248,488,489],{"class":258},"'reload'",[248,491,492],{"class":387},"));\n",[248,494,496],{"class":250,"line":495},6,[248,497,498],{"class":387},"});\n",[15,500,501],{},"Inject the client script into your HTML:",[239,503,507],{"className":504,"code":505,"language":506,"meta":244,"style":244},"language-html shiki shiki-themes github-light github-dark","\u003Cscript>\n  const ws = new WebSocket('ws:\u002F\u002Flocalhost:35729');\n  ws.onmessage = () => location.reload();\n\u003C\u002Fscript>\n","html",[135,508,509,521,542,566],{"__ignoreMap":244},[248,510,511,514,518],{"class":250,"line":251},[248,512,513],{"class":387},"\u003C",[248,515,517],{"class":516},"s9eBZ","script",[248,519,520],{"class":387},">\n",[248,522,523,526,528,530,532,535,537,540],{"class":250,"line":278},[248,524,525],{"class":374},"  const",[248,527,378],{"class":268},[248,529,381],{"class":374},[248,531,406],{"class":374},[248,533,534],{"class":254}," WebSocket",[248,536,388],{"class":387},[248,538,539],{"class":258},"'ws:\u002F\u002Flocalhost:35729'",[248,541,394],{"class":387},[248,543,544,547,550,552,555,557,560,563],{"class":250,"line":287},[248,545,546],{"class":387},"  ws.",[248,548,549],{"class":254},"onmessage",[248,551,381],{"class":374},[248,553,554],{"class":387}," () ",[248,556,457],{"class":374},[248,558,559],{"class":387}," location.",[248,561,562],{"class":254},"reload",[248,564,565],{"class":387},"();\n",[248,567,568,571,573],{"class":250,"line":295},[248,569,570],{"class":387},"\u003C\u002F",[248,572,517],{"class":516},[248,574,520],{"class":387},[15,576,577,579],{},[22,578,148],{}," Custom setups, embedded projects, or when existing tools do not fit your architecture.",[10,581,583],{"id":582},"comparing-the-approaches","Comparing the Approaches",[38,585,586,605],{},[41,587,588],{},[44,589,590,593,596,599,602],{},[47,591,592],{},"Criteria",[47,594,595],{},"Browser Extension",[47,597,598],{},"VS Code Live Server",[47,600,601],{},"Build Tool Dev Server",[47,603,604],{},"Custom Setup",[57,606,607,624,639,653,667],{},[44,608,609,612,615,618,621],{},[62,610,611],{},"Setup time",[62,613,614],{},"1 minute",[62,616,617],{},"2 minutes",[62,619,620],{},"5 minutes",[62,622,623],{},"30+ minutes",[44,625,626,629,632,634,637],{},[62,627,628],{},"Build step support",[62,630,631],{},"No",[62,633,631],{},[62,635,636],{},"Yes",[62,638,636],{},[44,640,641,644,646,648,651],{},[62,642,643],{},"Multi-browser sync",[62,645,631],{},[62,647,631],{},[62,649,650],{},"Yes (with plugins)",[62,652,636],{},[44,654,655,658,660,662,664],{},[62,656,657],{},"HMR",[62,659,631],{},[62,661,631],{},[62,663,636],{},[62,665,666],{},"Manual",[44,668,669,672,675,678,681],{},[62,670,671],{},"Team consistency",[62,673,674],{},"Low",[62,676,677],{},"Medium",[62,679,680],{},"High",[62,682,680],{},[10,684,686],{"id":685},"best-practices-for-live-reload-workflows","Best Practices for Live Reload Workflows",[688,689,690,696,702,708],"ul",{},[118,691,692,695],{},[22,693,694],{},"Pick one method and stick with it."," Mixing live reload tools causes conflicts — two servers trying to watch the same files leads to double reloads.",[118,697,698,701],{},[22,699,700],{},"Use the same setup across your team."," Browser extensions create invisible differences between developer environments. Build tool configs are version-controlled.",[118,703,704,707],{},[22,705,706],{},"Keep reload fast."," If your build takes more than 500ms, the reload delay disrupts your flow. Profile and optimize your build pipeline.",[118,709,710,713],{},[22,711,712],{},"Test without reload sometimes."," Some bugs only appear on fresh page loads. Do a hard refresh (Ctrl+Shift+R) periodically to catch state that HMR preserves incorrectly.",[10,715,717],{"id":716},"key-takeaways","Key Takeaways",[688,719,720,723,726,729,732,735],{},[118,721,722],{},"Live reload saves you from manually refreshing the browser after every edit",[118,724,725],{},"Browser extensions work for quick experiments but lack build tool integration",[118,727,728],{},"VS Code Live Server is the fastest option for static HTML projects",[118,730,731],{},"Build tool dev servers (Vite, Webpack, Parcel) handle preprocessing and HMR",[118,733,734],{},"Custom setups offer full control but require significant setup time",[118,736,737],{},"Choose based on project complexity, not personal habit",[10,739,741],{"id":740},"try-it-yourself","Try It Yourself",[15,743,744,745,750],{},"Preview your HTML changes instantly with our ",[746,747,749],"a",{"href":748},"\u002Ftools\u002Fhtml-preview","HTML Preview"," tool. Write HTML, CSS, and JavaScript in the editor — see the rendered output in real time without any setup.",[752,753,754],"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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":244,"searchDepth":278,"depth":278,"links":756},[757,758,759,760,761,762,763,764,765],{"id":12,"depth":278,"text":13},{"id":32,"depth":278,"text":33},{"id":109,"depth":278,"text":110},{"id":158,"depth":278,"text":159},{"id":318,"depth":278,"text":319},{"id":582,"depth":278,"text":583},{"id":685,"depth":278,"text":686},{"id":716,"depth":278,"text":717},{"id":740,"depth":278,"text":741},"2026-05-28","Compare live reload methods for HTML development — from browser extensions to build tools — and pick the right workflow for your project.","md",{"immutable":426},"\u002Fguides\u002Flive-reload-html-development",{"title":5,"description":767},"guides\u002Flive-reload-html-development","PF9D8KSmFQiQfi2sXUEjckfPyXa5VEhVBW9S-DgCh94",1780401334931]