{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Itera turns your résumé into a page you edit directly, not a form that generates one. Open your own HTML file and it appears as a sheet of paper on a canvas — click any line and type, and what you see is exactly what exports. No template picker standing between you and the words, no re-upload after every tweak."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edit in place.","marks":[{"type":"bold"}]},{"type":"text","text":" Every editable region — name, headline, summary, job titles, bullets, skills — is a rich-text editor mounted directly on your template's own elements."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A formatting bar that follows you.","marks":[{"type":"bold"}]},{"type":"text","text":" It floats just above whatever box you're editing: bold, italic, underline, font size in pt, weight, line height, letter spacing, color, links, bullets, a horizontal rule, alignment, clear formatting."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bullets that flow from one input.","marks":[{"type":"bold"}]},{"type":"text","text":" A job's bullet copy flows across two columns from a single field, with an optional \"start the next column here\" break — no separate left/right text to keep in sync."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent side-by-side columns for skills","marks":[{"type":"bold"}]},{"type":"text","text":", where each column is its own list."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Duplicate, move, or delete job entries","marks":[{"type":"bold"}]},{"type":"text","text":" without touching the rest of the layout."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Swap any image","marks":[{"type":"bold"}]},{"type":"text","text":" — click the logo, choose \"Change image.\""}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"US Letter or A4","marks":[{"type":"bold"}]},{"type":"text","text":", with "},{"type":"text","text":"Fit to one page","marks":[{"type":"bold"}]},{"type":"text","text":" that scales the whole design as a unit so every line keeps breaking exactly where you designed it."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pagination toggle","marks":[{"type":"bold"}]},{"type":"text","text":" — real pages with centered page numbers once you're past one page, or a single continuous sheet."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Fit width / Fit height zoom","marks":[{"type":"bold"}]},{"type":"text","text":" that tracks the window as you resize."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spellcheck toggle","marks":[{"type":"bold"}]},{"type":"text","text":", for when the red squiggles under \"Figma\" get old."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four exports","marks":[{"type":"bold"}]},{"type":"text","text":": PDF with real selectable text and live links, an ATS-ready Word DOCX, a PNG at 2×, and the source HTML itself — reloadable, which is how you keep variants."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Nothing leaves your browser.","marks":[{"type":"bold"}]},{"type":"text","text":" The document autosaves locally; your files are the only copy that matters."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Try it"}]},{"type":"paragraph","content":[{"type":"text","text":"Demo Itera","marks":[{"type":"link","attrs":{"href":"/labs/itera/demo","target":null,"rel":"noopener noreferrer"}}]},{"type":"text","text":" — it comes with a sample résumé loaded, so you can start clicking around immediately. Import your own HTML from the toolbar whenever you're ready."}]},{"type":"enhancedImage","attrs":{"src":"/labs/shots/itera-editor.png","alt":"A résumé open in Itera: the sheet on a dark canvas, ready to click and edit","title":"The whole tool: your résumé as a sheet of paper, one toolbar. Click any text to edit it.","align":"center","width":"100%","showCaption":true}},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"How it works"}]},{"type":"paragraph","content":[{"type":"text","text":"Your résumé is one HTML file. Itera reads a small set of conventions in it and turns the matching elements into editors — it doesn't own the design, your CSS does."}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Senior Designer, Acme

2023 – Present · Austin, TX

Shipped the design system used across every product surface.
Led discovery with users to validate the roadmap each quarter.

"}]},{"type":"paragraph","content":[{"type":"text","text":"[data-cv-edit]","marks":[{"type":"code"}]},{"type":"text","text":" marks an editable region. "},{"type":"text","text":"[data-cv-block]","marks":[{"type":"code"}]},{"type":"text","text":" is a unit pagination keeps together, and "},{"type":"text","text":"[data-cv-keep-next]","marks":[{"type":"code"}]},{"type":"text","text":" keeps a heading with the block that follows it. "},{"type":"text","text":"[data-cv-repeat=\"job\"]","marks":[{"type":"code"}]},{"type":"text","text":" is what makes a block duplicable, movable, and deletable in the UI. The rest is your own CSS — sizes are in pt, and everything lives under one scoping class."}]},{"type":"paragraph","content":[{"type":"text","text":"Click into any of those regions and the formatting bar shows up right above the line you're on:"}]},{"type":"enhancedImage","attrs":{"src":"/labs/shots/itera-format-bar.png","alt":"Itera's formatting bar floating above an edited line","title":"The format bar appears just above the box you are editing. At left: move, duplicate or delete the entry.","align":"center","width":"100%","showCaption":true}},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Columns that flow — and columns that don't"}]},{"type":"paragraph","content":[{"type":"text","text":"Two different column behaviors show up in most résumés, so Itera treats them differently:"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"type":"text","text":"/* one input, copy reflows across both columns as it grows or shrinks */\n.cv-job-body.cv-flow { column-count: 2; column-gap: 4pt; }\n\n/* two independent lists side by side — skills, not flowed prose */\n.cv-cols2 { display: flex; gap: 16pt; }"}]},{"type":"paragraph","content":[{"type":"text","text":"A job's bullets are "},{"type":"text","text":".cv-flow","marks":[{"type":"code"}]},{"type":"text","text":": one text field, real CSS columns, and the browser reflows them as you type — add a bullet and the rest of the column shifts to make room, exactly as it will in the exported PDF. Skills sections use plain side-by-side flex columns instead, because \"Core Competencies\" and \"Hard Skills\" are two separate lists that should never bleed into each other."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"One page, honestly"}]},{"type":"paragraph","content":[{"type":"text","text":"Fit to one page","marks":[{"type":"bold"}]},{"type":"text","text":" scales the whole design as a single unit — type, spacing, margins together — so a résumé that's a few lines too long shrinks until it fits, without breaking your line breaks or turning one bullet into three. Turn pagination on and a résumé that runs past one page gets real page breaks with centered page numbers; turn it off and it's one continuous scroll, useful while you're still editing."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Exports"}]},{"type":"enhancedImage","attrs":{"src":"/labs/shots/itera-export-menu.png","alt":"The Export menu: PDF, Word (DOCX), PNG and Source HTML","title":"The Export menu: PDF, Word (DOCX), PNG and Source HTML","align":"right","width":"44%","showCaption":false}},{"type":"paragraph","content":[{"type":"text","text":"Four formats, one menu. Each one is built for a different reader:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"PDF","marks":[{"type":"bold"}]},{"type":"text","text":", for people and for parsers. Real, selectable text and live links, so a recruiter can copy your email and an ATS can actually read the page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Word (DOCX)","marks":[{"type":"bold"}]},{"type":"text","text":", for application portals that insist on it. Genuine paragraphs and bullets, native Word columns where your copy flows, hyperlinks, and a page-number footer. It favors clean structure over pixel-matching, because that is what applicant tracking systems parse."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"PNG at 2×","marks":[{"type":"bold"}]},{"type":"text","text":", for anywhere a flat image is easier than a file: a portfolio page, a quick share, a slide."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Source HTML","marks":[{"type":"bold"}]},{"type":"text","text":", for you. It is the résumé itself, re-loadable. Save one per role you apply for and you have variants without a database."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"None of them needs a server. PDF uses your browser's own print pipeline and PNG renders in the page; if you would rather have one-click files, the optional local export server does both in headless Chrome."}]},{"type":"paragraph","content":[{"type":"text","text":"While an export renders, the sheet dims and a scan line sweeps it: long enough to know it is working, short enough to stay out of your way."}]},{"type":"enhancedImage","attrs":{"src":"/labs/shots/itera-export.png","alt":"An export in progress: the sheet dims and the scan line sweeps down it","title":"An export in progress. The scan line runs until the file is ready.","align":"center","width":"100%","showCaption":true}},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Make it yours"}]},{"type":"paragraph","content":[{"type":"text","text":"Nothing about the look is hard-coded to one résumé. Load a different source HTML from the toolbar to start from your own design. Click the logo (or any image) and choose \"Change image\" to swap it. And because Itera wears "},{"type":"text","text":"Infospector","marks":[{"type":"link","attrs":{"href":"/labs/infospector","target":null,"rel":"noopener noreferrer"}}]},{"type":"text","text":"'s glass UI, the two tools share one saved look — theme, background pattern, colors, accent, and the Material & Light controls (radius, padding, blur, shine, shadow, angle, tint). Change it in one and the other follows."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Install"}]},{"type":"paragraph","content":[{"type":"text","text":"It's one folder of static files — prebuilt, no npm install, no build step."}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Copy the folder into your static directory ("},{"type":"text","text":"public/","marks":[{"type":"code"}]},{"type":"text","text":" for Next.js, Vite, Astro, or Nuxt; "},{"type":"text","text":"static/","marks":[{"type":"code"}]},{"type":"text","text":" for SvelteKit and Hugo)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open "},{"type":"text","text":"/labs/itera/","marks":[{"type":"code"}]},{"type":"text","text":" in your browser."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hand "},{"type":"text","text":"INSTALL.md","marks":[{"type":"code"}]},{"type":"text","text":" to your AI assistant if you'd rather it do steps 1–2 for you — it's written as a checklist an agent can follow end to end."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Installing with an AI assistant?","marks":[{"type":"bold"}]},{"type":"text","text":" Paste it this:"}]},{"type":"codeBlock","attrs":{"language":"text"},"content":[{"type":"text","text":"Install Itera from https://github.com/qmanning/itera into this project by\nfollowing INSTALL.md in that repo end to end, then tell me the local URL to open it."}]},{"type":"paragraph","content":[{"type":"text","text":"An optional tiny local server gives you one-click PDF/PNG export via headless Chrome instead of the browser's own print dialog:"}]},{"type":"codeBlock","attrs":{"language":"bash"},"content":[{"type":"text","text":"node server.mjs"}]},{"type":"paragraph","content":[{"type":"text","text":"Point the tool at it — and at your own starting résumé and back button — with a "},{"type":"text","text":"config.js","marks":[{"type":"code"}]},{"type":"text","text":" next to it:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"window.ITERA = {\n home: \"./templates/sample-resume.html\",\n exportServer: \"http://localhost:7332/export\",\n backHref: \"/\",\n};"}]},{"type":"paragraph","content":[{"type":"text","text":"All three keys are optional."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Privacy"}]},{"type":"paragraph","content":[{"type":"text","text":"Nothing about your résumé leaves the browser. There's no server storage, no account, no upload — the document autosaves locally, and the files you export are the only copies that exist."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"License"}]},{"type":"paragraph","content":[{"type":"text","text":"MIT. The repo is "},{"type":"text","text":"github.com/qmanning/itera","marks":[{"type":"link","attrs":{"href":"https://github.com/qmanning/itera","target":"_blank","rel":"noopener noreferrer"}}]},{"type":"text","text":". Itera was called CV Maker until September 2026; old links redirect."}]}]}

More from the lab