An independent Source inside a lesson

An embed gives another Source its own page, styles, scrolling, and interactions. Use the note below, then follow its link. Navigation stays inside the example.

<x-source-embed src="./source-embed/note.page.md" />

Choose the relationship

Use @include when the content should join this document's reading flow. Use <x-source-embed /> for an independent experience such as a working demo.

The embedded Source keeps its complete layout. Without JavaScript, its title is a normal link to that page. See the component reference for sizing and supported attributes.

Embedded slides

Player's normal URL parameters also work in an embed. This Source opens directly in Slides; its controls and navigation stay inside the frame.

<x-source-embed src="./play-deck.demo.md?play=presentation" />

Use ?play=focus for focused reading, and append a fragment to start at a particular Block or Beat. The destination Source or its layout must contain <x-player-app />, with Player installed in the project.

For a more constrained embed, add play-controls=off to remove the configuration button. Combine it with play-notes=off and play-autohide=off to keep only the authored action row visible. Try the deck without configuration controls. See Player URL parameters for all available settings.