Skip to content
alkemist

Content

Publish equations, source code, audio, and video with reusable components.

For ordinary HTML and browser-native media controls, see the separate native HTML and media reference. Those examples use browser elements and theme styles.

Type TeX and switch between inline and display math. Invalid or unsupported expressions show an error. The preview uses the same KaTeX renderer as the built component.

Math

Preview loads when it becomes visible.

Component parameters
Source code
math.astro
---
import Math from "@alkemdotdev/alkemist-components/math";
---

<Math
  tex={"E = mc^2"}
  display={true}
  label={"Mass–energy equivalence"}
/>

Read the Math reference →

Edit source, highlights, focus, changes, folds, and annotations. Choose a preset to try a complete example; preview and copied source update together.

Code

Preview loads when it becomes visible.

Component parameters
Source code
code.astro
---
import Code from "@alkemdotdev/alkemist-components/code";
---

<Code
  lang={"typescript"}
  title={"oscillator.ts"}
  highlightLines={[]}
  lineNumbers={true}
  focusLines={[]}
  addedLines={[]}
  removedLines={[]}
  collapsedRanges={[]}
  annotations={[]}
  highlightText={[]}
  wrap={false}>{`
const damping = 0.25;
const frequency = 2;
const duration = 10;
const samples = 300;

const omegaD = frequency * Math.sqrt(1 - damping ** 2);
const displacement = (t: number) =>
  Math.exp(-damping * frequency * t) * Math.cos(omegaD * t);

const points = Array.from({ length: samples }, (_, i) => {
  const time = (i / (samples - 1)) * duration;
  return { time, value: displacement(time) };
});
`}</Code>

Read the Code reference →

A 30-second tone study. Try the timeline, speed, repeat, chapter navigation, and transcript. Parameters regenerate the real component.

Audio

Preview loads when it becomes visible.

Component parameters
Source code
audio.astro
---
import Audio from "@alkemdotdev/alkemist-components/audio";
---

<Audio
  id={""}
  src={"/test/media-study.wav"}
  title={"Three tones"}
  caption={"A synthetic 30-second listening study."}
  preload={"metadata"}
  autoplay={false}
  muted={false}
  loop={false}
  playbackRates={[0.5,0.75,1,1.25,1.5,2]}
  seekOffset={10}
  tracks={[{"src":"/test/media-chapters.vtt","kind":"chapters","srclang":"en","label":"Sections"}]}
  download={true}
  transcript={"0:00 — A quiet 220 Hz tone.\n0:10 — The tone rises to 330 Hz.\n0:20 — The tone rises to 440 Hz, then fades out."}
/>

Read the Audio reference →

A 30-second wave study with audio, English captions, Spanish subtitles, and chapters. Try captions, playback speed, fullscreen, and picture-in-picture.

Video

Preview loads when it becomes visible.

Component parameters
Source code
video.astro
---
import Video from "@alkemdotdev/alkemist-components/video";
---

<Video
  id={""}
  src={"/test/media-study.mp4"}
  title={"Wave study"}
  caption={"Synthetic motion and tones, with two caption languages and three chapters."}
  poster={"/test/media-poster.jpg"}
  preload={"metadata"}
  autoplay={false}
  muted={true}
  loop={false}
  playbackRates={[0.5,0.75,1,1.25,1.5,2]}
  seekOffset={10}
  tracks={[{"src":"/test/media-en.vtt","kind":"captions","srclang":"en","label":"English","default":true},{"src":"/test/media-es.vtt","kind":"subtitles","srclang":"es","label":"Español"},{"src":"/test/media-chapters.vtt","kind":"chapters","srclang":"en","label":"Sections"}]}
  download={true}
  transcript={"0:00 — Blue waves drift across the frame over a low tone.\n0:10 — The tone rises as the wave pattern continues.\n0:20 — The final higher tone fades out with the study."}
/>

Read the Video reference →