Zapp!
Learn how to add Zapp! embeds to your documentation.
Use the <Zapp /> component to embed Zapp! sandboxes in your documentation.
Zapp! 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.
Lazy Loading
To prevent the sandbox from loading until the user interacts, pass the lazy prop.
<Zapp lazy id="flutter" />
From GitHub
To load a Zapp! from GitHub, set the id prop to github/<path>.
<Zapp id="github/roaa94/flutter_3d_calculator" />
You can also pass a path relative to the root of the repository.
<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:
<Zapp id="gist/ecabed4a17a3aad8bee7c6327e472fc8" />
Final product:
From Pub
To load a Zapp! from a https://pub.dev example, set the id prop to pub/<package> or pub/<package>/<version>.
<Zapp id="pub/http" />
<Zapp id="pub/http/0.13.4" />