Live Examples
Real interactive components rendered inside the docs.
A real, running component
The button below is a real Svelte component running as part of this app. It is not a screenshot, and not a sandboxed iframe. Click it, then open the source:
Single source of truth
The rendered component and the source panel above both come from one file, counter.svelte. It is imported twice: once as a component (rendered) and once
as ?source (highlighted at build time by the docsmith() plugin from svelte-docsmith/vite), so the demo and its code can never drift.
Examples that can't rot
The example in your docs is the same component your users import. When the component changes, the rendered demo and its shown source both change with it, so it can never decay into a screenshot of something that used to work.
See Writing pages for the import pattern to copy.
API reference
children required Snippet source required string ?source import of the same file.