Typed visual authoring
Broadway
A template editor with generated forms, live preview, and high-quality image and document exports.
I designed and built this project independently, using my own resources.
Explore the project
Public repository
Technical documentation
Try the public generator and gallery, or inspect the source and template documentation.
Technologies
01 / Context
The problem behind the project
Repeatedly creating branded visual pieces should not require manually rebuilding a layout or wiring a custom form for every template.
Broadway turns reusable presentation templates into editable, exportable content. The same definition should determine the form the author fills in, the preview they see, and the artifact they export; maintaining three separate versions would create predictable drift.
The project grew beyond vertical social images into documents and a separate programmatic-video path. Each medium has a different correctness boundary: a PNG must capture its fonts and images, a document should retain selectable text, and a video needs verifiable timing and media properties.
02 / Implementation
Design and implementation
I build the typed template system, generated editing forms, previews, and export workflows.
I built the template registry, typed fields, generated editor forms, preview renderer, packaged-asset contract, PNG export, and vector PDF path. Template definitions declare their exact local font faces, and the preview and image embedding use the same declaration.
Export preflight rejects missing fonts and non-embeddable images rather than silently producing a different layout. I kept product-specific authoring behavior in Broadway and shared UI primitives in Bleecker.
The isolated video package adds deterministic compositions, local fonts/logos, versioned fixture validation, H.264 output, representative-frame checks, and media probing. It can turn a human-selected window from a finalized Alana recording into an unpublished excerpt draft.
03 / Architecture
Architecture and workflow
Declare a template
Typed fields, presentation code, and required assets describe one reusable format.
Generate the authoring surface
The editor derives inputs and renders a live preview from that declaration.
Preflight and export
Check required media/fonts, then produce PNG or a document-appropriate vector PDF.
Keep video isolated
A separate rendering package validates compositions and recording excerpts without changing the existing application export path.
04 / Approach
Engineering decisions
The template declares its inputs
Typed fields drive the editing form and preview so a template has one clear contract.
Use the right output format
Visual pieces export to high-quality PNG. Document templates export as vector PDF with selectable text.
Keep rendering separate from publishing
Programmatic-video and excerpt work can be prepared and verified as drafts before any publishing step.
05 / Evidence
Evidence and outcomes
Template/export contract checks exercise registration and asset requirements. The video path additionally verifies encoded output with ffprobe and checks representative frames and selected duration.
An excerpt remains a draft with explicit queued, rendering, rendered, failed, and canceled states. Rendering an artifact does not authorize its publication.
Source and technical notes
06 / Current scope
Where it stands
The project has grown beyond a fixed-size story generator. Its public source documents static, document, and media-authoring workflows.
Video tooling is deliberately isolated from the web application’s runtime dependencies. Human selection and approval remain part of the excerpt workflow.
Template export quality depends on declared, locally available assets. Remote runtime font substitution is rejected rather than accepted as a visually similar result.