Install this package alongside atom.io, @atom.io/react, and React/React DOM 18 or 19. Motion is included as a regular dependency. Import the stylesheet from @atom.io/react-devtools/css. Replace imports from atom.io/react-devtools with @atom.io/react-devtools; the exports and behavior are unchanged.

Install

pnpm add atom.io @atom.io/react @atom.io/react-devtools react react-dom

Setup

import "@atom.io/react-devtools/css"

import { AtomIODevtools } from "@atom.io/react-devtools"
import type { JSX } from "react"

export function App(): JSX.Element {
	return (
		<>
			<main>{/* your app */}</main>
			<AtomIODevtools />
		</>
	)
}

Bundle size

Package export sizes include complete runtime export surfaces.

Sizes are exact minified and level-9 gzip JavaScript byte counts. Declarations, source maps, CSS, and other assets are excluded. Peer dependencies stay external, and shared modules are counted once per bundle.

| Import | Minified JS | Gzip JS | | ------------------------- | ----------: | -------: | | @atom.io/react-devtools | 160,008 B | 53,072 B |

Report maintained with tonnage.

The report measures JavaScript only; the required stylesheet is excluded.