LEO is an Electron-based auto-typing application designed for live coding demonstrations, programming tutorials, and technical presentations. It allows instructors to prepare lessons in advance and "type" them out smoothly during presentations, ensuring stress-free demonstrations while maintaining the authentic feel of live coding.

LEO was originally developed in Python and created to help with making programming tutorials. This Electron version adds new features specifically tailored for in-class demos.

To best understand how LEO works, please check the Video Tutorial and read the Paper.

• Auto-Typing Mode: Press any hotkey to advance through pre-written code character by character
• Comment Blocks: Brief explanations for the teacher
• Code Blocks: Character-by-character auto-typed code snippets
• Visual Progress: Real-time progress bar and cursor highlighting
• Timer Integration: Presentation timer with adjustable duration
• Remote Viewing: Mobile-friendly client viewer via WebSocket connection

• Global Hotkeys: Control typing from anywhere, even when window is not focused
• Always On Top: Keep LEO visible over your IDE or presentation
• Transparency Toggle: Adjust window opacity for overlay presentations
• Special Characters: Easy insertion of navigation keys (←, →, ↑, ↓) and shortcuts (💾, 🔁)
• Keystroke Logging: Automatic session logging for performance analysis
• Customizable Styling: Configure colors, fonts, and appearance
• Code Formatting: Auto-format code (f)

• Node.js (v14 or higher)
• npm or yarn

# Clone the repository
git clone https://github.com/yourusername/leo.git
cd leo

# Install dependencies
npm install

# Start the application
npm start

1. Launch LEO and go to File → New Plan (Ctrl+N)
2. Add blocks:
   • Yellow + button: Add comment block (for explanations)
   • White + button: Add code block (for typing simulation)
3. Edit content: Click on any block to edit its content
4. Save: File → Save Plan (Ctrl+S)

1. Load a lesson: File → Load Plan (Ctrl+O)
2. Click START or press Ctrl+P to toggle auto-typing mode
3. Press any letter key (a-z) to advance through the lesson
4. Navigate:
   • Ctrl+Left: Step backward
   • Ctrl+Right: Step forward
   • Click on any character to jump to that position

If you don't have a preferred code editor, I recommend VS Code It comes with advanced features that help experienced coders. These (may) interfere with LEO lesson plans. You can disable them by loading the VS Code settings provided in the settings folder.

How to Apply Settings:

1. Open VS Code.
2. Press Ctrl + Shift + P.
3. Search for "Open User Settings (JSON)".
4. Paste the contents of the desired JSON file into the settings and save.

1. Start LEO on your computer
2. Look for the console output showing the WebSocket URL with QR code
3. Scan the QR code or visit the URL on your mobile device
4. The mobile viewer will sync automatically with your presentation

The TwitterLogoMaker lesson plan was used to create this video tutorial.

The Emordnilap lesson plan was used during this live stream.

By default, any letter key (a-z) advances the cursor when in typing mode.

All hotkeys are customizable via Settings.

LEO includes quick-insert buttons for special characters commonly used in coding demonstrations:

• Navigation: ←, →, ↑, ↓, ◄, ►, ▲, ▼
• Editing: ↢ (Backspace), ‒ (Tab)
• Shift Navigation: ⇑, ⇓, ⇐, ⇒
• Shortcuts: 💾 (Save: Ctrl+S), 🔁 (Alt+Tab)

Lessons are stored as JSON files:

[
  {
    "type": "comment",
    "text": "Welcome to the lesson!"
  },
  {
    "type": "code",
    "text": "function hello() {\n  console.log('Hello, World!');\n}"
  }
]

• comment: Brief explanations for the teacher (not auto-typed)
• code: Text typed character-by-character (for controlled pacing)

Access settings via File → Settings (Ctrl+,).

• Auto-typing trigger keys
• Toggle active shortcut
• Navigation shortcuts
• System shortcuts (always on top, transparency)

• Comment block colors (normal, active, selected)
• Active text color
• Cursor color
• Border colors
• Text color

• Font size (10-24px)

Settings persist across sessions.

LEO automatically logs all keystrokes during sessions for analysis:

• Logs saved to logs/ directory next to your lesson file
• Includes timestamps, characters typed, and session metadata
• Auto-saves every 10 keystrokes
• Format: lessonname_key_presses_TIMESTAMP.json

• Check if another application is using the same shortcuts
• Try customizing hotkeys in Settings

• Ensure firewall allows connections on port 8080
• Check that devices are on the same network

This project is licensed under the MIT License - see the LICENSE file for details.

• Built with Electron
• Keyboard automation powered by @computer-use/nut-js
• WebSocket server using ws