Obsidian Termynal - Beautiful Terminal Animations for Your Notes
Hey everyone!
I’m excited to share a new DataviewJS script I’ve been working on that brings beautiful terminal animations directly into your Obsidian notes. It’s called Obsidian Termynal and it’s perfect for creating engaging technical documentation, tutorials, and demonstrations.
What is it?
Obsidian Termynal is a performance-optimized terminal animation library designed specifically for Obsidian’s DataviewJS plugin. It’s based on the excellent Termynal.js by Ines Montani, but adapted and enhanced for the Obsidian ecosystem.
Key Features:
Smooth character-by-character typing animations
Multiple built-in themes (macOS, Windows, Ubuntu, Light)
Progress animations (spinners, loading bars, dots)
Interactive controls (play/pause, speed toggle, restart)
Mobile-friendly and responsive
Performance optimized for smooth animations
Extensive customization options
Why would you want this?
If you’re someone who:
- Creates technical documentation or tutorials
- Wants to showcase command-line workflows
- Teaches programming or system administration
- Enjoys making your notes more interactive and engaging
- Documents development processes or deployment steps
Then this might be perfect for you! Instead of static code blocks, you can create dynamic, animated terminal sessions that guide readers through step-by-step processes.
Quick Example
Here’s a simple example of what you can create:
await dv.view('termynal', {
title: '🚀 Termynal Showcase',
theme: 'macos',
autoStart: true,
height: '225px',
lines: [
{ type: 'input', text: 'echo "Hello, Obsidian!"' },
{ type: 'output', text: 'Hello, Obsidian!' },
{ type: 'input', text: 'npm install awesome-package' },
{
type: 'progress',
text: 'Installing packages',
style: 'spinner',
duration: 2000
},
{ type: 'success', text: '✓ Installation completed!' }
]
});
Showcase
Advanced Features
Multiple Line Types:
input
- Commands being typedoutput
- Command resultscomment
- Explanatory commentserror
- Error messageswarning
- Warning messagessuccess
- Success messagesprogress
- Animated progress indicators
Interactive Controls:
- Play/pause animations
- Speed toggle (normal/fast)
- Restart from beginning
- Copy content to clipboard
- Fullscreen mode
Customization Options:
- Adjustable typing speed and delays
- Custom prompts and colors
- Theme selection
- Loop animations
- Syntax highlighting
- Responsive sizing
Real-World Use Cases
Git Workflow Documentation:
await dv.view('termynal', {
title: 'Git Workflow',
theme: 'ubuntu',
lines: [
{ type: 'input', text: 'git status' },
{ type: 'output', text: 'On branch main\nNothing to commit, working tree clean' },
{ type: 'input', text: 'git checkout -b feature/new-feature' },
{ type: 'output', text: 'Switched to a new branch \'feature/new-feature\'' },
{ type: 'success', text: '✓ Ready to start coding!' }
]
});
Server Setup Tutorial:
await dv.view('termynal', {
title: 'Server Setup',
theme: 'macos',
lines: [
{ type: 'input', text: 'npm init -y' },
{ type: 'output', text: 'Wrote to package.json' },
{ type: 'input', text: 'npm install express' },
{ type: 'progress', text: 'Installing dependencies', style: 'bar', duration: 3000 },
{ type: 'input', text: 'npm start' },
{ type: 'comment', text: '# Server starting on port 3000...' },
{ type: 'output', text: 'Server running at http://localhost:3000' }
]
});
Installation & Setup
Requirements:
- Obsidian with Dataview plugin installed
- JavaScript execution enabled in Dataview settings
Installation:
- Install and enable the Dataview plugin
- Enable “JavaScript Queries” in Dataview settings
- Download the
termynal.js
file from the GitHub repository - Add the script to your vault (e.g., in an
assets
folder) - Start creating animated terminals in your notes!
Performance & Mobile Support
The script is optimized for performance with:
- DOM caching and batch processing
- Efficient timer management
- Memory cleanup
- Mobile-responsive design
API for Advanced Users
For those who want more control, there’s a comprehensive API:
// Get terminal API
const api = window.getTermynalAPI();
// Control playback
api.start();
api.pause();
api.restart();
// Add lines dynamically
api.addLine({ type: 'output', text: 'Dynamic content!' });
// Listen to events
api.on('complete', () => console.log('Animation finished!'));
// And more...

Themes
Choose from several built-in themes:
- macOS - Dark with classic traffic light buttons
- Windows - Windows-style decorations
- Ubuntu - Purple Ubuntu theme
- Light - Light mode compatible
Or customize with CSS variables for your own unique look!
Get Started
You can find the full script, documentation, and examples on GitHub: Obsidian Termynal Repository
Feedback Welcome!
This is my first major contribution to the Obsidian community, and I’d love to hear your thoughts! Whether you:
- Have suggestions for improvements
- Find bugs or issues
- Want to share cool examples you’ve created
- Have ideas for new features
Please let me know! I’m committed to making this as useful as possible for the community.
What do you think? Would this be useful for your note-taking workflow? Any features you’d like to see added?
Thanks for reading, and happy note-taking!