II · Internal tooling
Lesson
Studio
A custom editor that revises German course lessons directly on the rendered page. Click a block to move it, double-click text to edit it in place, instead of hand-editing JSON.
Hand-editing a lesson's underlying JSON to fix a typo, reorder a concept, or restructure a quiz question was slow and error-prone. I needed the confidence to restructure lesson content freely, moving a block, splitting a paragraph, relocating a quiz question to another round, without breaking the schema or spending more time fighting the tooling than writing the actual lesson.
A browser-based editor that renders the real lesson page inside an iframe, then maps the rendered DOM back to JSON paths in real time. Click a block to select it, then move, duplicate, insert, or delete it. Double-click any text to edit it in place, with a markup toolbar for bold, italic, gender tags, and fill-in-the-blank markers. Content relocates between concepts and quiz rounds through a dedicated menu.
Every action, however structurally involved, is a single undo away. I styled it deliberately like VS Code or Chrome DevTools: dense, dark, keyboard-first, since it only ever has one user.
The hard part was not the editing UI. It was keeping the rendered DOM and the underlying JSON perfectly in sync as a single source of truth. Building a structural mapping layer that walks the JSON and the DOM in lockstep with the renderer's own rules taught me to treat what you see is what you get as an architectural constraint to design around from the start, not a UI nicety to bolt on afterward.