Feature Request: asciicast #825

New Issue

OVERLORD · 2026-02-04T22:24:12+03:00

OVERLORD commented

2026-02-04 22:24:12 +03:00

Originally created by @TBK on GitHub (Sep 20, 2018).

Describe the feature you'd like
Support for asciicast.

Describe the benefits this feature would bring to BookStack users
A way of visualising commandline command execution.

Additional context
Check the projects website - https://asciinema.org/

Resources:
https://github.com/asciinema/asciinema
https://github.com/asciinema/asciinema-player
https://github.com/asciinema/asciinema-server

Originally created by @TBK on GitHub (Sep 20, 2018). **Describe the feature you'd like** Support for asciicast. **Describe the benefits this feature would bring to BookStack users** A way of visualising commandline command execution. **Additional context** Check the projects website - https://asciinema.org/ Resources: https://github.com/asciinema/asciinema https://github.com/asciinema/asciinema-player https://github.com/asciinema/asciinema-server

OVERLORD added the 🛠️ Enhancement 📝 WYSIWYG Editor > Markdown Editor 🔨 Feature Request labels 2026-02-04 22:24:12 +03:00

OVERLORD commented

2026-02-04 22:24:17 +03:00

@ssddanbrown commented on GitHub (Sep 20, 2018):

Thanks for this request. What kind of support were you looking for?

Just had a quick review of embed options. You can currently use the link or image link embed options that asciinema provide. Embedding an actual player is more tricky since it's not an iframe but script. Could maybe update WYSIWYG editor filters to allow asciinema scripts but it won't show in the editor, Adds a chance the script could be unintentially removed on content edit.

Bit of a small-traffic use-case to build in custom editor UI controls like we do for code blocks or drawings.

@ssddanbrown commented on GitHub (Sep 20, 2018): Thanks for this request. What kind of support were you looking for? Just had a quick review of embed options. You can currently use the link or image link embed options that asciinema provide. Embedding an actual player is more tricky since it's not an iframe but script. Could maybe update WYSIWYG editor filters to allow asciinema scripts but it won't show in the editor, Adds a chance the script could be unintentially removed on content edit. Bit of a small-traffic use-case to build in custom editor UI controls like we do for code blocks or drawings.

OVERLORD commented

2026-02-04 22:24:19 +03:00

@TBK commented on GitHub (Sep 20, 2018):

The ideal workflow for my usecase woulde be:

Record.
Upload "manually" to BookStack (json file).
Edit/Create page and via WYSIWYG add the asciicast.

Could maybe update WYSIWYG editor filters to allow asciinema scripts but it won't show in the editor, Adds a chance the script could be unintentially removed on content edit.

Would a possible solution be to display a "dummy image" with a text telling the user that it contains content that the editor can not display?

@TBK commented on GitHub (Sep 20, 2018): The ideal workflow for my usecase woulde be: 1. Record. 2. Upload "manually" to BookStack (json file). 3. Edit/Create page and via WYSIWYG add the asciicast. > Could maybe update WYSIWYG editor filters to allow asciinema scripts but it won't show in the editor, Adds a chance the script could be unintentially removed on content edit. Would a possible solution be to display a "dummy image" with a text telling the user that it contains content that the editor can not display?

OVERLORD commented

2026-02-04 22:24:22 +03:00

@mtorromeo commented on GitHub (Feb 2, 2024):

I used a hack to embed asciicasts. I'll leave it here for anyone looking into this.

In the editor, insert a sharable link to the cast (Eg: https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3)
Go into customization settings and add the following script into the "Custom HTML Head Content" field:

<script type="module">
for (const link of document.querySelectorAll('.page-content a[href^="https://asciinema.org/a/"]')) {
  const script = document.createElement('SCRIPT');
  script.src = `${link.href}.js`;
  const urlParts = link.href.split('/');
  script.id = `asciicast-${urlParts[urlParts.length - 1]}`;
  script.async = true;
  link.parentElement.insertBefore(script, link);
  link.remove();
}
</script>

add https://asciinema.org to the ALLOWED_IFRAME_SOURCES variable in .env or add ALLOWED_IFRAME_SOURCES="https://*.draw.io https://*.youtube.com https://*.youtube-nocookie.com https://*.vimeo.com https://asciinema.org" if it's missing

The links will be replaced by an embedded iframe on page load.

It should work fine with custom asciinema server by just replacing the domain everywhere.

@mtorromeo commented on GitHub (Feb 2, 2024): I used a hack to embed asciicasts. I'll leave it here for anyone looking into this. 1. In the editor, insert a sharable link to the cast (Eg: https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3) 2. Go into customization settings and add the following script into the "Custom HTML Head Content" field: ```js <script type="module"> for (const link of document.querySelectorAll('.page-content a[href^="https://asciinema.org/a/"]')) { const script = document.createElement('SCRIPT'); script.src = `${link.href}.js`; const urlParts = link.href.split('/'); script.id = `asciicast-${urlParts[urlParts.length - 1]}`; script.async = true; link.parentElement.insertBefore(script, link); link.remove(); } </script> ``` 3. add `https://asciinema.org` to the `ALLOWED_IFRAME_SOURCES` variable in `.env` or add ` ALLOWED_IFRAME_SOURCES="https://*.draw.io https://*.youtube.com https://*.youtube-nocookie.com https://*.vimeo.com https://asciinema.org"` if it's missing The links will be replaced by an embedded iframe on page load. It should work fine with custom asciinema server by just replacing the domain everywhere.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#825