grafana/grafana

Frontend

The Grafana frontend is a TypeScript + React single-page application bundled with Webpack. The app entry is public/app/index.ts, the React tree starts at public/app/AppWrapper.tsx, and most code lives under public/app/features/ split by domain.

Top-level layout

public/app/
├── index.ts                # Bootstraps runtime, store, then mounts AppWrapper
├── app.ts                  # GrafanaApp class (the bootstrapper)
├── AppWrapper.tsx          # Root React component (Provider + Router)
├── routes/                 # Route definitions
├── core/                   # Shared services, components, utilities
├── features/               # Domain features (~50 folders)
├── plugins/                # Built-in datasource and panel plugins
├── api/                    # Hand-rolled HTTP clients (most are now in features/)
├── store/                  # Redux store config
├── types/                  # Shared TS types
└── extensions/             # Enterprise-only stub directory

Sub-pages

Bootstrap and runtime — index.ts, AppWrapper, runtime services, theme.
State management — Redux Toolkit + RTK Query patterns.
Routing — public/app/routes/ and feature route declarations.
Dashboards — dashboard/ + dashboard-scene/ (the legacy and new runtimes).
Explore — ad-hoc query view.
Alerting UI — features/alerting/unified/.
Datasources UI — datasource registry and per-datasource UIs.
Plugins runtime — frontend plugin loader and sandbox.
Core services — public/app/core/.

Major feature areas (`public/app/features/`)

The features tree maps almost 1:1 to user-facing areas in the UI:

Folder	Role
`dashboard/`	Legacy dashboard rendering and editing
`dashboard-scene/`	New Scenes-based dashboard runtime
`panel/`	Panel-related shared logic (PanelChrome, PanelEditor)
`explore/`	Explore (ad-hoc queries)
`alerting/`	Alerting UI (mostly under `alerting/unified/`)
`datasources/`	Datasource list, settings, edit
`connections/`	"Connections" UX (datasources + correlations + private preview integrations)
`plugins/`	Plugin admin UI + frontend plugin loader
`serviceaccounts/`, `teams/`, `users/`, `org/`, `profile/`	Identity & tenancy admin
`auth-config/`	SSO settings UI
`provisioning/`	Provisioning UI (`apps/provisioning/` backend)
`manage-dashboards/`, `browse-dashboards/`, `folders/`	Dashboard browsing & management
`dashboard-scene/`, `library-panels/`	Library panel management
`migrate-to-cloud/`, `cloudmigration/`	Cloud migration wizard
`expressions/`	Server-side expression UI
`transformers/`	Data transformations
`templating/`, `variables/`	Template variables
`commandPalette/`	Cmd-K command palette
`inspector/`	Panel inspect drawer
`scopes/`, `trails/`	Drilldown / Metrics Drilldown
`live/`	Live channels UX
`geo/`, `canvas/`, `dimensions/`	Geomap + canvas editor + shared dimension helpers
`support-bundles/`	Support bundle UI
`notifications/`, `invites/`	Onboarding & notifications
`search/`	Dashboard / global search
`runtime/`	Runtime config exposure
`sandbox/`	Plugin sandbox iframe

Each feature typically has state/ (slice + RTK Query *Api), components/, pages/, types.ts, and utils.ts. Tests are co-located.

Runtime services

A few global pieces of state are exposed via @grafana/runtime:

config — feature toggles, theme, user, build info, datasource list. Populated at bootstrap.
locationService — push/replace navigation, query-string helpers.
getBackendSrv() — typed HTTP client.
getDataSourceSrv() — datasource lookup.
getAppEvents() — global event bus (legacy; prefer react-router and useEvents hooks).
usePluginExtensions, usePluginLinks — plugin extension points.

These are the primary integration surface for external plugins and have backwards-compat guarantees.

Bundling

Webpack configs live in scripts/webpack/:

webpack.dev.ts — yarn start (watch + dev server proxy).
webpack.prod.ts — yarn build (production minification).
webpack.stats.ts — bundle analysis.

There's also a separate React 19 dev/prod path used by some integrations (yarn build:react19).

Frontend plugin runtime

Built-in plugins ship inside the bundle. External plugins are loaded at runtime by public/app/features/plugins/plugin_loader.ts which dynamically imports the plugin's module.js. Untrusted plugins can be sandboxed inside an iframe — see Plugins runtime for the details.