flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
853 B
29 lines
1---
2title: "Interactive Sandbox"
3description: "Show interactive code examples in your documentation"
4category: "Components"
5---
6
7# Interactive Sandbox
8
9You can show interactive code examples in your documentation with the sandbox component.
10
11
12```astro
13import Sandbox from "$components/sandbox/";
14
15<Sandbox folder="example1" active="Counter.js" />
16```
17
18
19import Sandbox from "$components/sandbox/";
20
21<Sandbox folder="example1" active="Counter.js" />
22
23Your folder **must** be in the `src/examples` folder.
24
25The `active` file is the file that will be shown when the sandbox is opened.
26
27Sandboxes include tailwind and the previews background and text color is set to match the rest of your site
28(both in dark and light mode). If you add your own styles, be careful to always include a dark and
29light mode version of your styles by using the `dark:` prefix.