flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
992 B
30 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" template="react" />
16```
17
18### Result:
19
20import Sandbox from "$components/sandbox/";
21
22<Sandbox folder="example1" active="Counter.js" template="react" />
23
24Your folder **must** be in the `src/examples` folder, either just use the name of the folder or use the full path (e.g. `/src/examples/example1`).
25
26The `active` file is the file that will be shown when the sandbox is opened.
27
28Sandboxes include tailwind and the previews background and text color is set to match the rest of your site
29(both in dark and light mode). If you add your own styles, be careful to always include a dark and
30light mode version of your styles by using the `dark:` prefix.