A browser-based TypeScript app that converts structured content into print-ready 6 × 4 inch landscape PDF flashcards (front + back). Designed for physical printing with minimal ink usage.
- Three import formats — JSON, YAML, or Markdown
- PDF output — one page per card side (front then back), landscape 6 × 4 in
- Auto-shrink — font scales down automatically if content overflows
- Ink-minimal design — white background, greyscale text, no fills or borders
- Deck library — 9 pre-built decks (~205 cards) covering DSA, algorithms, LeetCode patterns, and system design
- 25 built-in example cards — Big O notation time & space complexity
- Runs entirely in the browser — no server required
npm install
npm run devOpen http://localhost:5173, paste or load card content, then click Generate PDF.
npm run build # outputs to dist/
npm run preview # serve the built dist/The app is automatically deployed to GitHub Pages on every push to the main branch via GitHub Actions.
Setup GitHub Pages:
- Go to your repository Settings → Pages
- Under Source, select GitHub Actions
- Push to
main— the workflow will build and deploy automatically
The site will be available at: https://<username>.github.io/flashcards/
Cards are separated by === on its own line. Front and back are separated by --- on its own line. An optional # Heading on the first line of the front becomes the card topic.
===
# Card Topic
Front side text goes here.
Multiple lines are fine.
---
Back side answer goes here.
More detail on additional lines.
===
# Second Card
Another question.
---
Another answer.
===
A top-level array of objects with front, back, and optional topic fields.
[
{
"topic": "Card Topic",
"front": "Question text",
"back": "Answer text"
}
]A YAML sequence of objects with the same fields. Literal block scalars (|) preserve newlines.
- topic: Card Topic
front: |
Question text
second line
back: |
Answer text
more detail| Property | Value |
|---|---|
| Page size | 6 × 4 inches, landscape |
| Pages per card | 2 (front + back) |
| Default font size | 18 pt (auto-shrinks to fit) |
| Font | Helvetica (body), Courier (code/complexity lines) |
| Background | White |
| Corner label | [ FRONT ] / [ BACK ] in light grey |
src/
types.ts — Flashcard, PDFOptions interfaces and defaults
parsers.ts — JSON, YAML, Markdown parsers + auto-detect
pdf-generator.ts — jsPDF rendering engine
examples.ts — 25 Big O notation example cards
main.ts — UI wiring
decks/ — Deck library (9 decks, ~205 cards)
types.ts — DeckInfo, DeckLevel type definitions
index.ts — DECK_LIBRARY registry and helpers
*.ts — Individual deck files
index.html — Single-page app shell + embedded CSS
.github/
workflows/
deploy.yml — GitHub Actions deployment workflow
jsPDF's built-in fonts (Helvetica, Courier) use WinAnsi (Latin-1 / Win-1252) encoding. Characters outside this range (emoji, Unicode arrows, superscripts, etc.) will render as garbage glyphs. Keep all card content to plain ASCII or basic Latin-1. The generator includes a sanitize() function that strips/replaces common offenders automatically.
Safe substitutions:
->instead of→^2instead of²O(n^2)instead ofO(n²)>=instead of≥-instead of—or–
MIT