TypeCell: A New Live Programming Environment for the Web

on YouTube ↗20m

" summary

TypeCell is a live TypeScript notebook that renders DOM/JSX, loads npm packages and React, and uses Monaco as the editor; TypeScript compiles to JS which runs in a sandbox iframe on a different domain to block access to cookies and auth. A mobx reactive engine updates exported variables and custom type visualizers (color box, live Google Map, react-vega charts) as code changes. Notebooks export to a git repo as regular TypeScript, use yjs CRDTs for collaboration, and still require work on code-edit APIs, infinite loop and resource disposal.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 0:39Inspiration TypeCell Notebooks
3. 1:55Overview TypeCell: a new live programming environment for the web
4. 6:25Challenges creating a robust live client-side programming environment
5. 8:38Experiment: moldable development Custom Visualizers / Inspectors
6. 11:17Future works breaking out of the notebook environment Reactive Documents

" related talks

• 27mTypeCell: End-User Programming in Block-Based rich text documentsYousef El-Dardiry · LIVE 2023
• 35mBuilding a Browser Based Code EditorJo Franchetti · NDC London 2025
• 35mMaking a lot of thingsBen Foxall · Full Stack Fest 2017
• 16mTypeScript + GitHub CodespacesAaron Powell · TSConf 2020
• 32mTooling Like It's 2025Josh Goldberg · JSHeroes 2025
• 34mBuilding a Browser Based Code EditorJo Franchetti · CPH DevFest 2024
• 21mBuilding an in-browser code editor (that can run your code too!)Jo Franchetti · CityJS London 2025
• 27mREPL/Playground, Let's do it Live!L. Preston Sego III · EmberFest 2021