Plugins

    React Trace's functionality is built around a plugin system.

    Each plugin can contribute UI to the toolbar, to the action panel, and to the settings menu.

    Official plugins

    All four are included in @react-trace/kit by default.

    PluginPackageWhat it adds
    Preview@react-trace/plugin-previewMonaco-based source preview, inline editing, folder access, and preview settings.
    Comments@react-trace/plugin-commentsToolbar comments UI, inline add-comment flow, clipboard export, and Send to OpenCode.
    Copy to Clipboard@react-trace/plugin-copy-to-clipboardCopies the selected source as a project-relative path:lineNumber reference.
    Open Editor@react-trace/plugin-open-editorOpens the selected source in a local editor (VS Code, Cursor, Windsurf, WebStorm, IntelliJ).

    Using plugins with @react-trace/core

    Pass plugin instances to the plugins prop:

    import { Trace } from '@react-trace/core'
import { PreviewPlugin } from '@react-trace/plugin-preview'
import { CopyToClipboardPlugin } from '@react-trace/plugin-copy-to-clipboard'
import { OpenEditorPlugin } from '@react-trace/plugin-open-editor'
import { CommentsPlugin } from '@react-trace/plugin-comments'

import App from './App'

export function AppWithTrace() {
  return (
    <>
      <App />
      <Trace
        root={import.meta.env.VITE_ROOT}
        plugins={[
          PreviewPlugin(),
          CopyToClipboardPlugin(),
          OpenEditorPlugin(),
          CommentsPlugin(),
        ]}
      />
    </>
  )
}

    Plugin order determines the display order in the toolbar, action panel, and settings menu.

    Building your own

    See Creating Plugins for the full plugin API, available hooks, and the scaffolding CLI.