# create

Create a renderer over compiler modules supplied by the caller.

`ondine/compiler/wasm` and `ondine/compiler` both export `create`. Each module contains one diagram type, or `all` diagram types, as a compiled `WebAssembly.Module` or as base64 bytes. The [In-Browser Compilation](/docs/guides/browser) guide shows common tasks.

```ts title="preview.ts"
import { create } from 'ondine/compiler/wasm'
import { wasm as all } from 'ondine/compiler/wasm/all'

// Instantiates the module on the first render
const renderer = create({ modules: { all } })
const { svg } = renderer.render('flowchart LR\n  A --> B')
```

## Signature

```ts
// Returns a renderer that instantiates each module once, on first use
create(options)
```

## Parameters

### options.modules

* **Type:** `Readonly<Record<string, WebAssembly.Module | string>>`

The WebAssembly modules by diagram type, as compiled modules or base64 bytes. The renderer compiles base64 bytes synchronously on first use. If the host refuses runtime compilation, as Cloudflare Workers do, pass a module that the bundler compiled.

```ts
import { create } from 'ondine/compiler/wasm'
import all from 'ondine/compiler/wasm/all.wasm'

// Passes a module compiled ahead of time by the bundler
const renderer = create({ modules: { all } })
```

The renderer sends the source to the first module. If that module reports a diagram type that it does not contain, the renderer sends the source again to the module with that type as its key.

## Returns

### render

* **Type:** `(source: string, options?: render.Options) => render.ReturnType`

Renders `source` with the module for its diagram type. It accepts the same options and returns the same result as [`render`](/docs/api/compiler/render) from `ondine/compiler`.

```ts
import { create } from 'ondine/compiler/wasm'
import { wasm as all } from 'ondine/compiler/wasm/all'

const renderer = create({ modules: { all } })

// Lays out for the preview's width
renderer.render('flowchart LR\n  A --> B', { maxWidth: 480 })
```

## Errors

### Error

If `modules` is empty, `render` throws a plain `Error` with the message `Render.create needs at least one module.`

```ts
import { create } from 'ondine/compiler/wasm'

// Throws on the first render
create({ modules: {} }).render('flowchart LR\n  A --> B')
```

### RenderError

If `render` cannot render the source, it throws a [`RenderError`](/docs/api/compiler/RenderError). This also applies if no supplied module contains the diagram type of the source.