Where Are Jenkins UI Components Located? A Complete Source Code Guide

Jenkins UI components are distributed across three main layers: static web assets in war/src/main/webapp, Jelly view templates in core/src/main/resources, and Java helper classes in core/src/main/java/org/jenkins/ui.

The Jenkins open-source automation server (jenkinsci/jenkins) renders its web interface through a unique architecture combining server-side XML templating, static asset delivery, and dynamic Java-generated elements. Understanding where these Jenkins UI components reside in the source code is essential for developers customizing the interface or troubleshooting frontend issues.

Web Assets and Static Files

Static assets—including HTML, CSS, JavaScript, and images—are served from the war module. These files are delivered directly to browsers without server-side processing.

The primary location for these resources is:

war/src/main/webapp/

Key static files include:

• JavaScript: scripts/hudson-behavior.js and scripts/utilities.js handle core frontend interactions
• CSS: css/style.css provides the base styling
• Images and SVGs: Icons and graphical assets for the classic UI

When Jelly templates need to reference these assets, they use direct paths:

<j:include page="/scripts/hudson-behavior.js"/>
<link rel="stylesheet" href="${rootURL}/css/style.css"/>

Jelly View Templates

Jenkins uses the Jelly XML templating engine to render most server-side pages, including the dashboard, job views, and configuration dialogs. These templates live as resources in the core module.

The main layout templates are located at:

core/src/main/resources/lib/layout/

Important template files include:

• pageHeader.jelly – Renders the top navigation bar
• main-panel.jelly – Defines the primary content container

Individual page templates are scattered throughout core/src/main/resources/, such as core/src/main/resources/hudson/model/ItemGroupMixIn.jelly, which handles top-level item group views. These files embed dynamic data and compose the page structure around the static assets.

Java UI Helper Classes

Dynamic visual elements—icons, symbols, and weather indicators—are generated by Java classes in the core module. These helpers reside in:

core/src/main/java/org/jenkins/ui/

Key classes include:

• IconSet.java – Manages icon resolution and SVG generation via IconSet.iconByClassName("icon-job")
• SymbolRequest.java – Handles modern symbol-based UI elements using SymbolRequest.fromStaplerRequest(staplerRequest)

From within Jelly templates, you can invoke these Java methods to emit dynamic SVG content:

Icon icon = IconSet.iconByClassName("icon-job");
out.print(icon.getSvgTag());

For the newer symbol system introduced in recent Jenkins versions:

SymbolRequest req = SymbolRequest.fromStaplerRequest(staplerRequest);
out.print(req.getSymbol().getSvgTag());

Plugin UI Contributions

Plugins extend the Jenkins UI by adding their own Jelly templates, static assets, and Java helpers. Plugin UI resources follow the same structural patterns as the core but reside within individual plugin modules.

Plugin Jelly files typically live under:

plugin/src/main/resources/**/*.jelly

For example, the Git plugin stores its browser configuration views at plugins/git/src/main/resources/org/jenkinsci/plugins/git/browser/JGitBrowser.jelly. The core UI loads these contributions through extension points, allowing plugins to inject new pages, side panels, and configuration sections into the main interface.

Summary

• Static assets (CSS, JS, images) are located in war/src/main/webapp/ and served directly to browsers
• Jelly templates for page rendering reside in core/src/main/resources/lib/layout/ and throughout the core resources directory
• Java UI classes for dynamic elements like icons and symbols are found in core/src/main/java/org/jenkins/ui/
• Plugins contribute their own UI components through analogous paths in their respective module directories, such as plugin/src/main/resources/

Frequently Asked Questions

Where are Jenkins JavaScript files stored in the source code?

JavaScript files are stored in the war module under war/src/main/webapp/scripts/, including core files like hudson-behavior.js and utilities.js. These static assets are served directly without processing through the Jelly templating engine.

How does Jenkins render HTML pages from the source code?

Jenkins uses the Jelly XML templating engine to render HTML. Templates are stored as .jelly files in core/src/main/resources/, particularly under lib/layout/ for shared page components. These templates can include static assets and invoke Java methods to embed dynamic content.

What is the purpose of the core/src/main/java/org/jenkins/ui/ directory?

This directory contains Java classes that generate dynamic UI elements such as icons, status symbols, and SVG graphics. Classes like IconSet.java and SymbolRequest.java provide methods that Jelly templates and REST endpoints call to render visual components programmatically.

Can plugins add their own UI components to Jenkins?

Yes, plugins contribute UI components by placing Jelly templates in src/main/resources/ within their own module directories, following the same structure as the core. These resources are loaded through Jenkins's extension points, allowing plugins to add new pages, configuration panels, and dashboard widgets.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}