• Embeds in Chalk

    Chalk supports several types of embeds that allow you to include rich, structured content inside your lessons, guides, or documentation. These embeds enhance your writing workflow and output fidelity, whether you’re previewing locally or preparing production-ready materials.

    Media Embeds

    Use triple-exclamation blocks (!!!) to embed media such as images, videos, audio, or moving images (like silent screen recordings).

    Basic syntax

    !!!
figures/my-graphic.png

[Alt text for accessibility]

A caption can go here.

It can even have multiple paragraphs!
!!!

    Chalk automatically determines the embed type based on the file extension or link.

    Supported formats include:

    • Images: PNG, JPG, SVG, etc.
    • Videos: MP4, WebM (with sound)
    • Audio: M4A, MP3, OGG, WAV (with optional VTT transcript)
    • Motion embeds: silent looping recordings like GIFs or WebM
    • Veed videos: https://www.veed.io/view/... URLs render as embedded players
    • Figma designs: Figma URLs are downloaded and rendered as optimized images

    Each block can include:

    • A file path or URL
    • Optional alt text in square brackets (used for accessibility and SEO)
    • One or more paragraphs of visible caption text

    Interactive Embeds (a.k.a. Chalk Islands)

    Interactive embeds allow you to include live Svelte components inside your content—great for interactive demos, playful widgets, or custom UI logic.

    Example

    !!!
courses/example-course/clicky-button.svelte

[Button that increments a counter on click]

Try clicking it! So clicky!!

It’s a full Svelte component, rendered client-side.
!!!

    How it works

    • .svelte files are detected and bundled with Vite during the build.
    • A <div data-chalk-island="..."> is injected and hydrated on the client.
    • You can place multiple interactive islands on the same page.

    Islands are scoped and isolated. Keep them focused and fast-loading.

    Tips for Working with Embeds

    • All embeds follow the same basic block structure: !!!, contents, then !!! again.
    • You can start with just a path or URL, and refine later with alt text or captions.
    • Embed paths are resolved relative to your content source directory.
    • The system supports progressive enhancement—early drafts can be minimal and grow into polished embeds.