Resize MCP Server

Polyfills the ResizeObserver API and supports box size options from the latest spec

Local serverstdio

What is the Resize MCP server?

Connect Resize to Claude, Cursor or any other MCP client and it stops being a tab you switch to. Polyfills the ResizeObserver API and supports box size options from the latest spec. The resize mcp server is what makes that connection.

What the server does

A minimal library which polyfills the ResizeObserver API and is entirely based on the latest Specification.

  • Inbuilt resize loop protection
  • Supports pseudo classes :hover, :active and :focus
  • Supports transitions and animations, including infinite and long-running
  • Detects changes which occur during animation frame
  • Includes support for latest draft spec - observing different box sizes
  • Polls only when required, then shuts down automatically, reducing CPU usage

Available tools

The toolset is worth reading before you wire it up, because it tells you what the integration is really for:

  • Desktop — The Desktop tool exposed by this server
  • Mobile — **IE10 requires additional polyfills for WeakMap, MutationObserver and devicePixelRatio. IE9 requires IE10 polyfills plus requestAnimationFrame

Installation

Installation goes through your MCP client rather than a global install: point it at @juggle/resize-observer on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.

Where it fits

This sits in the developer tooling group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Resize's toolset — Desktop, Mobile — is a fair guide to whether it matches your workflow. It is maintained by trem; worth a glance at recent repository activity before you build anything load-bearing on it.

This entry was verified against Resize's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.

Worth knowing first

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • Keep per-call confirmation enabled while you learn its behaviour; it is the cheapest safeguard you have.

Available tools

ToolWhat it does
DesktopThe Desktop tool exposed by this server.
Mobile\*\*IE10 requires additional polyfills for WeakMap, MutationObserver and devicePixelRatio. IE9 requires IE10 polyfills plus requestAnimationFrame. For more information, [see issue here](https://github.com/juggle/resize-o

How to install the Resize MCP server

{
  "mcpServers": {
    "observer": {
      "command": "npx",
      "args": ["-y", "@juggle/resize-observer"]
    }
  }
}

Add to claude_desktop_config.json, then restart Claude Desktop.

Example prompts to try

  • Use Resize to Desktop.
  • Use Resize to Mobile.

Frequently asked questions

It connects Resize to MCP-compatible AI assistants such as Claude and Cursor, exposing 2 tools (Desktop, Mobile) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Resize directly.