Recreating Windows XP in React: Why Devs Keep Building OS Clones

Every few months, someone drops a pixel-perfect recreation of an old operating system built entirely in the browser, and the dev community collectively loses its mind. This time it's React XP — a faithful recreation of Windows XP built with React and TypeScript — and honestly, it's impressive as hell.

But beyond the nostalgia trip, projects like this are genuinely fascinating from a technical standpoint. Let me break down why these OS-in-a-browser projects are more than just party tricks, and what you can actually learn from building one yourself.

Why Developers Keep Doing This

There's something deeply satisfying about recreating a complex UI system from scratch. Windows XP had a surprisingly sophisticated interface — draggable, resizable windows with z-index management, a taskbar with window grouping, a start menu with nested submenus, and system-level state management tying it all together.

Rebuilding that in React forces you to solve real problems:

• Window management — stacking order, focus states, minimize/maximize/restore flows
• Global state coordination — the taskbar needs to know about every window, the desktop needs to handle click-away events
• Drag and resize systems — pointer event handling that actually feels native
• Theming at scale — XP's Luna theme had hundreds of specific visual states

These aren't toy problems. I've worked on enterprise dashboards that needed half of this functionality, and trust me, getting window management right is harder than it looks.

The Architecture Behind an OS Clone

If you wanted to build something like this yourself, here's how I'd approach the core window manager. The key insight is that each window is really just a state object:

// Core window state - everything the system needs to know
interface WindowState {
  id: string;
  title: string;
  position: { x: number; y: number };
  size: { width: number; height: number };
  zIndex: number;
  status: 'open' | 'minimized' | 'maximized';
  component: React.ComponentType; // the actual app content
}

// Window manager handles all the coordination
interface WindowManager {
  windows: Map<string, WindowState>;
  activeWindowId: string | null;
  nextZIndex: number; // simple incrementing counter works fine
}

The trick with z-index management is to not overthink it. Every time a window gets focus, just increment a global counter and assign it. You'll never hit the integer limit in a browser session.

// Hook for window focus management
function useWindowFocus(windowId: string) {
  const { bringToFront, setActiveWindow } = useWindowManager();

  const handleFocus = useCallback(() => {
    bringToFront(windowId); // bumps z-index
    setActiveWindow(windowId); // updates taskbar highlighting
  }, [windowId]);

  return {
    onMouseDown: handleFocus, // catch clicks anywhere on the window
    onFocus: handleFocus,     // catch keyboard focus too
  };
}

The Hard Part: Drag and Resize

Every developer who builds one of these projects hits the same wall — making drag and resize feel smooth. The naive approach (updating state on every mousemove) will absolutely tank your performance.

Here's the pattern I've landed on after building a few draggable interfaces:

function useDraggable(windowId: string) {
  const dragRef = useRef<{ startX: number; startY: number } | null>(null);
  const elementRef = useRef<HTMLDivElement>(null);

  const handlePointerDown = useCallback((e: React.PointerEvent) => {
    dragRef.current = { startX: e.clientX, startY: e.clientY };
    // Use pointer capture instead of window-level listeners
    (e.target as HTMLElement).setPointerCapture(e.pointerId);
  }, []);

  const handlePointerMove = useCallback((e: React.PointerEvent) => {
    if (!dragRef.current || !elementRef.current) return;

    const dx = e.clientX - dragRef.current.startX;
    const dy = e.clientY - dragRef.current.startY;

    // Direct DOM manipulation during drag — update React state on drop
    elementRef.current.style.transform = `translate(${dx}px, ${dy}px)`;
  }, []);

  // Commit position to React state only on pointer up
  const handlePointerUp = useCallback(() => {
    // Now update the actual state once
    dragRef.current = null;
  }, []);

  return { elementRef, handlePointerDown, handlePointerMove, handlePointerUp };
}

The key: manipulate the DOM directly during the drag, then sync back to React state when the user releases. This avoids re-rendering the entire window tree on every mouse movement.

State Management Choices

For a project like React XP, your state management choice actually matters. You've got a deeply interconnected system — the taskbar watches all windows, the start menu triggers app launches, desktop icons need double-click handling, and everything needs to respond to focus changes.

I'd reach for Zustand here. Redux is overkill for a side project, and Context API will cause unnecessary re-renders across your window tree. Zustand gives you targeted subscriptions out of the box:

const useDesktopStore = create<DesktopState>((set, get) => ({
  windows: new Map(),

  openWindow: (app: AppDefinition) => set((state) => {
    const newWindow = createWindow(app, state.nextZIndex);
    const windows = new Map(state.windows);
    windows.set(newWindow.id, newWindow);
    return { windows, nextZIndex: state.nextZIndex + 1 };
  }),

  closeWindow: (id: string) => set((state) => {
    const windows = new Map(state.windows);
    windows.delete(id);
    return { windows };
  }),
}));

What You'll Actually Learn

Building an OS clone is one of the best intermediate-to-advanced React projects you can take on. Here's what it'll force you to get good at:

• Compound component patterns — windows, title bars, menus, and toolbars all need to coordinate
• Performance optimization — you'll hit real rendering bottlenecks fast
• Pointer event handling — way more nuanced than most devs realize
• CSS positioning — absolute, fixed, z-index stacking contexts... the fun stuff
• TypeScript discriminated unions — perfect for modeling window states

One thing these projects usually skip is authentication — there's no real login system since it's all client-side. But if you wanted to add user profiles or persist desktop state, tools like Authon, Clerk, and Auth0 can handle the auth layer so you can focus on the fun UI work.

Should You Build One?

Honestly? Yes, but with caveats. Don't try to recreate the entire OS on day one. Start with a single draggable, resizable window. Then add a taskbar. Then a start menu. Each piece teaches you something new.

The React XP project is a great reference to study, but the real value isn't in the finished product — it's in what you learn along the way. I've pulled techniques from OS clone projects into actual production apps more times than I'd care to admit.

Just maybe don't put it on your resume as "operating system development experience." I've seen that go badly in interviews.

Resources Worth Checking Out

• React docs on Pointer Events for drag implementation
• Zustand for state management
• CSS Stacking Context on MDN — you'll need this

If you end up building your own OS clone, I'd love to see it. These projects are a reminder that frontend development, when you strip away the business logic, is really just creative problem solving with a canvas that happens to be a browser.