CV Studio

A browser-based CV design editor. The default CV is fictional. Personal reference CVs and fonts are not included in the source.

Run

npm install
npm run dev

Open http://127.0.0.1:5173. Keep the server running while editing.

Select and edit

• Type directly in the name, headline, contacts, section headings, and formatted content on the page. The right panel also offers Markdown editing.
• Contact details are an ordinary, independent text block: move, resize, align, duplicate or delete it like any other block. Existing header contacts migrate automatically without duplicating links. Use “Show section heading” to show or hide any text block’s printed heading; its outline name remains visible.
• Shift-click blocks in the outline or canvas to select a contiguous range. Cmd/Ctrl-click toggles individual blocks. Select all selects every content block. Cmd/Ctrl+A does the same when you are not typing in a field; inside text it retains normal text selection.
• Change alignment, paragraph style, sizing, borders, and colours for all selected blocks. Bulk controls show the first block's values; changing a property applies only that property to the selection.
• Select text on the page and use the small formatting toolbar for bold, italic, lists, subheadings, and quotations. Links can be edited in Markdown. Typed or pasted HTML is sanitised; content converts back to Markdown while retaining semantic formatting.
• Undo/redo cover content, design, imports, layout, and bulk operations. Native typing undo remains available inside text fields. Cmd/Ctrl+S downloads a complete project.

Grid and images

• Drag the top handle to move blocks horizontally and vertically. Drag the left, right, or bottom edge to resize in cell increments. The right panel also has exact width, starting column, top row, and minimum height controls.
• Grid resolution is independent in both directions: 4–96 columns and 12–240 rows per printable page. Increasing resolution preserves physical placement as closely as snapping allows. “Make cells approximately square” is useful for square photo areas.
• Text grows to fit its contents; minimum height never clips it. Image blocks occupy the exact number of rows specified. Set an image to five columns and five rows for a 5 × 5 cell image.
• Occupied cells push colliding blocks down instead of allowing text overlap. Use top row 0 to return content to automatic flow. Explicit placement starts from row 1.
• Name, headline, contacts and logos are ordinary content blocks. The name defaults to H1 and can be moved, duplicated or deleted. Existing projects migrate once; deleted headers stay deleted when reloaded. The document name in the sidebar is a file label and is not printed.
• Image blocks accept PNG, JPEG, and WebP, with cover/contain fit and corner radius controls. Background images support cover, contain, repeat, and opacity. Backgrounds repeat on printed pages.
• The outline drag operation changes reading order and returns the moved block to flow. Canvas dragging changes grid placement. For manually positioned blocks, Markdown reading order remains the outline order.

Fonts and detailed styles

• Upload multiple TTF, OTF, WOFF, or WOFF2 files at once. Family, italic style, static weight, and variable axes are read from font metadata. Common “Italic” and “VAR” naming suffixes are normalised so related faces group together.
• Variable fonts retain their actual ranges, including nonstandard ranges such as 60–150. Choose numeric weights in typography, paragraph, or inline style controls. Other available axes such as width or optical size have controls as well.
• Uploaded-face details allow family/style/weight correction when unusual font metadata needs it. Static fonts use the nearest available face. Separate italic files are registered as italic faces within the same family.
• Design includes explicit H1–H6 defaults for family, size, weight, colour, case, spacing, italic style and divider rules. Block titles choose their heading level; a size override of zero uses the shared default. The same defaults style headings within body text. On-page H1–H6 buttons convert the current paragraph to a semantic heading; bold alone stays bold.
• Markdown styling groups H1–H6 and Body with rules for bold, italic, links, quotes/thesis text, lists and code. A zero inline weight means inherit.
• Design → Uploaded assets lists image blocks, background images and font files. Remove a single face, an entire family, or all uploaded fonts. Deleting an image block removes its embedded data from subsequent project exports. Deleted fonts fall back to available fonts; undo can restore assets.
• Default fonts load from Google Fonts and require connectivity; uploaded fonts are embedded in saved projects and do not require their original files.

Save and export

• Complete project: all content, layout, style settings, every uploaded font face, images, logo, and background, embedded together in a JSON file. Use this for portable, self-contained backups of uploaded content.
• Style file: typography, grid, block appearance, font files, header logo and background. Block images are content and belong in the complete project or Markdown export.
• Markdown: text, links, metadata, stable block markers, and embedded image blocks. The supplied frontmatter format with repeated contact: keys is supported. Complete projects preserve more design information than Markdown.
• PDF: choose Save as PDF in the browser print dialog, with 100% scale, background graphics enabled, and browser headers/footers disabled. The pinned page meter and page guides update as content and layout change. They are estimates; print preview remains authoritative.

Drafts and uploaded assets autosave to IndexedDB on this device. Old local-storage drafts and version-1 project/style files are migrated when loaded. Drafts do not sync across browsers or hostnames. Export a project before clearing browser data. If browser storage fails or fills, the app asks you to download a project.

Validation and limitations

npm test
npm run build

Tests cover Markdown and rich-text conversion, metadata preservation, multi-selection, bulk edits, snapped geometry, grid scaling, collision handling, font metadata and variable ranges, embedded asset round-trips, and migration of older files. The actual reference At Textual variable regular/italic files were checked locally without bundling them in this project. Browser interaction and visual print QA have not been performed in this revision.

The optional read_cv_markdown and replace_cv_markdown WebMCP tools are feature-detected; a supported runtime was not available for verification.

Source and deployment

• src/main.jsx: application state, selection, importing, and export
• src/Canvas.jsx: editable document, measurement, and pointer gestures
• src/DesignPanel.jsx, src/BlockPanel.jsx: controls
• src/model.mjs, src/layout.mjs: data validation and layout
• src/fonts.mjs: font metadata and browser registration
• src/RichText.jsx, src/rich-format.mjs: direct editing and Markdown conversion
• src/storage.mjs: local draft and embedded asset storage
• src/style.css: interface, document, responsive and print styles

npm run build produces a static site in dist/, with relative asset paths suitable for GitHub Pages. The GitHub Pages site is https://kuffmode.github.io/cvstudio/. Pages serves the generated docs/ directory on main. After changes, run tests, build, and copy the contents of dist/ into docs/ before committing. The .nojekyll marker keeps this a plain static site.

PDF preview opens the browser’s print preview, using the same pagination as Save as PDF.

Personal CVs, uploaded fonts, and images stay in the visitor’s browser and are not part of this repository. Built-in fonts load from Google Fonts. Localhost and the published site have separate draft storage: export your project locally and import it on the published site to continue editing.

Font metadata uses https://github.com/foliojs/fontkit. Google Fonts follows https://developers.google.com/fonts/docs/css2.