Render images inline in VS Code's integrated terminal using the Kitty graphics protocol
Images in the terminal — no file explorer needed.
VS Code 1.110+ supports the Kitty graphics protocol for rendering images directly in the integrated terminal. Enable with terminal.integrated.enableImages: true.
# Verify the setting is enabled
# Settings → terminal.integrated.enableImages → true
# Display an image using imgcat (if installed)
imgcat assets/banner.png
# Or use a Node.js script with kitty escape sequences
node -e "const fs=require('fs');const b=fs.readFileSync('assets/banner.png').toString('base64');process.stdout.write('\x1b_Gf=100,a=T;'+b+'\x1b\\\\')"
| Method | Platform | Notes |
|---|---|---|
| imgcat |
| macOS (iTerm2 protocol) |
brew install imgcat or use VS Code's built-in support |
| Kitty escape sequences | All platforms | Native protocol, works in VS Code 1.110+ |
| chafa | Linux/macOS | brew install chafa — converts images to terminal graphics |
| Node.js inline | All platforms | Read file, base64 encode, write Kitty escape sequence |
After running banner generation scripts, preview results without leaving the terminal:
node scripts/generate-readme-banners.js
# Then preview the output:
imgcat assets/banner-main.png
Render diagram visualizations inline during development:
node scripts/generate-diagram-visualizations.js
imgcat diagram-visualization/cognitive-architecture.png
Quick-check brand assets without opening files:
# Check all banner variants
for f in assets/banner-*.png; do echo "=== $f ==="; imgcat "$f"; done
View Alex's cognitive state avatars during development:
imgcat assets/states/meditation.png
imgcat assets/states/debugging.png
For cross-platform terminal image display without external tools:
const fs = require('fs');
const path = require('path');
function displayInTerminal(imagePath) {
const data = fs.readFileSync(imagePath);
const base64 = data.toString('base64');
// Kitty graphics protocol: transmit and display
process.stdout.write(`\x1b_Gf=100,a=T;${base64}\x1b\\`);
process.stdout.write('\n');
}
// Usage: node display.js assets/banner.png
const file = process.argv[2];
if (file && fs.existsSync(file)) {
displayInTerminal(file);
} else {
console.error('Usage: node display.js <image-path>');
}
| Setting | Value | Purpose |
|---|---|---|
terminal.integrated.enableImages | true | Enable Kitty graphics protocol |
terminal.integrated.gpuAcceleration | on | Better rendering performance |