---
title: Devtool
description: Inspect and edit catalogs from a floating development interface.
order: 30
toc:
  - id: mount-the-devtool
    title: Mount the Devtool
  - id: theme-and-language
    title: Theme and language
  - id: custom-surfaces
    title: Custom surfaces
---

## Mount the Devtool {#mount-the-devtool}

Mount the Devtool inside `I18nProvider` and only during development:

```tsx
import { I18nDevtool } from "@workspace/i18n/devtool"

{
  import.meta.env.DEV && (
    <I18nDevtool locale="zh-Hans" dark={'[data-theme="dark"]'} />
  )
}
```

The component renders through a portal, so application overflow and stacking contexts do not clip it.

## Theme and language {#theme-and-language}

The `dark` option accepts a class name or a CSS selector. Control-panel language is independent from the translated application locale, supports `en-US` and `zh-Hans`, and falls back from `navigator.languages` to `en-US`.

## Custom surfaces {#custom-surfaces}

Use `MessagePanel`, `MessageRepositoryProvider`, and `createHttpMessageRepository` when the application needs a custom development interface instead of the default floating panel.