Obsidian Termynal - Beautiful Terminal Animations for Your Notes

Share & showcase
1

:desktop_computer: Obsidian Termynal - Beautiful Terminal Animations for Your Notes

logo-inline-white
logo-inline-white911×502 168 KB

Hey everyone! :waving_hand:

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:

  • :sparkles: Smooth character-by-character typing animations
  • :artist_palette: Multiple built-in themes (macOS, Windows, Ubuntu, Light)
  • :bar_chart: Progress animations (spinners, loading bars, dots)
  • :video_game: Interactive controls (play/pause, speed toggle, restart)
  • :mobile_phone: Mobile-friendly and responsive
  • :high_voltage: Performance optimized for smooth animations
  • :wrench: 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

Showcase

Advanced Features

Multiple Line Types:

  • input - Commands being typed
  • output - Command results
  • comment - Explanatory comments
  • error - Error messages
  • warning - Warning messages
  • success - Success messages
  • progress - 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:

  1. Install and enable the Dataview plugin
  2. Enable “JavaScript Queries” in Dataview settings
  3. Download the termynal.js file from the GitHub repository
  4. Add the script to your vault (e.g., in an assets folder)
  5. 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...
![logo-inline-white|690x380](upload://nwP1fA1YqcpWZogfVHfoWTtjRNY.png)

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! :memo::sparkles:

2 Likes
2

:rocket: Obsidian Termynal v0.1.0 - Lazy Loading Update

Hey everyone! :waving_hand:

I’m excited to share the first major update for Obsidian Termynal. Version 0.1.0 brings a significant performance improvement that’s especially noticeable in notes with multiple terminal instances.

:counterclockwise_arrows_button: Main Feature: Lazy Loading

The biggest update is the Lazy Loading functionality. When enabled, terminals only load when they become visible in the viewport. This means:

  • Faster load times for your notes
  • Reduced memory usage
  • Better performance with multiple terminals per note

:clipboard: New Configuration Options

You can customize lazy loading to your preferences:

{
    lazyLoading: false,             // Toggle lazy loading
    intersectionThreshold: 0.1,     // Visibility threshold
    rootMargin: '50px'              // Pre-load area
}

:hammer_and_wrench: Practical Example

await dv.view('termynal', {
    title: 'My Terminal',
    lazyLoading: true,
    lines: [
        { type: 'input', text: 'npm install obsidian-plugin' },
        { type: 'output', text: 'Installation successful!' }
    ]
});

:wrench: Enhanced API

For those who want to dive deeper:

  • api.isLazyLoaded() - Check lazy loading status
  • api.forceLazyLoad() - Force loading
  • api.getLazyLoadingInfo() - Detailed information

:magnifying_glass_tilted_left: Troubleshooting

If you run into issues:

  1. Terminal not loading: Check if it’s actually visible
  2. Performance issues: Use api.getLazyLoadingInfo() for debugging
  3. Configuration: Make sure lazyLoading: true is set (default is false)

:crystal_ball: What’s Next

Planned for upcoming versions:

  • Enhanced custom theme support
  • HTML syntax support for richer formatting

:inbox_tray: Installation & Updates

The update is available through the latest GitHub Release (0.1.0)

Feedback and bug reports are always welcome! Let me know how this update feels for you.

Happy coding with improved performance! :tada:

3

:rocket: Obsidian Termynal v0.1.1: Control Buttons Overhaul

Hey everyone! :waving_hand:

I’ve just released a new version of Obsidian Termynal that streamlines how you configure terminal controls.

:sparkles: What’s New in This Release?

This update introduces a cleaner way to configure terminal controls with a new controlButtons system that replaces the previous scattered boolean flags with a single, more organized configuration object.

:bullseye: The New Control Button System

Gone are the days of juggling multiple boolean flags! The new controlButtons configuration gives you granular control over every aspect of your terminal interface:

{
    controlButtons: {
        speed: true,        // Toggle animation speed
        pause: true,        // Pause/resume animation
        restart: true,      // Restart animation
        copy: false,        // Copy terminal content
        fullscreen: false   // Toggle fullscreen mode
    }
}

This single configuration object replaces the old showControls, copyable, and fullscreen boolean flags, making your terminal configurations much cleaner and more maintainable.

:window: Enhanced Windows Theme

For those who love the Windows aesthetic, I’ve updated the Windows theme with more authentic-looking window controls. The minimize, maximize, and close buttons now match the genuine Windows design.

:artist_palette: Under-the-Hood Improvements

This release also includes a complete CSS architecture overhaul. The styles are now better organized, more performant, and easier to customize if you want to create your own themes.

:light_bulb: Practical Examples

Let me show you how this works in practice. Here’s a typical development workflow terminal:

await dv.view('termynal', {
    title: 'Development Setup',
    controlButtons: {
        speed: true,
        pause: true,
        restart: true,
        copy: true,
        fullscreen: false
    },
    lines: [
        { type: 'input', text: 'npm install' },
        { type: 'output', text: 'Installing dependencies...' },
        { type: 'input', text: 'npm run dev' },
        { type: 'success', text: '✓ Development server started!' }
    ]
});

Or maybe you want a clean, minimal terminal for documentation:

await dv.view('termynal', {
    title: 'Git Workflow',
    controlButtons: {
        speed: false,
        pause: false,
        restart: true,
        copy: true,
        fullscreen: false
    },
    lines: [
        { type: 'input', text: 'git add .' },
        { type: 'input', text: 'git commit -m "feat: new feature"' },
        { type: 'input', text: 'git push origin main' }
    ]
});

:wrench: Dynamic Control with the API

The real power comes with the enhanced API methods. You can now dynamically modify button states:

// Get the API reference
const api = window.getTermynalAPI();

// Enable or disable buttons on the fly
api.enableButton('fullscreen');
api.disableButton('copy');
api.toggleButton('pause');

// Or set multiple buttons at once
api.setControlButtons({
    speed: true,
    pause: false,
    copy: true
});

:shuffle_tracks_button: Migration Guide

:warning: Important: This is a breaking change! If you’re using the old configuration format, you’ll need to update your terminals. Here’s how:

// OLD format (no longer supported)
{
    showControls: true,
    copyable: true,
    fullscreen: false
}

// NEW format (required)
{
    controlButtons: {
        speed: true,
        pause: true,
        restart: true,
        copy: true,
        fullscreen: false
    }
}

Don’t worry – the migration is straightforward, and the new format is much more flexible!

:inbox_tray: Get the Update

You can download the latest version from the GitHub repository where you’ll also find detailed documentation and installation instructions.

1 Like