TypeCell explores End-User Programming capabilities in a block-based rich text editing application. With end-user programming, users can modify and extend software they are using, giving users agency to shape the tools they are using to their own needs.

We believe this goal can only be achieved by building an environment focused on Simplicity; currently, we believe most programming systems are too complex to appeal to a wide audience.

TypeCell combines various constructs to reduce this complexity. Most importantly, TypeCell has been designed as a regular document editor that initially hides its more advanced capabilities - allowing the user to gradually learn about its programming and extensibility capabilities at their own pace. This design is inspired by Spreadsheets (arguably one of the few widely adopted end-user programming systems), where users can use the application to create simple tables, and only later use more advanced functionality such as formulas, charts, or plugins.

In the attached demo, we look at 3 aspects specifically:

Liveness The Cell-based Reactive programming model makes it possible to create advanced programs and interactions with a limited amount of code, as data flows are mostly abstracted away by the reactive programming layer.

The evaluate-as-you-type functionality offers a live, real-time programming experience, closing the gap between authoring and visual feedback.

Composability TypeCell supports document composition, enabling code reuse across different documents. This makes it possible to encapsulate / hide more complex parts of the system. TypeCell maintains the Liveness across documents (changes in one document are immediately reflected in the other).

Imported documents live in their own “Reactive Scope”, that can be interacted with from the host document. We believe this model makes it possible to create both Live and Composable programs as defined by [Live, Rich, and Composable: Qualities for Programming Beyond Static Text, Joshua Horowitz and Jeffrey Heer].

Extensibility Code written in documents can function as Plugins to the host environment, making it possible to modify the application itself. In the demo, we show how one user creates a Map block that can subsequently be embedded by another user without the need to access the programming system. If the user requires customization of the Block / component, they can do so at different levels of complexity:

1. A non-programming “What you see is what you get” experience
2. Creating databindings between the component and the host document (code “one-liners”)
3. Completely customizing the source code of the component

We believe this approach allows for gradual customization possibilities without overloading users with complexity.

In 2021, we presented the first version of TypeCell at LIVE; a “notebook-style” programming environment. We are now excited to demonstrate how this can be embedded into an end-user application (a document editor) - and bridge the gap towards end-user programming. Besides demonstrating the concepts as shown in the video, I will dive under-the-hood and explain the architecture and pros and cons of the Reactive Live Programming model.