Rocket Logo Rocket Guides Docs Blog Toggle darkmode

First Pages: Use JavaScript

If you would like to add JavaScript to a page, you can do it inline using the script markdown directive. The script you write runs on the page as a module.

```js script
const message = 'Hello, World!';
console.log(message);
```

Adding the above will log Hello, World! to the console without adding a global message variable.

This can be useful for importing web components and using them in Markdown. Imagine you had some magic-reveal element that you wanted to use on a page:

```js script
import 'magic-reveal/magic-reveal.js';
```

<magic-reveal>

This text will get magically revealed.

I can **still** use Markdown as long as there is an empty line
between the opening/closing tags and my text.

</magic-reveal>

Component Story Format

You can also add storybook-style CSF (v2 only) stories to a page using js story or js preview-story, just make sure to import html from @mdjs/mdjs-preview instead of from lit or lit-html.

```js story
import { html } from '@mdjs/mdjs-preview';

export const StoryPreview = () => html`
  <p>Use stories in Rocket!</p>
`;
```