# Introduction

Welcome to **Acme Docs** — rendered with **safe-mdx** (MDX without eval).

Authors write real MDX components: `<Note>`, `<Steps>`.

## Steps

<Steps>

1. Install dependencies with `bun install`.
2. Start the dev server.
3. Open the preview in your browser.

</Steps>

## Callouts

<Note>
A standard note, written as an MDX `<Note>` component.
</Note>

<Note type="warning">
And a **warning** variant via `<Note type="warning">`.
</Note>

## Code

```ts
export function hello(name: string): string {
  return `Hello, ${name}!`
}
```

## Links

A [safe link](https://example.com) and a [blocked one](javascript:alert(1)) — the
second has its href stripped by the URL sanitizer.

## Comparison

| Feature | directives | safe-mdx |
| --- | --- | --- |
| Syntax | `:::note` | `<Note>` |
| Eval on workerd | n/a | none |
| Components | allowlisted | allowlisted |