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
Pro tip: Run demoit -dev
instead and enjoy live reload each time you change the content of the slides.
How do I customize my presenttion 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.19 or later.