Native SVG Output Support & Window Bar Customization - Working Implementation Available

[jackspirou]

Hey VHS community! 👋

I've been working on a fork (with Claude Code) that addresses several frequently requested features, and I want to share it to see if a version of these enhancements could go back to the main VHS project. The fork is fully functional and available at agentstation/vhs with comprehensive tests and documentation.

🎯 Implemented Features

1. Native SVG Output

This addresses numerous issues:

• Direct SVG requests (#109, #165)
• Blurry output concerns (#625 - "output looks very blurry", #69 - "Gif looks blurry")
• File size optimization (in some cases SVG can help with this) (#50, #109 - users wanting smaller files)
• Scalability needs (#578 - responsive dimensions)
• Text selection possibilities (#66 - copying text from recordings)

How it works:

• Generates animated SVGs using CSS animations and frame deduplication
• Each unique terminal state is rendered once, with CSS keyframes handling transitions
• Text remains selectable and searchable (addressing #66)
• Scales perfectly on any display without pixelation
• Built-in optimization with optional --no-svg-opt flag

Performance characteristics:

• Simple demos: Often 50-90% smaller than GIFs for simple .tape files
• Complex outputs (like neofetch): May be larger due to preserving exact character styling
• An example: simple-demo.gif (82KB) → simple-demo.svg (19KB) - 77% smaller!

2. Window Bar Customization

This directly addresses:

• #436 - "Add Command to 'Set Title' for Window"
• Professional branding needs mentioned in #173, #460
• Font customization requests from discussion #379

New commands:

Set WindowBarTitle "My Custom Demo"
Set WindowBarFontFamily "Monaco" 
Set WindowBarFontSize 16

3. Enhanced CLI Options

• --debug-console: Browser console logging for debugging
• --no-svg-opt: Control SVG optimization
• Multiple output formats in one command

📊 Technical Implementation

The SVG generation works by:

1. Capturing terminal frames with full color and style information
2. Deduplicating identical frames to reduce file size
3. Generating CSS classes for common color combinations
4. Using CSS animations for smooth transitions
5. Preserving whitespace with xml:space="preserve"
6. Escaping special characters for security

All features include test coverage (~70-95% for new code) and maintain backward compatibility.

🤝 Contributing Back

I'm very interested in getting some of these features back to the main VHS project, especially SVG generation. The implementation:

• Maintains all existing functionality
• Adds no new required dependencies (nothing in addition to ttyd and ffmpeg)
• Includes decent tests
• Is documented with examples
• Has been tested across platforms (tested with github-actions runner)

🔗 Try It Out

You can test the fork today:

# macOS/Linux with Homebrew
brew install agentstation/tap/vhs

# Or with Go
go install github.com/agentstation/vhs@latest

Looking forward to your thoughts and feedback! I'm happy to let maintainers or whoever take it over and pick through it to include a version of the SVG generation

---

Related issues: #109, #165, #625, #69, #50, #578, #66, #436, #173, #460, #339, #379

[NCMBianchi]

Tested and it works great, although I still get the speeding issue. But the addition of SVG support is very welcome.

[mikelorant]

If we continue to stick with Chromium headless browser controlled by Rod, we will always have speed issues as well as timing problems when sending commands. Having SVG output is a fantastic addition but the architecture for how we get the frames is still flawed.

[maxandersen]

man this is awesome! I've wanted this forever. works amazingly well!

[deepyaman]

@jackspirou This looks very promising! I'd been struggling with FFmpeg issues and eventually halved my dimensions in order to get the GIF render to succeed, when I found #88 and eventually came across your work.

• I am still getting the speedup issue, as several people have mentioned. Changing typing speed form 75ms to 750ms makes the render look nicer, but it's still uneven, and it obviously takes a very long time to run.

• I think some of the docs are optimistically copy-pasted functionality that doesn't exist. For example, I don't think the hosted Docker image at ghcr.io/agentstation/vhs is actually published. I was able to make it work with something like:

  RUN rm /usr/bin/vhs && \
      tar -xvzf vhs_0.11.1_linux_x86_64.tar.gz -C /usr/bin

Nonetheless, it would be amazing to see this contribution in the core project!

[jackspirou]

@jackspirou This looks very promising! I'd been struggling with FFmpeg issues and eventually halved my dimensions in order to get the GIF render to succeed, when I found #88 and eventually came across your work.

• I am still getting the speedup issue, as several people have mentioned. Changing typing speed form 75ms to 750ms makes the render look nicer, but it's still uneven, and it obviously takes a very long time to run.
• I think some of the docs are optimistically copy-pasted functionality that doesn't exist. For example, I don't think the hosted Docker image at ghcr.io/agentstation/vhs is actually published. I was able to make it work with something like:

  RUN rm /usr/bin/vhs && \
      tar -xvzf vhs_0.11.1_linux_x86_64.tar.gz -C /usr/bin

Nonetheless, it would be amazing to see this contribution in the core project!

@deepyaman Thanks for the feedback! Good news on the Docker image - it was being built and pushed correctly, but the GitHub Container Registry package was set to private visibility (GitHub's default). I've just fixed that, so ghcr.io/agentstation/vhs:latest should now work:

  docker pull ghcr.io/agentstation/vhs:latest

Confirmed working on my end.

Regarding the speedup issue: that's inherited from upstream VHS, and while I initially thought the SVG output might be helpful the problem seems to stem deeper in the architecture/strategy of the current version of VHS.

[deepyaman]

@deepyaman Thanks for the feedback! Good news on the Docker image - it was being built and pushed correctly, but the GitHub Container Registry package was set to private visibility (GitHub's default). I've just fixed that, so ghcr.io/agentstation/vhs:latest should now work:

  docker pull ghcr.io/agentstation/vhs:latest

Confirmed working on my end.

Thanks for looking into it!

Regarding the speedup issue: that's inherited from upstream VHS, and while I initially thought the SVG output might be helpful the problem seems to stem deeper in the architecture/strategy of the current version of VHS.

Hmm, yes, that's what I read. To be honest, I admit I don't fully understand the issue; if I export to .webm it seems to play back at a reasonable (although somehow inconsistent) speed; with .svg the pauses are basically nonexistent (e.g. in typing speed).