DemoIt

DemoIt is a tool that helps you create beautiful live-coding demonstrations.

Why?

I'm doing lots of live-coding during conferences and I like tools like reveal.js to create slides. What I wanted was a tool that has some of the properties of reveal.js but with capabilities to code and run commands in front of the audience.

Two things are really important to me:

• For a given presentation, the slides should live in the same repository as the code.
• The tool should allow context-switching-less live coding demos. Attendees don't want to watch me switching between a browser, an IDE and a terminal all the time.

This is how I came up with DemoIt.

How?

DemoIt is a small command line tool written in Go. It serves rich web content composed of text, images and smart web components.

Those web components make most of the magic.

• One component displays multi-tab ttys that can be used to run any command.
• Another is a web browser view that auto refreshes itself.
• Another is a code viewer with highlighing and tabs that looks like a real IDE,

Install

Download binary from GitHub

curl -L -odemoit https://github.com/dgageot/demoit/releases/download/v1.0/demoit-`uname -s | tr '[:upper:]' '[:lower:]'`-`uname -m`
sudo install demoit /usr/local/bin/demoit

Add shell font

To have a correct display in the web terminal, it's better to install the font Inconsolata for Powerline on your computer. This font can be found here.

Get started from a Sample

# Create an empty directory
cd $HOME; mkdir my-demoit-presentation; cd $HOME/my-demoit-presentation
# Download a sample demo
curl -L https://github.com/dgageot/demoit/archive/master.tar.gz | tar xvf - --strip-components=2 demoit-master/sample
# Run demoit
demoit

Then, browse to http://localhost:8888

Press ⌘K in a focused terminal to clear its screen and scrollback, then send Ctrl-L to redraw the shell prompt and any pending input without executing it. Other terminals are unaffected; the session is not restarted.

Pro tip: Run demoit -dev instead and enjoy live reload each time you change the content of the slides. When Git is available and the presentation is inside a repository, live reload skips Git-ignored files and directories (including nested .gitignore rules, .git/info/exclude, and global excludes). Tracked files still trigger reloads, even if they match an ignore rule. Outside a repository or without Git, live reload continues normally.

How do I customize my presentation then?

Basically, the idea is to:

• Write content in demoit.html at the root of the project. This file contains all the html slides separated with ---.
• Add images, fonts and scripts in the .demoit folder at the root of the project.
• Customize the style sheet in .demoit/style.css.

Contribute

Build from sources

git clone https://github.com/dgageot/demoit.git
cd demoit
go install

This requires Go 1.26 or later.

Terminal validation and benchmarks

go test -race ./...
golangci-lint run
node --test handlers/terminal*_test.js
DEMOIT_BENCHMARK=1 node --test handlers/terminal_browser_test.js

The browser test uses an installed Chrome/Chromium (or CHROME_BIN) and a mock WebSocket: it never starts shells or presentation commands. The benchmark reports Canvas CPU time for single-row edits and full redraws, not keyboard-to-display latency. Node tests also exercise the shipped WASM without a browser.

Terminal assets are embedded in the binary. After changing them, run go install, restart DemoIt, and reload the presentation. Local emulator patches are recorded in handlers/resources/ghostty-web/provenance.json; update asset digests and the versioned route when bytes change so immutable browser caches cannot serve stale code.