Your desktop is the DOM.
filedom is a React renderer for the macOS desktop. Components become real files, and Finder draws them as they move and respond to input. What react-dom is to the browser, filedom is to the file system.
pnpm add filedomThe Pong from the code below, redrawn in the browser. Select the Desktop mid-game and the paddles and the ball turn out to be files. Your own files are hidden in place until it ends.
Write React. Finder renders it.
A custom reconciler turns your component tree into filesystem and Finder operations. Mount creates files; unmount cleans them up.
React API referenceimport { 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 />);- Real files as host elements
- Every rendered node is a file on your Desktop with its own icon and position.
- Animation by moving files
- Finder redraws a moved icon at once but blanks a changed one for a second or two, so filedom bakes every icon ahead of time and animates by position.
- Input, sound, and hiding built in
- Native Swift binaries capture keyboard input and play audio. Your own Desktop files are hidden in place during a game and reappear when it ends.
Whole games, played in icons.
Each piece is a file, and each frame is Finder moving files.
See Finder Mode- snake
- 2048
- solitaire
- chess
- minesweeper
- + more
One package, three entry points.
The reconciler and components live in filedom, the native macOS bridge infiledom/system, and game audio in filedom/sound.
Getting Started
Install, verify your machine with the CLI, and run your first game.
filedom
createRoot, the component and hook set, Stage pooling, and the asset toolkit.
filedom/system
The macOS host bridge and filesystem operations behind the React layer.
filedom/sound
Sound registration, playback, and hooks, backed by the native audio binary.
Architecture
Follow the stack from React through the reconciler and host bridge to Swift.
Host Runtime
The TypeScript bridge and the Swift binaries that draw the desktop.