@prosperis/resumes

A standalone, controlled React resume-builder component library: editing forms, a live interactive preview, 25+ templates, a style customizer, export (PDF/DOCX/Markdown/LaTeX/HTML/plain-text/JSON), undo/redo, and a versioning UI.

Extracted from Resumier so the builder can be embedded in any React app. The library owns no persistence — it is a fully controlled component. The consuming app decides where resume data lives (local, cloud, profiles, multi-resume management, etc.).

Install

bun add @prosperis/resumes
# or: npm install @prosperis/resumes

react and react-dom (v19+) are peer dependencies.

Usage

import { ResumeBuilder, DEFAULT_STYLE_CONFIG } from "@prosperis/resumes";
import "@prosperis/resumes/styles.css";
import { useState } from "react";
import type { ResumeContent, StyleConfig } from "@prosperis/resumes";

export function Editor() {
  const [content, setContent] = useState<ResumeContent>(initialContent);
  const [style, setStyle] = useState<StyleConfig>(DEFAULT_STYLE_CONFIG);

  return (
    <ResumeBuilder
      content={content}
      style={style}
      onChange={setContent}
      onStyleChange={setStyle}
    />
  );
}

Styles

Import the compiled stylesheet once, near your app entry:

import "@prosperis/resumes/styles.css";

It ships Tailwind v4 output plus the design tokens (CSS variables for colors, fonts, dark mode, RTL, and print). Override the CSS variables in your own app to re-theme — no Tailwind configuration required on the consumer side.

API

<ResumeBuilder>

The all-in-one shell: editing form + interactive preview + tools panel.

Prop	Type	Description
content	ResumeContent	Controlled resume content.
style	StyleConfig	Controlled template + colors/fonts.
onChange	(content) => void	Fires on every content edit.
onStyleChange	(style) => void	Fires on style/template changes.
features	{ undoRedo?, versions?, export?, templateGallery?, styleCustomizer? }	Toggle features (all default on).
versions	VersionsApi	Versioning callbacks (list, onSave, onRestore, onDelete, onUpdateLabel, onClear). Omit to hide the version panel.
export	{ promptFilename?, defaultFilename?, onExport? }	Export behavior.
headerSlot	ReactNode	Slot above the form (e.g. an app-provided import banner).

Undo/redo is internal (the library keeps an ephemeral edit stack and emits onChange). Versioning is delegated to the app via the versions callback API, so snapshots can live wherever the app wants.

Composable exports

If you want to build your own layout instead of the all-in-one shell:

• <ResumeForm content headerSlot /> — the editing accordion
• <ResumePreview content template style /> — the pure renderer
• <InteractiveResumePreview content template style onChange />
• <StyleCustomizer /> / <TemplateSelector /> (require a StyleProvider)
• <VersionPanel currentContent template versions />
• <ExportMenu resume />
• useUndoableContent(content, onChange) — the undo/redo hook
• useAutoSave(), useEntityListHandlers() (require a BuilderContentProvider)
• templates registry + individual template components
• exportResume helpers from export-utils
• All types: ResumeContent, StyleConfig, PersonalInfo, Experience, …

When composing pieces yourself, wrap them in BuilderContentProvider (content + onChange) and StyleProvider (style + onStyleChange) — ResumeBuilder does this for you.

Development

bun install
bun run build      # tsc --noEmit + vite lib build (dist/index.js + .d.ts + styles.css)
bun run test       # vitest
bun run typecheck

Built with Vite library mode. Declarations are generated per-file via vite-plugin-dts.

License

MIT