Scalable Design Systems with TypeScript
summary
Claims that TypeScript plus a design system can become living, always-correct docs and demos, and proves it by building a browser playground that reads Markdown, transpiles TSX, and mounts the Monaco Editor with virtual file models to supply node_modules-style type declarations. The repo—an operational style guide—runs type-checking in the browser, surfaces red squiggles for breaking props, and powers autocomplete; a real feature in a large codebase goes from days to ~15 minutes. The implementation works but relies on pragmatic hacks (in-browser transpile, eval, worker-backed models).
AI-written summary · about
chapters (15)
- 0:00Introduction
- 0:25About Tejas
- 1:05About TypeScript
- 2:03Why TypeScript
- 7:36Design Systems
- 10:58Operational UI
- 13:37Monaco Editor
- 17:21Code Base
- 24:49ImportExport
- 27:49TypeScript Editor
- 28:29Get Worker URL
- 29:21TypeScript
- 30:14Create Model
- 32:01Export Model
- 33:19Summary
related talks
21mHow Typescript Can Power Design Systems
17mHow Typescript Can Power Design Systems
45mDesign systems adventures with React and TypeScript
46mBeachcomber's Guide to Type-Safe Design Systems
39mDesign Systems with Deno and Oceanwind
40mTypeScript: State of the Union
32mTooling Like It's 2025
25mBuilding a Design System as a team