CodeInk

Teach code like you explain on a whiteboard—directly inside VS Code.

Draw. Highlight. Focus. Record. Teach.

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.

Teaching need	CodeInk solution
Explain a difficult line	Pressure-aware pen and translucent highlighter
Show program flow	Arrows, rectangles, circles, and text notes
Keep students focused	Spotlight and live laser pointer
Use a graphics tablet	Stylus pressure support and touch rejection
Revisit a lesson	Multiple pages with per-file autosave and restore
Share the explanation	PNG, PDF, lesson file, and WebM video export
Keep code safe	Read-only teaching surface; annotations never edit source

Quick start

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

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
Lesson pages — organize one explanation across multiple teaching pages
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:

Leave Mic checked if voice audio is required.
Click Record and choose the .webm destination.
Teach normally while the red timer is visible.
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 annotations separately for each source file in the current workspace.

Export/import a portable .codeink.json lesson
Export the current page as PNG
Export the current page as PDF
Record a shareable WebM lesson video

Keyboard shortcuts

Shortcut	Action
`P`	Pen
`H`	Highlighter
`E`	Eraser
`A`	Arrow
`R`	Rectangle
`O`	Circle / ellipse
`T`	Text note
`S`	Spotlight
`L`	Laser pointer
`V`	Interact with code
`Ctrl+Z`	Undo
`Ctrl+Y`	Redo
`Ctrl+S`	Save lesson
`Ctrl+Alt+T`	Open Teaching Mode from the editor

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 and PDF export currently capture the active lesson page.
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.

See the included LICENSE and THIRD_PARTY_NOTICES.md files.

CodeInk - Teaching Tools

Depth First Code