Aug 28, 2024

Create demos of your components

You can create demos od components or just re-suable code chunks with the <Demo> component.

Get started

Create a demo svelte file in src/lib/Demos.
Populate the file with the code of your demo.
Update the demos registry (used by the <Demo> component to fetch the component and code). You only need to run this script when adding and removing demo files.
```
npm run update-registry
```
You can now use the <Demo> component ans pass it the name prop. The name should be the name of the demo file you created. For exemple, I create a tree.svelte demo inside the src/lib/Demos dir. The name passed to the <Demo> component is tree.

Definition

The demo component.

name

string

Required

The name of the demo file.

lang

string

Default: svelte

If the demo is not a svelte file, you need to specify it's language for syntax highlighting.

container

boolean

Default: true

Whether the component preview is in a <ComponentPreview> container or not.

code

boolean

Default: true

Weather to show the code of the demo. If false, the tabs will be hidden since only the preview will be shown.

Last updated : Aug 28, 2024