mdjs

Source file extensions: .md

mdjs is a format that allows you to use JavaScript with Markdown, to create interactive demos. It does so by "annotating" JavaScript that should be executed in Markdown.

You can use a markdown code block with js script:

```js script
// execute me
```

You can import modules from npm by using their bare name or from the project by using a root aliast ~/ or a relative path:

```js script
import '@divriots/simba/input-email/define';
import '~/input-email/define';
import '../define';
```

All MDJS story syntaxes are supported too. E.g to render a component use the story key:

```js story
export const demoStory = () => `<simba-input-email></simba-input-email>`;
```

Although for static HTML it's preferable to use html code blocks:

```html story
<simba-input-email></simba-input-email>
```

To add a source code viewer next to the rendered component use the preview-story key:

```html preview-story
<simba-input-email></simba-input-email>
```

All frameworks are supported as in the CSF storybook files. E.g. you can use Lit to make dynamic demos with JS variables and event handlers.

```js preview-story
import { html } from 'lit';
import { Required } from '@divriots/simba/form-core';
export const demoStory = () => html`
  <simba-input-email
    .validators=${[new Required()]}
    @input=${() => /* do smth */}
  ></simba-input-email>
`;
```

The preview-story allows editing the code and live-rendering it, which creates a playground experience right in your documentation for all rendered code blocks.

Editable preview-story

References

Quick example

doc.md

```js script
import { html } from 'lit';
import '@divriots/simba/input-email/define';
```

# simba-input-email

## Basic

```html preview-story
<simba-input-email
  help-text="Your email address"
  placeholder="simba@example.com"
></simba-input-email>
```

## Using validators

```js preview-story
export const validatorsStory = () => html`
  <simba-input-email
    .validators=${[new Required()]}
    help-text="Your email address"
    placeholder="simba@example.com"
  ></simba-input-email>
`;
```