> ## Documentation Index
> Fetch the complete documentation index at: https://dadd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# mujoco-react

> MuJoCo physics in the browser with React Three Fiber

<video autoPlay loop muted playsInline style={{ width: '100%', borderRadius: '8px', marginBottom: '24px' }}>
  <source src="https://mintcdn.com/dadd/x5u7JIzOoEIEe79b/images/mj2.mp4?fit=max&auto=format&n=x5u7JIzOoEIEe79b&q=85&s=1278d68a106d67b5110aee2f18b00d0b" type="video/mp4" data-path="images/mj2.mp4" />
</video>

<div style={{ textAlign: 'center', marginBottom: '24px' }}>
  <a href="https://mujoco-react-example.pages.dev" target="_blank">Demo</a> · <a href="https://github.com/noah-wardlow/mujoco-react" target="_blank">GitHub</a> · <a href="https://www.npmjs.com/package/mujoco-react" target="_blank">npm</a>
</div>

```bash theme={null}
npm install mujoco-react three @react-three/fiber @react-three/drei
```

```tsx theme={null}
import { MujocoProvider, MujocoCanvas } from "mujoco-react";

<MujocoProvider>
  <MujocoCanvas config={{ src: "https://raw.githubusercontent.com/google-deepmind/mujoco_menagerie/main/franka_emika_panda/", sceneFile: "scene.xml" }} />
</MujocoProvider>
```

<CardGroup cols={3}>
  <Card title="Getting Started" icon="play" href="/introduction">
    Quick start, controllers, architecture
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/components/mujoco-provider">
    MujocoProvider, MujocoCanvas, IkGizmo, Debug, and more
  </Card>

  <Card title="Hooks" icon="webhook" href="/hooks/use-mujoco">
    useBeforePhysicsStep, useBodyState, useSensor, useCtrl, usePolicy, and more
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Building Controllers" icon="gamepad" href="/guides/building-controllers">
    Custom controllers, IK solvers, and the createController factory
  </Card>

  <Card title="Cameras and Captures" icon="camera" href="/guides/cameras-and-captures">
    Viewer cameras, MuJoCo cameras, virtual debug cameras, and offscreen captures
  </Card>

  <Card title="API Reference" icon="code" href="/api/simulation-control">
    Simulation control, state management, forces, model introspection
  </Card>
</CardGroup>