Matrix Live View is a Visual Studio Code extension that opens a split-screen live Matrix-style animated webview directly inside VS Code.
Inspired by the iconic Matrix digital rain effect, this extension creates a cyberpunk-style visual experience while coding.
Features
- Live Matrix digital rain animation
- Opens in a split-screen Webview Panel
- Lightweight HTML Canvas rendering
- Responsive resizing
- Integrated directly into VS Code
Preview
Usage
Open the Matrix View
- Open the Command Palette
Ctrl + Shift + P
- Search for:
Open Matrix Live View
- Run the command
The Matrix animation panel will open beside your editor.
Development
Install dependencies
npm install
Compile the extension
npm run compile
Run the extension
Press:
F5
This launches the Extension Development Host.
Project Structure
src/
├── extension.ts
.vscode/
├── launch.json
package.json
README.md
tsconfig.json
Technologies Used
- TypeScript
- VS Code Extension API
- Webview API
- HTML Canvas
- JavaScript Animation
Future Improvements
- Theme customization
- Speed controls
- Multiple Matrix color modes
- Audio-reactive mode
- Sidebar integration
- Live coding overlays
Release Notes
0.0.1
Initial release of Matrix Live View.
- Added Matrix-style animated Webview
- Added split-screen panel support
- Added responsive canvas rendering
License
MIT License