Cannon

Cannon aims to be the last way to embed live code in your website. It provides a well-integrated UI and backend framework. You also get support for a bunch of languages (Go, Python, Rust, Node/ Javascript), and it’s really easy to add new ones. You can add annotated highlights and focus on specific lines. All parts of Cannon are scriptable. Some common use cases are blogs, educational platforms and complex web-editing workflows.

Future Plans

Cannon started as a little side project when I went back home for a month. I’m going to keep working to get Cannon to a slow 1.0. That’ll involve building:

• Multi-file support for Python.
• Writing some tests for common flows.
• Local GoLang support using Hackpad.
• Proper theming support with a Thememirror integration.
• An Astro plugin and API that makes it really easy to integrate into a blog.
• Support for multiple Webcontainer codeblocks in a single page.
• LSP integration with all languages.

Things I Learnt

• Building a generic interface is fun and hard.
• The fun of building a generic building block to use for portfolio of products (1, 2).
• Two-way syncing Codemirror state with React state.
• Finally understood how async work is supposed to update the UI with a bunch of chained setState / useEffects.
• React contexts and how they work.
• Javascript Proxy objects.