---
title: FileDOM
description: Render React components as real Finder icons.
---

FileDOM is a React renderer for the macOS desktop. Its sprites are real files on
your Desktop, and Finder draws them as icons. Use it to build games, editors,
and other interactive tools.

```tsx
import { startSession, StageProvider, Stage, Sprite } from 'filedom';

// Each paddle and the ball is a real file on your Desktop.
function Pong() {
  // …metrics, keys, and a 50 ms physics tick (full file: Getting Started)
  return (
    <StageProvider metrics={metrics} park={park} background={FIELD}>
      <Stage prebake={[paddle]}>
        <Sprite icon={paddle} at={{ x: 32, y: left }} />
        <Sprite icon={paddle} at={{ x: metrics.width - 32, y: right }} />
      </Stage>
      <Stage prebake={[ball]}>
        <Sprite icon={ball} at={ballAt} />
      </Stage>
    </StageProvider>
  );
}

startSession(<Pong />);
```

[Get started](/docs/learn/getting-started) to install FileDOM and run the whole file.

## Build

- [Stage & Sprite](/docs/reference/components/stage): position and animate artwork.
- [Text](/docs/reference/components/text): labels and scores.
- [Hooks](/docs/reference/hooks): keyboard, pointer, and game-loop input.
- [Examples](/docs/examples/pong): complete games.

For the packaged desktop app, see [Finder Mode](/docs/finder-mode).