FileDOM

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.

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 to install FileDOM and run the whole file.

Build

• Stage & Sprite: position and animate artwork.
• Text: labels and scores.
• Hooks: keyboard, pointer, and game-loop input.
• Examples: complete games.

For the packaged desktop app, see Finder Mode.