Skip to content
filedom
Get started
Esc
↑↓navigate↵open⌘Jpreview

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.

Get startedpnpm add filedom
ProjectsScreenshot.pngPDFinvoice.pdfArchiveideas.mdFinderFileEditViewGoWindowHelpWed 7 Oct 9:41

The 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.

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 />);
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.
  • snake
  • 2048
  • solitaire
  • chess
  • minesweeper
  • + more

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.