[{"data":1,"prerenderedAt":532},["Reactive",2],{"/tools/html-viewer":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"seoTitle":10,"lead":11,"date":12,"dateModified":12,"author":13,"body":14,"_type":527,"_id":528,"_source":529,"_file":530,"_extension":531},"/tools/html-viewer","tools",false,"","HTML viewer","Free HTML viewer: paste or open HTML and see it rendered as you type, in a sandboxed frame. Check it at A4 page width with its print CSS before you make a PDF.","HTML Viewer: Preview HTML Online, Free | PDFShift","Paste or open HTML and see it rendered as you type.","2026-11-05","Cyril Nicodème",{"type":15,"children":16,"toc":520},"root",[17,25,32,37,62,99,104,255,291,297,310,331,433,445,451,464,469,475,488,499],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","If your HTML is going to be a PDF, don't judge it in Desktop view. Switch to A4 page and turn on Print CSS: you'll see it at the width a PDF page gives it, with the styles its print rules set. That's the check worth doing before you convert anything.",{"type":18,"tag":26,"props":27,"children":29},"h2",{"id":28},"why-does-my-html-look-different-as-a-pdf",[30],{"type":23,"value":31},"Why does my HTML look different as a PDF?",{"type":18,"tag":19,"props":33,"children":34},{},[35],{"type":23,"value":36},"Two things change when HTML becomes a PDF page: the width and the styles.",{"type":18,"tag":19,"props":38,"children":39},{},[40,42,51,53,60],{"type":23,"value":41},"The width comes from the paper size. An A4 page is ",{"type":18,"tag":43,"props":44,"children":48},"a",{"href":45,"rel":46},"https://www.w3.org/TR/css-page-3/",[47],"nofollow",[49],{"type":23,"value":50},"210 mm wide",{"type":23,"value":52},", and at ",{"type":18,"tag":43,"props":54,"children":57},{"href":55,"rel":56},"https://www.w3.org/TR/css-values-4/",[47],[58],{"type":23,"value":59},"96 CSS pixels to the inch",{"type":23,"value":61}," that's about 794 pixels. A layout that's fine on a wide screen can wrap, squeeze or flip to its phone layout at that width. A4 page shows your HTML at 794 pixels, so you see it before your customer does.",{"type":18,"tag":19,"props":63,"children":64},{},[65,67,74,76,89,91,97],{"type":23,"value":66},"The styles come from print rules. A stylesheet's ",{"type":18,"tag":68,"props":69,"children":71},"code",{"className":70},[],[72],{"type":23,"value":73},"@media print",{"type":23,"value":75}," rules say how the document should look on paper: hide the navigation, drop the buttons, change the colors. Print CSS applies them and switches off the screen-only rules. In PDFShift, that's the ",{"type":18,"tag":43,"props":77,"children":80},{"href":78,"rel":79},"https://docs.pdfshift.io/api-reference/convert-to-pdf",[47],[81,87],{"type":18,"tag":68,"props":82,"children":84},{"className":83},[],[85],{"type":23,"value":86},"use_print",{"type":23,"value":88}," option",{"type":23,"value":90},", and it's off by default. So if your HTML relies on print rules, send ",{"type":18,"tag":68,"props":92,"children":94},{"className":93},[],[95],{"type":23,"value":96},"use_print: true",{"type":23,"value":98},". If it doesn't, leave Print CSS off here too.",{"type":18,"tag":19,"props":100,"children":101},{},[102],{"type":23,"value":103},"The invoice already in the editor has print rules. Switch to A4 page, then tick Print CSS: the navigation bar and the Pay online button go, and the invoice is all that's left. That's the version you want in the PDF.",{"type":18,"tag":105,"props":106,"children":108},"guide-figure",{"caption":107},"The sample invoice at A4 page width, with Print CSS off and on.",[109],{"type":18,"tag":110,"props":111,"children":120},"svg",{"viewBox":112,"xmlns":113,"role":114,"ariaLabelledBy":115,"style":118,"fontFamily":119},"0 0 560 300","http://www.w3.org/2000/svg","img",[116,117],"hv-print-title","hv-print-desc","max-width:560px;min-width:420px;display:block;margin:0 auto","DM Sans, sans-serif",[121,127,133,154,165,173,181,187,193,211,217,224,228,232,236],{"type":18,"tag":122,"props":123,"children":124},"title",{"id":116},[125],{"type":23,"value":126},"Print CSS hides what a printed page doesn't need",{"type":18,"tag":128,"props":129,"children":130},"desc",{"id":117},[131],{"type":23,"value":132},"Two sketches of the same invoice at A4 width. On the left, Print CSS off: a dark navigation bar, the invoice title, a table and a purple Pay online button. On the right, Print CSS on: the navigation bar and the button are gone, and the invoice title and table remain.",{"type":18,"tag":134,"props":135,"children":139},"g",{"fontSize":136,"fill":137,"fontWeight":138},"13","#0A0C3D","500",[140,148],{"type":18,"tag":23,"props":141,"children":145},{"x":142,"y":143,"textAnchor":144},"140","18","middle",[146],{"type":23,"value":147},"Print CSS off",{"type":18,"tag":23,"props":149,"children":151},{"x":150,"y":143,"textAnchor":144},"420",[152],{"type":23,"value":153},"Print CSS on (use_print: true)",{"type":18,"tag":155,"props":156,"children":164},"rect",{"x":157,"y":158,"width":159,"height":160,"rx":161,"fill":162,"stroke":163},"40","30","200","260","6","#FFFFFF","#C6B2FF",[],{"type":18,"tag":155,"props":166,"children":172},{"x":167,"y":168,"width":169,"height":170,"rx":171,"fill":137},"56","46","168","20","4",[],{"type":18,"tag":23,"props":174,"children":178},{"x":175,"y":176,"fill":162,"style":177},"66","60","font-size:10px",[179],{"type":23,"value":180},"Dashboard  Invoices  Settings",{"type":18,"tag":155,"props":182,"children":186},{"x":167,"y":183,"width":183,"height":184,"rx":185,"fill":137},"80","12","2",[],{"type":18,"tag":155,"props":188,"children":192},{"x":167,"y":189,"width":190,"height":161,"rx":185,"fill":191},"98","110","#DBE4F2",[],{"type":18,"tag":134,"props":194,"children":195},{"fill":191},[196,200,203,207],{"type":18,"tag":155,"props":197,"children":199},{"x":167,"y":198,"width":169,"height":161,"rx":185},"122",[],{"type":18,"tag":155,"props":201,"children":202},{"x":167,"y":142,"width":169,"height":161,"rx":185},[],{"type":18,"tag":155,"props":204,"children":206},{"x":167,"y":205,"width":169,"height":161,"rx":185},"158",[],{"type":18,"tag":155,"props":208,"children":210},{"x":167,"y":209,"width":169,"height":161,"rx":185},"176",[],{"type":18,"tag":155,"props":212,"children":216},{"x":167,"y":159,"width":213,"height":214,"rx":171,"fill":215},"70","22","#6C47FF",[],{"type":18,"tag":23,"props":218,"children":221},{"x":219,"y":220,"fill":162,"style":177,"textAnchor":144},"91","215",[222],{"type":23,"value":223},"Pay online",{"type":18,"tag":155,"props":225,"children":227},{"x":226,"y":158,"width":159,"height":160,"rx":161,"fill":162,"stroke":163},"320",[],{"type":18,"tag":155,"props":229,"children":231},{"x":230,"y":168,"width":183,"height":184,"rx":185,"fill":137},"336",[],{"type":18,"tag":155,"props":233,"children":235},{"x":230,"y":234,"width":190,"height":161,"rx":185,"fill":191},"64",[],{"type":18,"tag":134,"props":237,"children":238},{"fill":191},[239,243,247,251],{"type":18,"tag":155,"props":240,"children":242},{"x":230,"y":241,"width":169,"height":161,"rx":185},"88",[],{"type":18,"tag":155,"props":244,"children":246},{"x":230,"y":245,"width":169,"height":161,"rx":185},"106",[],{"type":18,"tag":155,"props":248,"children":250},{"x":230,"y":249,"width":169,"height":161,"rx":185},"124",[],{"type":18,"tag":155,"props":252,"children":254},{"x":230,"y":253,"width":169,"height":161,"rx":185},"142",[],{"type":18,"tag":19,"props":256,"children":257},{},[258,260,266,268,274,276,282,284,289],{"type":23,"value":259},"The preview is one long page. It doesn't show page breaks, margins, headers or footers: those only appear in the PDF itself. Print CSS reads the print rules in ",{"type":18,"tag":68,"props":261,"children":263},{"className":262},[],[264],{"type":23,"value":265},"\u003Cstyle>",{"type":23,"value":267}," tags and in the ",{"type":18,"tag":68,"props":269,"children":271},{"className":270},[],[272],{"type":23,"value":273},"media",{"type":23,"value":275}," attribute of ",{"type":18,"tag":68,"props":277,"children":279},{"className":278},[],[280],{"type":23,"value":281},"\u003Clink>",{"type":23,"value":283}," tags. It doesn't pick up an ",{"type":18,"tag":68,"props":285,"children":287},{"className":286},[],[288],{"type":23,"value":73},{"type":23,"value":290}," block inside a linked stylesheet file.",{"type":18,"tag":26,"props":292,"children":294},{"id":293},"why-are-images-or-fonts-missing-in-the-preview",[295],{"type":23,"value":296},"Why are images or fonts missing in the preview?",{"type":18,"tag":19,"props":298,"children":299},{},[300,302,308],{"type":23,"value":301},"Because the preview can't find your files. Relative URLs in pasted HTML are read against the address of this page, so ",{"type":18,"tag":68,"props":303,"children":305},{"className":304},[],[306],{"type":23,"value":307},"\u003Cimg src=\"logo.png\">",{"type":23,"value":309}," asks pdfshift.io for a file it doesn't have. Stylesheets and fonts loaded by relative path break the same way.",{"type":18,"tag":19,"props":311,"children":312},{},[313,315,321,323,329],{"type":23,"value":314},"The fix is one line. Add a ",{"type":18,"tag":68,"props":316,"children":318},{"className":317},[],[319],{"type":23,"value":320},"\u003Cbase>",{"type":23,"value":322}," tag at the top of ",{"type":18,"tag":68,"props":324,"children":326},{"className":325},[],[327],{"type":23,"value":328},"\u003Chead>",{"type":23,"value":330}," with the address your files live at, or write the URLs out in full.",{"type":18,"tag":105,"props":332,"children":334},{"caption":333},"Where a relative image path points, with and without a base tag.",[335],{"type":18,"tag":110,"props":336,"children":341},{"viewBox":337,"xmlns":113,"role":114,"ariaLabelledBy":338,"style":118,"fontFamily":119},"0 0 560 200",[339,340],"hv-base-title","hv-base-desc",[342,347,352],{"type":18,"tag":122,"props":343,"children":344},{"id":339},[345],{"type":23,"value":346},"A base tag sends relative paths back to your own site",{"type":18,"tag":128,"props":348,"children":349},{"id":340},[350],{"type":23,"value":351},"Without a base tag, img src logo.png resolves to https://pdfshift.io/tools/html-viewer/logo.png, which doesn't exist. With base href https://example.com/invoices/, it resolves to https://example.com/invoices/logo.png, where the file is.",{"type":18,"tag":134,"props":353,"children":354},{"fontSize":136,"fill":137},[355,360,366,372,380,385,391,397,403,409,412,417,421,425,428],{"type":18,"tag":23,"props":356,"children":357},{"x":170,"y":158,"fontWeight":138},[358],{"type":23,"value":359},"Without a base tag",{"type":18,"tag":155,"props":361,"children":365},{"x":170,"y":362,"width":363,"height":364,"rx":161,"fill":162,"stroke":163},"42","170","34",[],{"type":18,"tag":23,"props":367,"children":369},{"x":368,"y":234,"textAnchor":144},"105",[370],{"type":23,"value":371},"src=\"logo.png\"",{"type":18,"tag":373,"props":374,"children":379},"line",{"x1":375,"y1":376,"x2":377,"y2":376,"stroke":378,"strokeWidth":185},"190","59","232","#4C556D",[],{"type":18,"tag":381,"props":382,"children":384},"polygon",{"points":383,"fill":378},"232,54 242,59 232,64",[],{"type":18,"tag":155,"props":386,"children":390},{"x":387,"y":362,"width":388,"height":364,"rx":161,"fill":162,"stroke":389,"strokeWidth":185},"244","296","#FF9D28",[],{"type":18,"tag":23,"props":392,"children":394},{"x":393,"y":234,"textAnchor":144},"392",[395],{"type":23,"value":396},"pdfshift.io/tools/html-viewer/logo.png",{"type":18,"tag":23,"props":398,"children":400},{"x":393,"y":399,"textAnchor":144,"fill":378},"94",[401],{"type":23,"value":402},"Not found: the image doesn't show",{"type":18,"tag":23,"props":404,"children":406},{"x":170,"y":405,"fontWeight":138},"130",[407],{"type":23,"value":408},"With \u003Cbase href=\"https://example.com/invoices/\">",{"type":18,"tag":155,"props":410,"children":411},{"x":170,"y":253,"width":363,"height":364,"rx":161,"fill":162,"stroke":163},[],{"type":18,"tag":23,"props":413,"children":415},{"x":368,"y":414,"textAnchor":144},"164",[416],{"type":23,"value":371},{"type":18,"tag":373,"props":418,"children":420},{"x1":375,"y1":419,"x2":377,"y2":419,"stroke":378,"strokeWidth":185},"159",[],{"type":18,"tag":381,"props":422,"children":424},{"points":423,"fill":378},"232,154 242,159 232,164",[],{"type":18,"tag":155,"props":426,"children":427},{"x":387,"y":253,"width":388,"height":364,"rx":161,"fill":162,"stroke":215,"strokeWidth":185},[],{"type":18,"tag":23,"props":429,"children":430},{"x":393,"y":414,"textAnchor":144},[431],{"type":23,"value":432},"example.com/invoices/logo.png",{"type":18,"tag":434,"props":435,"children":440},"pre",{"className":436,"code":438,"language":439,"meta":7},[437],"language-html","\u003Chead>\n  \u003Cbase href=\"https://example.com/invoices/\">\n  ...\n\u003C/head>\n","html",[441],{"type":18,"tag":68,"props":442,"children":443},{"__ignoreMap":7},[444],{"type":23,"value":438},{"type":18,"tag":26,"props":446,"children":448},{"id":447},"is-my-html-sent-anywhere",[449],{"type":23,"value":450},"Is my HTML sent anywhere?",{"type":18,"tag":19,"props":452,"children":453},{},[454,456,462],{"type":23,"value":455},"No. Your browser draws it in an ",{"type":18,"tag":68,"props":457,"children":459},{"className":458},[],[460],{"type":23,"value":461},"\u003Ciframe>",{"type":23,"value":463}," on this page, and nothing in the tool uploads it. Files you open are read by your browser too, up to 2 MB.",{"type":18,"tag":19,"props":465,"children":466},{},[467],{"type":23,"value":468},"The frame is sandboxed. Scripts stay off until you tick Run JavaScript. Forms show but don't submit, links that open new windows do nothing, and even with scripts on, the HTML can't read pdfshift.io's cookies or move you to another page.",{"type":18,"tag":26,"props":470,"children":472},{"id":471},"turn-the-html-into-a-pdf",[473],{"type":23,"value":474},"Turn the HTML into a PDF",{"type":18,"tag":19,"props":476,"children":477},{},[478,480,486],{"type":23,"value":479},"When it looks right, send the same HTML to PDFShift as the ",{"type":18,"tag":68,"props":481,"children":483},{"className":482},[],[484],{"type":23,"value":485},"source",{"type":23,"value":487}," of one request. We render it in Chromium and send the PDF back, so there's no browser for you to run or patch. Here it is in Node 18 or later:",{"type":18,"tag":434,"props":489,"children":494},{"className":490,"code":492,"language":493,"meta":7},[491],"language-javascript","import { readFile, writeFile } from 'node:fs/promises';\n\nconst html = await readFile('invoice.html', 'utf8');\n\nconst response = await fetch('https://api.pdfshift.io/v3/convert/pdf', {\n    method: 'POST',\n    headers: {\n        'X-API-Key': process.env.PDFSHIFT_API_KEY,\n        'Content-Type': 'application/json'\n    },\n    // use_print: true applies your @media print rules, like Print CSS above\n    body: JSON.stringify({ source: html, use_print: true })\n});\n\nif (!response.ok) {\n    throw new Error(`PDFShift returned ${response.status}: ${await response.text()}`);\n}\n\nawait writeFile('invoice.pdf', Buffer.from(await response.arrayBuffer()));\n","javascript",[495],{"type":18,"tag":68,"props":496,"children":497},{"__ignoreMap":7},[498],{"type":23,"value":492},{"type":18,"tag":19,"props":500,"children":501},{},[502,504,510,512,518],{"type":23,"value":503},"The free plan gives you 50 credits a month with no credit card: ",{"type":18,"tag":43,"props":505,"children":507},{"href":506},"/register/",[508],{"type":23,"value":509},"create an account",{"type":23,"value":511}," to get an API key. For the same call in other languages, see ",{"type":18,"tag":43,"props":513,"children":515},{"href":514},"/guides/node/axios/convert-html-to-pdf-from-raw-html/",[516],{"type":23,"value":517},"converting raw HTML to PDF",{"type":23,"value":519}," in our guides.",{"title":7,"searchDepth":521,"depth":521,"links":522},2,[523,524,525,526],{"id":28,"depth":521,"text":31},{"id":293,"depth":521,"text":296},{"id":447,"depth":521,"text":450},{"id":471,"depth":521,"text":474},"markdown","content:tools:html-viewer.md","content","tools/html-viewer.md","md",1793984627806]