---
title: Zapp!
description: Learn how to add Zapp! embeds to your documentation.
---

Use the `<Zapp />` component to embed Zapp! sandboxes in your documentation.

[Zapp!](https://zapp.run) is a free online Dart & Flutter sandbox that lets you run Dart code in the browser. It's great for sharing code snippets in your documentation.

## Example

<Zapp id="flutter" />

```jsx
<Zapp id="flutter" />
```

### Lazy Loading

To prevent the sandbox from loading until the user interacts, pass the `lazy` prop.

```jsx
<Zapp lazy id="flutter" />
```

<Zapp lazy id="flutter" />

### From GitHub

To load a Zapp! from GitHub, set the `id` prop to `github/<path>`.

```jsx
<Zapp id="github/roaa94/flutter_3d_calculator" />
```

<Zapp id="github/roaa94/flutter_3d_calculator" />

You can also pass a path relative to the root of the repository.

```jsx
<Zapp id="github/rrousselGit/riverpod/tree/master/packages/flutter_riverpod/example" />
```

<Zapp id="github/rrousselGit/riverpod/tree/master/packages/flutter_riverpod/example" />

### From GitHub Gists

To load a Zapp! from a GitHub Gist, set the `id` prop to `gist/<id>`.

Gist:
https://gist.github.com/flutterdevrelgists/ecabed4a17a3aad8bee7c6327e472fc8

Zapp:

```jsx
<Zapp id="gist/ecabed4a17a3aad8bee7c6327e472fc8" />
```

Final product:

<Zapp id="gist/ecabed4a17a3aad8bee7c6327e472fc8" />

### From Pub

To load a Zapp! from a https://pub.dev example, set the `id` prop to `pub/<package>` or `pub/<package>/<version>`.

```jsx
<Zapp id="pub/http" />

<Zapp id="pub/http/0.13.4" />
```

<Zapp id="pub/http" />

<Zapp id="pub/http/0.13.4" />

## Props


<Property name="id" type="string" required>
  The ID of the Zapp to embed.
</Property>

---

<Property name="lazy" type="boolean" optional>
  Whether or not to lazy load the Zapp. Defaults to `false`.
</Property>

---

<Property name="theme" type="light | dark" optional>
  The theme of the Zapp. Defaults to the users browser preference.
</Property>