Component reference

Import the named Asciinema component from the package root:

---
import { Asciinema } from "astro-asciinema";
---

import { Asciinema } from "astro-asciinema"

Props

src

string

required

URL of an asciicast or another recording format supported by Asciinema player. Importing a local recording with ?url produces a suitable value.

options

Omit<Options, "logger">

Serializable Asciinema player options. The component passes these options to AsciinemaPlayer.create in the browser.

theme-source

ThemeSource | false

default:"media"

Source to watch for theme changes. When it changes, the component remounts the player and preserves its playback time and playing state.Accepted values:

"media": watch (prefers-color-scheme: dark).
"class": watch the dark class on <html>.
{ class: "name" }: watch a custom class on <html>.
"data-theme": watch the data-theme attribute on <html>.
{ attribute: "name" }: watch a custom attribute on <html>.
false: disable theme watching.

class

string

Class name applied to the rendered <astro-asciinema> custom element.

Example

<Asciinema
	src={Demo}
	class="terminal-recording"
	options={{
		controls: true,
		cursorMode: "hidden",
		theme: "site",
	}}
	theme-source="class"
/>

For custom light and dark palettes, see Theme watching.

Getting started

Guides

Reference

Props

Example

​Props

​Example

Props

Example