Skip to content
alkemist

Native HTML & media

Standard browser elements styled by the Alkemist theme. No wrapper components or component imports required.

For consistent, customizable controls, use the Audio and Video components. They add playback speed, captions, chapters, transcripts, and an Alkemist control bar. These specimens below retain the browser’s own controls.

Native text, lists, tables, disclosures, buttons, and inputs. Choose an element to see its relevant content. Lists and tables accept JSON data.

HTML

Preview loads when it becomes visible.

Component parameters
Source code
html.html
<p>A useful idea starts with a clear explanation.</p>

Give an image meaningful alternative text. Compare containing the whole image with cropping it to fill its box.

img

Preview loads when it becomes visible.

Component parameters
Source code
image.html
<figure><img src="/test/torus-knot.svg" alt="A blue torus knot" width="720" height="400" style="object-fit: contain" /><figcaption>A generated geometric teaching specimen.</figcaption></figure>

A locally generated two-second tone. Native playback controls remain available; browsers decide whether autoplay is allowed.

audio

Preview loads when it becomes visible.

Component parameters
Source code
native-audio.html
<audio controls src="/test/tone.wav" preload="metadata"></audio>

A locally generated three-second wave study. Use native controls to play it; the poster appears before loading.

video

Preview loads when it becomes visible.

Component parameters
Source code
native-video.html
<video controls src="/test/waves.mp4" muted loop preload="metadata" width="640"></video>