[{"data":1,"prerenderedAt":553},["ShallowReactive",2],{"guide-html-preview-guide":3},{"id":4,"title":5,"body":6,"date":543,"description":544,"extension":545,"meta":546,"navigation":547,"path":548,"readingTime":549,"seo":550,"stem":551,"__hash__":552},"guides\u002Fguides\u002Fhtml-preview-guide.md","HTML Preview Guide",{"type":7,"value":8,"toc":520},"minimark",[9,14,18,21,25,33,38,45,115,121,134,138,145,242,249,263,267,271,274,278,281,285,288,292,295,299,303,306,364,367,371,382,386,389,393,396,400,403,407,410,468,471,475,503,507,516],[10,11,13],"h2",{"id":12},"what-is-an-html-preview-tool","What Is an HTML Preview Tool?",[15,16,17],"p",{},"An HTML preview tool renders your HTML, CSS, and JavaScript code in real time inside the browser. You write markup on one side of the screen and see the result on the other — no save, no refresh, no server setup required.",[15,19,20],{},"Think of it as a scratchpad for the web. You paste a snippet, tweak a style, and immediately see how it looks.",[10,22,24],{"id":23},"how-iframe-sandboxing-works","How iframe Sandboxing Works",[15,26,27,28,32],{},"Every browser-based HTML preview relies on an ",[29,30,31],"code",{},"\u003Ciframe>"," to isolate your code from the host page. Two attributes make this safe and flexible.",[34,35,37],"h3",{"id":36},"the-srcdoc-attribute","The srcdoc Attribute",[15,39,40,41,44],{},"Instead of loading a URL, ",[29,42,43],{},"srcdoc"," embeds HTML directly into the iframe:",[46,47,52],"pre",{"className":48,"code":49,"language":50,"meta":51,"style":51},"language-html shiki shiki-themes github-light github-dark","\u003Ciframe\n  srcdoc=\"\u003Ch1>Hello, world!\u003C\u002Fh1>\"\n  sandbox=\"allow-scripts\"\n>\u003C\u002Fiframe>\n","html","",[29,53,54,67,92,103],{"__ignoreMap":51},[55,56,59,63],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"sVt8B","\u003C",[55,64,66],{"class":65},"s9eBZ","iframe\n",[55,68,70,74,77,81,84,87,89],{"class":57,"line":69},2,[55,71,73],{"class":72},"sScJk","  srcdoc",[55,75,76],{"class":61},"=",[55,78,80],{"class":79},"sZZnC","\"",[55,82,62],{"class":83},"s7hpK",[55,85,86],{"class":79},"h1>Hello, world!",[55,88,62],{"class":83},[55,90,91],{"class":79},"\u002Fh1>\"\n",[55,93,95,98,100],{"class":57,"line":94},3,[55,96,97],{"class":72},"  sandbox",[55,99,76],{"class":61},[55,101,102],{"class":79},"\"allow-scripts\"\n",[55,104,106,109,112],{"class":57,"line":105},4,[55,107,108],{"class":61},">\u003C\u002F",[55,110,111],{"class":65},"iframe",[55,113,114],{"class":61},">\n",[15,116,117,118,120],{},"Benefits of ",[29,119,43],{},":",[122,123,124,128,131],"ul",{},[125,126,127],"li",{},"No network request — the browser renders the content instantly",[125,129,130],{},"Works offline — no server round-trip needed",[125,132,133],{},"Easy to update — just change the attribute value",[34,135,137],{"id":136},"the-sandbox-attribute","The sandbox Attribute",[15,139,140,141,144],{},"The ",[29,142,143],{},"sandbox"," attribute restricts what the iframe can do. Without it, embedded code could redirect the parent page, access cookies, or run pop-ups.",[146,147,148,164],"table",{},[149,150,151],"thead",{},[152,153,154,158,161],"tr",{},[155,156,157],"th",{},"Permission",[155,159,160],{},"Attribute Value",[155,162,163],{},"What It Allows",[165,166,167,181,194,207,220],"tbody",{},[152,168,169,173,178],{},[170,171,172],"td",{},"Scripts",[170,174,175],{},[29,176,177],{},"allow-scripts",[170,179,180],{},"JavaScript execution",[152,182,183,186,191],{},[170,184,185],{},"Same origin",[170,187,188],{},[29,189,190],{},"allow-same-origin",[170,192,193],{},"Access to cookies and storage",[152,195,196,199,204],{},[170,197,198],{},"Forms",[170,200,201],{},[29,202,203],{},"allow-forms",[170,205,206],{},"Form submission",[152,208,209,212,217],{},[170,210,211],{},"Pop-ups",[170,213,214],{},[29,215,216],{},"allow-popups",[170,218,219],{},"Opening new windows",[152,221,222,225,230],{},[170,223,224],{},"Modals",[170,226,227],{},[29,228,229],{},"allow-modals",[170,231,232,235,236,235,239],{},[29,233,234],{},"alert()",", ",[29,237,238],{},"confirm()",[29,240,241],{},"prompt()",[15,243,244,245,248],{},"A typical preview tool uses ",[29,246,247],{},"sandbox=\"allow-scripts\""," — scripts run, but the iframe cannot access the parent page or open pop-ups.",[15,250,251,252,256,257,259,260,262],{},"Always apply the ",[253,254,255],"strong",{},"minimum set of permissions"," your snippet needs. Adding ",[29,258,190],{}," alongside ",[29,261,177],{}," can let embedded code remove the sandbox entirely, so combine them with caution.",[10,264,266],{"id":265},"benefits-of-browser-based-preview","Benefits of Browser-Based Preview",[34,268,270],{"id":269},"zero-setup","Zero Setup",[15,272,273],{},"No install, no build step, no configuration. Open a tab and start coding. This removes the biggest friction for quick experiments.",[34,275,277],{"id":276},"instant-feedback","Instant Feedback",[15,279,280],{},"Changes render as you type. You see layout shifts, color changes, and JavaScript errors the moment they happen — no alt-tabbing between editor and browser.",[34,282,284],{"id":283},"safe-execution","Safe Execution",[15,286,287],{},"The sandbox keeps your code isolated. A broken script or an infinite loop stays inside the iframe and cannot crash the host page or access your data.",[34,289,291],{"id":290},"easy-sharing","Easy Sharing",[15,293,294],{},"Most preview tools generate a shareable link or let you copy the code directly. Send a URL to a colleague and they see exactly what you see — no environment differences, no \"works on my machine.\"",[10,296,298],{"id":297},"use-cases","Use Cases",[34,300,302],{"id":301},"testing-css-layouts","Testing CSS Layouts",[15,304,305],{},"Paste a flexbox or grid snippet, adjust properties, and watch the layout respond:",[46,307,309],{"className":48,"code":308,"language":50,"meta":51,"style":51},"\u003Cdiv style=\"display: grid; grid-template-columns: 1fr 2fr; gap: 16px;\">\n  \u003Cdiv>Sidebar\u003C\u002Fdiv>\n  \u003Cdiv>Main content\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[29,310,311,328,342,355],{"__ignoreMap":51},[55,312,313,315,318,321,323,326],{"class":57,"line":58},[55,314,62],{"class":61},[55,316,317],{"class":65},"div",[55,319,320],{"class":72}," style",[55,322,76],{"class":61},[55,324,325],{"class":79},"\"display: grid; grid-template-columns: 1fr 2fr; gap: 16px;\"",[55,327,114],{"class":61},[55,329,330,333,335,338,340],{"class":57,"line":69},[55,331,332],{"class":61},"  \u003C",[55,334,317],{"class":65},[55,336,337],{"class":61},">Sidebar\u003C\u002F",[55,339,317],{"class":65},[55,341,114],{"class":61},[55,343,344,346,348,351,353],{"class":57,"line":94},[55,345,332],{"class":61},[55,347,317],{"class":65},[55,349,350],{"class":61},">Main content\u003C\u002F",[55,352,317],{"class":65},[55,354,114],{"class":61},[55,356,357,360,362],{"class":57,"line":105},[55,358,359],{"class":61},"\u003C\u002F",[55,361,317],{"class":65},[55,363,114],{"class":61},[15,365,366],{},"A sandboxed preview shows you the rendered result instantly without spinning up a local dev server.",[34,368,370],{"id":369},"debugging-javascript","Debugging JavaScript",[15,372,373,374,377,378,381],{},"Throw a quick ",[29,375,376],{},"console.log"," or ",[29,379,380],{},"document.querySelector"," into your snippet. The browser dev tools attached to the iframe catch errors and log output just like any other page.",[34,383,385],{"id":384},"sharing-code-snippets","Sharing Code Snippets",[15,387,388],{},"Need feedback on a button design? Paste the HTML and CSS into a preview tool, copy the shareable link, and send it. Reviewers interact with the live result instead of reading raw code.",[34,390,392],{"id":391},"prototyping-components","Prototyping Components",[15,394,395],{},"Build a card, a nav bar, or a modal in isolation before integrating it into your project. Isolated prototyping keeps your main codebase clean and lets you experiment freely.",[34,397,399],{"id":398},"learning-html-and-css","Learning HTML and CSS",[15,401,402],{},"Beginners benefit most from instant feedback. Type a tag, see it render. Change a property, see the difference. The feedback loop is seconds, not minutes.",[10,404,406],{"id":405},"limitations-compared-to-full-ides","Limitations Compared to Full IDEs",[15,408,409],{},"Browser-based preview tools trade power for convenience. Know where they fall short.",[146,411,412,422],{},[149,413,414],{},[152,415,416,419],{},[155,417,418],{},"Limitation",[155,420,421],{},"Details",[165,423,424,432,440,452,460],{},[152,425,426,429],{},[170,427,428],{},"No file system",[170,430,431],{},"You work with a single document — no imports across files",[152,433,434,437],{},[170,435,436],{},"No build tools",[170,438,439],{},"No Sass, no PostCSS, no TypeScript compilation",[152,441,442,445],{},[170,443,444],{},"No package manager",[170,446,447,448,451],{},"You cannot ",[29,449,450],{},"npm install"," dependencies",[152,453,454,457],{},[170,455,456],{},"Limited debugging",[170,458,459],{},"Dev tools work, but breakpoints and source maps are harder to set up",[152,461,462,465],{},[170,463,464],{},"Performance ceiling",[170,466,467],{},"Heavy DOM manipulation or WebSocket connections may hit sandbox limits",[15,469,470],{},"If your project needs a build step, a module bundler, or multiple files, move to a full development environment. Preview tools are for snippets, not applications.",[10,472,474],{"id":473},"key-takeaways","Key Takeaways",[122,476,477,489,494,497,500],{},[125,478,479,480,482,483,485,486,488],{},"Browser-based HTML preview uses ",[29,481,31],{}," with ",[29,484,43],{}," and ",[29,487,143],{}," attributes to render code safely inside the page",[125,490,491,493],{},[29,492,247],{}," gives you JavaScript access while blocking pop-ups, form submissions, and parent-page access",[125,495,496],{},"The main benefits are zero setup, instant feedback, safe execution, and easy sharing",[125,498,499],{},"Use cases include CSS testing, JS debugging, snippet sharing, component prototyping, and learning",[125,501,502],{},"For multi-file projects or build-tool-dependent code, use a full IDE instead",[10,504,506],{"id":505},"try-it-yourself","Try It Yourself",[15,508,509,510,515],{},"Ready to preview your HTML code instantly? Open our free ",[511,512,514],"a",{"href":513},"\u002Ftools\u002Fhtml-preview","HTML Preview"," tool, paste your markup, and see it rendered in real time — no setup required.",[517,518,519],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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 .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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);}",{"title":51,"searchDepth":69,"depth":69,"links":521},[522,523,527,533,540,541,542],{"id":12,"depth":69,"text":13},{"id":23,"depth":69,"text":24,"children":524},[525,526],{"id":36,"depth":94,"text":37},{"id":136,"depth":94,"text":137},{"id":265,"depth":69,"text":266,"children":528},[529,530,531,532],{"id":269,"depth":94,"text":270},{"id":276,"depth":94,"text":277},{"id":283,"depth":94,"text":284},{"id":290,"depth":94,"text":291},{"id":297,"depth":69,"text":298,"children":534},[535,536,537,538,539],{"id":301,"depth":94,"text":302},{"id":369,"depth":94,"text":370},{"id":384,"depth":94,"text":385},{"id":391,"depth":94,"text":392},{"id":398,"depth":94,"text":399},{"id":405,"depth":69,"text":406},{"id":473,"depth":69,"text":474},{"id":505,"depth":69,"text":506},"2026-05-28","Learn how to use browser-based HTML preview tools for quick prototyping and snippet testing.","md",{"immutable":547},true,"\u002Fguides\u002Fhtml-preview-guide",6,{"title":5,"description":544},"guides\u002Fhtml-preview-guide","A6sXKg0b5YGCOadPIMAIZ8W41g9mPX6rzyISFJwCQg0",1780401329091]