Creating your first PDF with jsPDF
jsPDF builds PDF files in JavaScript. The smallest document is one constructor call and one line of text.
How it works
- Create a document.
new jsPDF()with no options gives the README's default page. [1] - Write text at a position.
doc.text("Hello world!", 10, 10)places the string 10 units from the left and 10 from the top. A second call adds a line 10 units lower. [1] - Look inside the file. The panel is filled from
doc.output(), the generated PDF as a string, showing the page MediaBox and one text block perdoc.textcall. The button callsdoc.save("a4.pdf"). [1]
Run and edit it
It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.
import { jsPDF } from "jspdf";
// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.text("This PDF was generated in your browser.", 10, 20);
show(doc, "a4.pdf");
// Display the generated file: size, page box and the text commands jsPDF wrote
function show(doc, file) {
const pdf = doc.output(); // the whole PDF file as a string
const box = pdf.match(/\/MediaBox \[([^\]]*)\]/);
const ops = pdf.match(/\bBT\b[\s\S]*?\bET\b/g) || [];
const root = document.getElementById("root");
root.style.cssText = "height:100%;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:10px;background:#111;color:#e5e7eb;font:14px system-ui,sans-serif";
const head = document.createElement("div");
head.textContent = `${file} · ${pdf.length} bytes · page MediaBox [${box ? box[1].split(" ").map(Number).join(" ") : "?"}] (points)`;
const label = document.createElement("div");
label.style.cssText = "color:#9ca3af;font-size:13px";
label.textContent = "Text drawing commands inside the PDF (one per doc.text call):";
const pre = document.createElement("pre");
pre.style.cssText = "flex:1;margin:0;overflow:auto;white-space:pre-wrap;padding:12px;border-radius:8px;background:#1b1d24;border:1px solid #333;color:#86efac;font:13px/1.7 ui-monospace,monospace";
pre.textContent = ops.map((op) => op.replace(/\s+/g, " ")).join("\n") || pdf.slice(0, 600);
const btn = document.createElement("button");
btn.textContent = "Download " + file;
btn.style.cssText = "align-self:flex-start;padding:8px 14px;border:0;border-radius:6px;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer";
btn.onclick = () => doc.save(file);
root.replaceChildren(head, label, pre, btn);
}
Change the text or the coordinates and the commands in the panel update; the button downloads the PDF. Code written by AgentGid [1].
Change the text or the coordinates and the commands in the panel update; the button downloads the PDF. Code written by AgentGid [1].Checked Oct 12, 2026: it starts without errors in Chromium with jspdf 4.2.1. Needs WebGL.
More jsPDF examples
Page size, orientation and units in jsPDF Switching fonts with setFont in jsPDF Downloading a generated PDF with jsPDF save() Generating a PDF from user input with jsPDF
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.