Show HN: Tsofa – The Simple, Offline Flashcard App

2 hours ago 1

TSOFA ("tee-sofa") - The Simple, Offline, Flashcard App - is a flash card app that exists entirely in a single HTML file you can view in the browser. Here is a basic demo.

You can edit the flashcards directly in the file, using just text or HTML tags. It also supports a CSV string for the flashcard content so you can import flashcards from other apps. Otherwise, it's just a simple, free flashcard app: No server, no ads, no registration, no premium features to pay for, no dependencies, no build process, no cloud sync.

Features

Single HTML file - Everything in one HTML file, easy to share and view on any device
Keyboard controls - Space to flip, arrows to navigate
HTML support - Embed images, format text, add links
Shuffle cards - Randomize order for practice
Invert Q/A - Swap questions with answers
Remove flashcards - Remove cards as you master them, reload the page to bring them back
Center toggle - Uncheck for code with preserved indentation
Integrated timer - If you want to time your run through the flashcard deck
CSV import - Paste data from spreadsheets
Printable - Print a paper copy of the flashcards
Zero setup - Works immediately offline, no programming skills needed
Free - No registration, no paywall

Example Flashcard Sets

(These flashcards are AI-generated and not thoroughly reviewed for correctness.)

Array/JSON Format for Flashcards

For the array/JSON format, I recommend using backticks (on the keyboard to the left of the 1 key) for the FLASHCARDS string values so you can include quote characters and span multiple lines. You can optionally add a TOPIC setting as well to display on the page.

const TOPIC = "(Put a topic to display on the page here, or leave this empty.)"; let FLASHCARDS = [ [`What is the capital of France?`, `Paris`], [`What is 2 + 2?`, `4`], [`What is the largest planet in our solar system?`, `Jupiter It has a mass of 1.898 × 10²⁷ kg`], [`What year did World War II end?`, `1945`], [`Who wrote 'Romeo and Juliet'?`, `William Shakespeare <img src="shakespeare.png">`], [`What is HTML?`, `HyperText Markup Language The standard markup language for creating web pages`], ];

CSV String Format for Flashcards

Alternatively, you can also load flashcards from a single string of CSV (comma-separated values) text. This format is often used by spreadsheets or as an export format in other flashcard apps.

const TOPIC = "(Put a topic to display on the page here, or leave this empty.)"; let FLASHCARDS = `"Question 1","Answer 1" "Question 2","Answer 2" "Question with, comma","Answer with, comma"`;