> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Examples

Storybook Rsbuild provides a variety of examples (sandboxes) to help you get started with different frameworks and configurations.

These examples are located in the [`sandboxes`](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes) directory of the repository.

## Frameworks

### React

- **[React 18](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-18)**: Basic React 18 setup with TypeScript.
- **[React 16](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-16)**: Legacy React 16 support.
- **[Rspack React](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rspack-react-18)**: Integration with raw Rspack configuration (without Rsbuild).

### Vue

- **[Vue 3](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/vue3)**: Vue 3 with TypeScript and JSX support.

### Web Components

- **[Lit](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/lit)**: Web Components development using Lit.

### Vanilla JS/TS

- **[Vanilla TS](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/vanilla-ts)**: Framework-agnostic setup for vanilla JavaScript/TypeScript.

## Advanced Integrations

### Module Federation

Storybook Rsbuild supports [Module Federation](https://module-federation.io/) out of the box.

- **[Modern.js Module Federation](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/modernjs-react-mf)**: A host application loading federated modules from a remote, all running within Storybook.
- **[Rslib Module Federation](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rslib-react-mf)**: Developing a federated component library with Rslib and Storybook.

### Modern.js

- **[Modern.js Framework](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/modernjs-react)**: Seamless integration with the Modern.js full-stack framework, reusing the app's config.

### Rslib (Library Build)

- **[Rslib Component Library](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rslib-react-component)**: Developing a React component library with Rslib, demonstrating how to reuse Rslib config for Storybook.
- **[Rslib Vue Component](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rslib-vue3-component)**: Developing a Vue 3 component library with Rslib.

### Rstack

- **[Rstack React App](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rstack-react)**: Developing a React app while reusing an async `define.app()` configuration from Rstack.
- **[Rstack React Component](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/rstack-react-component)**: Developing a React component library while reusing an async `define.lib()` configuration from Rstack.

## Testing

- **[React Testing](https://github.com/rstackjs/storybook-rsbuild/tree/main/sandboxes/react-testing)**: Demonstrates Storybook's test runner and interaction testing capabilities.