grafana/grafana

Plugins runtime (frontend)

The frontend plugin loader is what turns a directory of plugin assets on disk into a usable React component or DataSource class at runtime.

Layout

public/app/features/plugins/
├── plugin_loader.ts            # Dynamic import + module evaluation
├── pluginPreloader.ts          # Pre-load auto-enabled apps
├── pluginCacheBuster.ts        # Bust cached plugin chunks on version change
├── importPanelPlugin.ts        # Memoized importer for panels
├── pluginSettings.ts           # Per-org plugin settings client
├── admin/                      # Plugin admin UI (catalog, install, update)
├── extensions/                 # Plugin extension points (added components/links)
├── sandbox/                    # iframe-based sandbox runtime
├── pluginConfigCtrlWrapper.tsx # Adapter for legacy ConfigCtrl plugins
└── (more)

Loading a plugin

graph LR
    Need[Need plugin foo] --> Loader[plugin_loader.ts]
    Loader --> Cache{In cache?}
    Cache -->|Yes| Return[Return cached export]
    Cache -->|No| Fetch[Dynamic import 'public/plugins/foo/module.js']
    Fetch --> Eval[Evaluate module]
    Eval --> Wrap[new DataSourcePlugin/PanelPlugin/AppPlugin(...)]
    Wrap --> Cache2[Cache by id]
    Cache2 --> Return

The module.js of a plugin returns an instance of GrafanaPlugin. Datasource plugins call .setQueryEditor, .setConfigEditor, etc.; panel plugins set .setPanelOptions(...) and .setData(...). The plugin host then registers the resulting builder with @grafana/data's PluginRegistry.

Caching and cache-busting

Plugin assets are served at /public/plugins/<id>/... with versioned chunk names. pluginCacheBuster.ts adds a query string to the URL based on the plugin's version so that browsers reliably re-fetch new versions.

Sandbox

The sandbox feature (public/app/features/plugins/sandbox/) runs untrusted plugin code inside an iframe with a restricted DOM API:

The plugin is hosted in a same-origin iframe with its own globalThis.
A whitelisted DOM bridge proxies reads/writes back to the host document for the plugin's mounted area.
Capabilities like eval, Function, network APIs, and arbitrary DOM access are removed.

Toggleable via the pluginsFrontendSandbox feature flag. When the flag is on, app and panel plugins from non-Grafana publishers run in the sandbox by default; an org admin can opt specific plugins in or out.

Extensions

Plugins can extend host UI through "extension points" — registered slots in the host where plugins can contribute components or links. The host calls usePluginExtensions(extensionPointId, context) and receives matching contributions.

Declared in plugin.json under extensions.addedComponents / extensions.addedLinks / extensions.exposedComponents. Implementation in public/app/features/plugins/extensions/.

Plugin admin

The plugin catalog UI lives under public/app/features/plugins/admin/:

Browse remote plugins from grafana.com.
Install / uninstall (talks to the server's pkg/services/pluginsintegration).
Configure (a wrapper around the plugin's ConfigPage).
Show signature, version, and update notices.

App plugins

App plugins can:

Add side-nav entries via plugin.json.
Register their own routes inside Grafana's router.
Bundle datasource and panel plugins.
Contribute extensions to other plugins or to Grafana's host extension points.

The auto-enabled apps list (preloaded at boot) is in pluginPreloader.ts.

Key source files

File	Purpose
`public/app/features/plugins/plugin_loader.ts`	Dynamic plugin loading
`public/app/features/plugins/importPanelPlugin.ts`	Memoized panel import
`public/app/features/plugins/sandbox/`	iframe sandbox
`public/app/features/plugins/extensions/`	Extension-point implementation
`public/app/features/plugins/admin/`	Plugin catalog UI