• Embed Types Reference

    Chalk supports various types of embeds for rich, interactive content.

    Media Embeds

    Images

    !!!
image.png
[Alt text for accessibility]
Caption text goes here.
!!!

    Supported formats: PNG, JPG, SVG, WebP, GIF

    Videos

    !!!
video.mp4
[Video description]
This video demonstrates the concept.
!!!

    Supported formats: MP4, WebM

    Audio

    !!!
lesson.m4a

lesson.vtt
!!!

    Supported formats: M4A, MP3, OGG, WAV

    You can add an optional transcript on a separate line (VTT or SRT). It will be rendered as a subtitle track for the audio player.

    Video Flags

    You can add flags to control video behavior by appending query parameters to the filename:

    !!!
video.mp4?loop&autoplay
[Video that loops and autoplays]
This video will start playing automatically and loop continuously.
!!!

    Available flags:

    • loop - Video will loop continuously
    • autoplay - Video will start playing automatically (requires muted for most browsers)
    • muted - Video will be muted by default
    • controls - Show video controls (default behavior)
    • nocontrols - Hide video controls

    Examples:

    • video.mp4?loop - Looping video with controls
    • video.mp4?loop&autoplay&muted - Looping autoplay video (muted for browser compatibility)
    • video.mp4?nocontrols - Video without controls

    Motion Embeds

    !!!
animation.webm
[Silent screen recording]
This shows the interaction flow.
!!!

    For silent looping recordings like GIFs or WebM files.

    Interactive Embeds (Chalk Islands)

    Svelte Components

    !!!
path/to/component.svelte
[Interactive button that increments a counter]
Try clicking it! So clicky!!
!!!
    • .svelte files are detected and bundled with Vite
    • Components are scoped and isolated
    • Keep them focused and fast-loading

    External Embeds

    Figma Designs

    !!!
https://www.figma.com/design/FILE_ID/NAME?node-id=NODE_ID
[Design system component example]
This shows how metadata can be used to track design information.
!!!

    Veed Videos

    !!!
https://www.veed.io/view/VIDEO_ID
[Video title or description]
Optional caption text.
!!!

    Veed view URLs are automatically converted into embedded video players. The URL must contain a valid video UUID (e.g. 99e1db2e-1713-4b47-80f4-eb3acfa2acf1). Both www.veed.io and veed.io URLs are supported.

    URLs

    !!!
https://example.com/resource
[External resource description]
This links to additional information.
!!!

    Embed Structure

    All embeds follow the same basic structure:

    !!!
[Optional: File path or URL]
[Optional: Alt text in brackets]
[Optional: Caption text]
[Optional: Additional metadata]
!!!

    Best Practices

    1. Always include alt text for accessibility
    2. Use descriptive captions to explain the content
    3. Keep file sizes reasonable for performance
    4. Test embeds in preview mode
    5. Use relative paths for local files