A reusable content layer: block editor and student-facing renderer in one package
Role
Frontend engineer: library development and evolution
Period
Jan 2024 — present
Team
3 people
Company
LazurM
Details and code are covered by an agreement: I describe the problems and solutions without exposing internals.
An internal library that powers the learning platform’s longreads. It provides a block content editor for authors and exactly the same renderer for students, so the builder and the player never diverge visually.
What I did
Over 400 commits into the library, with dev / stable / main branching for safe consumer updates
A single renderer shared by editing and viewing modes
Built in library mode and consumed as a dependency by the builder and the player
Editor state on Zustand, accessible interface primitives on Radix
Drag and drop for blocks and elements inside the content structure
Context
Why a library
A longread is the platform’s main learning format: text, images, embeds, assignments. It is created in the builder and consumed in the player, meaning the same content is needed by two different applications.
While rendering was duplicated in each application, any change to a block had to be repeated twice, and the gap between “what the author saw” and “what the student saw” appeared on its own.
Problem
The problem
A library is a public contract: updating it instantly affects several production applications. That requires version discipline and an API that can be extended without breaking changes.
A block content editor is a hard problem in itself: nesting, selection, pasting from external sources, keyboard behaviour, preserving the document structure.
Solution
The solution
Editing and viewing share one renderer, so the author and the student see the same blocks. The library is a separate package used by the builder and the player.
Outcome
The outcome
The library became the platform’s shared content layer: a new block type is added once and immediately available to both authors and students.
This is my personal pride in the project: working on code that other developers depend on demands a different level of care about API design and backward compatibility, and it taught me how a library differs from an application.
Major projectProductUnder NDA