Codestrates: Literate Computing with Webstrates

on YouTube ↗21m

" summary

Presents a system that embeds live JavaScript, styles and prose into persistent web pages so code and UI are edited in-place and shared in real time. The demo builds a collaborative groceries app, a multiplayer tank game fixed live by commenting one line, and a remote-cursor extension pulled into another document; state persists across devices. Implementation sits on Webstrates, exposes Codestrates paragraphs and uses CodeMirror; current limits: JavaScript-only runtime and heavier client load, with lazy-loading experiments.

AI-written summary · about

" chapters (13)

1. 0:00Introduction
2. 0:45Vision of Software
3. 2:25Developer Tools
4. 3:41Code playgrounds
5. 4:21Interactive notebooks
6. 4:45Architecture
7. 5:14Literal Computing
8. 6:17What we present
9. 12:17Code execution
10. 14:00Code straight extension
11. 15:35Share remote courses
12. 15:48Limitations
13. 17:09Extensions

" related talks

• 20mWebstrates: Shareable Dynamic MediaClemens Nylandsted Klokmose, Wendy E. Mackay, Michel Beaudouin-Lafon, James R. Eagan, Siemen Baader · UIST 2015
• 57mKeynote: Software as Computational MediaClemens Nylandsted Klokmose · LIVE 2021
• 18mVideostrates: Collaborative, Distributed and Programmable Video ManipulationClemens Nylandsted Klokmose, Wendy E. Mackay, Michel Beaudouin-Lafon, Christian Remy, Janus Bager Kristensen, Rolf Bagge · UIST 2019
• 35mMaking a lot of thingsBen Foxall · Full Stack Fest 2017
• 34mBespin, Skywriter, Ace - The Past, Present and Future of online Code EditingFabian Jakobs · JSConf US 2011
• 34mBuilding a Collaborative Web App with ClojureScriptGijs Stuurman · EuroClojure 2017
• 57m🚨 Live On the Edge 🚨Daniel Roe · Frontend Nation 2024
• 04h 20mWeft—Enabling Tidal on the WebMatthew Kaney, William Payne · FARM 2025