CodeInk turns the active source file into a clean, read-only Teaching Mode. Use a mouse, stylus, or graphics tablet to explain code without changing the real file or losing its syntax colors.

Why CodeInk?

Live coding explanations often force teachers to switch between VS Code, PowerPoint, drawing apps, and screen recorders. CodeInk keeps the lesson in one place: the code remains readable, annotations stay separate, and the complete teaching view can be recorded or exported.

Quick start

1. Install CodeInk — Teaching Tools from the VS Code Marketplace.
2. Open any source-code file.
3. Click the CodeInk pencil icon in the Activity Bar.
4. Select Start Teaching Mode.
5. Pick a tool and begin explaining.

Press + Page at any time and choose Blank Whiteboard for freehand teaching or Add Code File to bring another syntax-highlighted source file into the same lesson.

You can also launch Teaching Mode from the CodeInk Status Bar item, press Ctrl+Alt+T, or run CodeInk: Open CodeInk Sidebar from the Command Palette.

Teaching toolkit

• Pen — pressure-aware freehand writing for supported styluses
• Highlighter — transparent emphasis without hiding syntax colors
• Eraser — adjustable cleanup for individual annotations
• Shapes — arrows, rectangles, and circles for visual structure
• Text notes — place short explanations beside the relevant code
• Spotlight — dim distractions and focus attention on one area
• Laser pointer — point during a live explanation without saving a mark
• Interact mode — scroll and select code without accidentally drawing
• Code pages — teach from multiple source files while preserving each language's syntax colors
• Blank whiteboards — freely handwrite, sketch diagrams, and explain concepts without code
• Lesson pages — move between mixed code/whiteboard pages with previous and next controls
• Undo, redo, and clear — reliable annotation control while presenting
• Zoom — adjust code size for a classroom, stream, or recorded lesson

Syntax colors stay intact

CodeInk renders a clean editor-colored background and preserves language-aware syntax highlighting. Drawing lives on a separate transparent layer, so the original file remains untouched.

Smooth lesson recording

The built-in recorder captures the visible CodeInk Teaching Mode at:

• 1920×1080 resolution
• 30 FPS forced frame cadence
• 8 Mbps video bitrate
• Optional microphone audio, when VS Code grants permission
• Streamed WebM saving for longer lessons without holding the full video in memory

To record:

1. Leave Mic checked if voice audio is required.
2. Click Record and choose the .webm destination.
3. Teach normally while the red timer is visible.
4. Click Stop and wait for the saved confirmation.

If embedded recording is unavailable on Windows, CodeInk can open the Windows Game Bar fallback. WebM files play in current Chrome, Edge, Firefox, and VLC.

Lessons and exports

CodeInk automatically restores the complete lesson for the file used to start Teaching Mode. That lesson can contain multiple code files and blank whiteboards, each with independent annotations.

• Export/import a portable .codeink.json lesson
• Export the current page as PNG
• Export every lesson page as one multi-page PDF
• Record a shareable WebM lesson video

Keyboard shortcuts

Privacy

CodeInk is local-first. It does not send source code, annotations, recordings, or lesson files to a CodeInk server. Exported files are saved only where the user chooses. Microphone access remains controlled by VS Code and the operating system.

Current limitations

• Drawing is available inside the CodeInk Teaching Mode tab, not as a global desktop overlay.
• PNG export captures the active lesson page; PDF export captures the complete lesson.
• The built-in recorder captures CodeInk content rather than the complete VS Code window chrome.
• Microphone availability depends on the VS Code build and operating-system permission.

Development setup

The project owner can use the private source package for development:

npm install
npm test
npm run compile
npm run package:vsix

Press F5 in VS Code to launch the Extension Development Host.

Ownership and license

CodeInk is proprietary software. Installation and use of the official, unmodified extension are permitted under the included license. Copying, modifying, redistributing, rebranding, selling, reverse engineering, or using CodeInk code/assets to create a competing product is prohibited except where applicable law expressly permits otherwise.

Copyright © 2026 Muhammad Hamza / DepthFirstCode. All rights reserved.

See the included LICENSE and THIRD_PARTY_NOTICES.md files.