Inline content editor
- Type
- Internal tool
- Timeline
- Jul 2026
- Role
- Design & build
- Stack
- Next.js · TypeScript
A dev-only editor built into the site itself: hover any piece of text, edit it in place, and the change writes straight back to the content files as a reviewable diff — turning this portfolio into its own lightweight CMS.
The problem
Changing a headline or fixing a typo meant hunting through TypeScript, editing the right string literal without breaking the build, then redeploying. Small edits carried real friction — and real risk of shipping a mistake.
What I built
The same page you're reading becomes editable in development. Each editable region shows an affordance on hover; saving PATCHes the underlying JSON and hot-reloads the change — no separate admin, no deploy, and the edit is a plain git diff you can review or discard.
Undo, redo, and reordering
Every save — a text edit, a reorder, an insert, a delete — now lands on a shared undo/redo history instead of being final the moment it's written. A small toolbar (⌘Z / ⌘Y) sits at the bottom of every page, and a "Highlight changes" toggle marks anything touched this session. Sections, prose blocks, and About page entries (experience, volunteering, skills) also picked up ↑↓ reorder buttons, plus +/✕ to add or delete a sibling — a new block matches the type of the one it's added next to, so the format carries over automatically.
Editing without a form
Paragraphs, headings, and leads — plus single-field entries like page and section titles — no longer swap out for a boxed form. Click straight into the text and it becomes the input, styled to match, with a dashed underline marking edit mode; saving happens on ⌘Enter or by clicking away.
Releases
- Jul 24, 2026
Editing without a form
Single-field text — paragraphs, headings, leads, page and section titles — is now edited by clicking directly into it, styled to match, with a dashed underline marking edit mode. No more swapping the whole block for a boxed form.
- Jul 24, 2026
Reordering and add/delete for lists
Added ↑↓ reorder buttons to project sections, prose blocks, About page entries, and Work page project cards, plus +/✕ to add or delete sections and text blocks — a new block matches the format of the one it's added next to.
- Jul 24, 2026
Undo, redo, and highlight changes
Every edit — including reorders, inserts, and deletes — can now be undone with ⌘Z and redone with ⌘Y from a toolbar on every page. A "Highlight changes" toggle marks whatever's been edited this session.
- Jul 24, 2026
Editing reached every page
Brought inline editing to the landing, work, about, and contact pages — project titles and summaries, focus pills, experience entries, and calls to action.
- Jul 23, 2026
Writes locked to this machine
Hardened the save endpoint — development-only, localhost-bound, and cross-origin requests refused — so an open write path can't be reached from anywhere else.
- Jul 23, 2026
Content lifted into JSON
Moved page and project copy out of TypeScript literals into JSON files, so every edit lands as a clean, reviewable git diff.
- Jul 23, 2026
Section headings made editable
Extended the editor beyond prose to section headings, which also move the anchors the sidebar table of contents links to.
- Jul 23, 2026
First inline editor shipped
A dev-only editor for prose blocks: hover any paragraph, click edit, and save straight to disk.
Interested in working together?
Let's talk about your project.