Skip to content
On this page

Documentation

Markdown

Sibling markdown

To add documentation to a story, create a file with the same name next to it, with the .md extension.

For example, if your story is BaseButton.story.svelte, create a BaseButton.story.md file.

Standalone page

If you create a markdown file ending with .story.md that isn't related to a sibling story file, it will automatically create a virtual story that renders the markdown as a page.

You can add a frontmatter to the markdown to customize the virtual story with the following properties:

Example Introduction.story.md file:

md
---
group: 'top'
icon: 'carbon:bookmark'
---

# Welcome

This is a demo book using Svelte 3.

---

Learn more about Histoire [here](https://histoire.dev/).

Source code

WARNING

Auto-CodeGen is not available for Svelte.

To document a copyable source code manually you can use the source prop.

svelte
<script>
  export let Hst

  const source = `<h1>Toto</h1>

<input
  bind:value={count}"
  type="number"
>`
</script>

<Hst.Story title="Hand-written source">
  <Hst.Variant
    title="Source prop"
    {source}
  >
    <h1>Toto</h1>

    <input
      bind:value={count}"
      type="number"
    >
  </Hst.Variant>
</Hst.Story>

Released under the MIT License.