the Chromium logo

The Chromium Projects

Creating Chrome WebUI Interfaces

General guidelines

When creating or modifying WebUI resources, follow the Web Development Style Guide. Note that most WebUI code is using TypeScript, and any new additions must use TypeScript.

A general explanation of how WebUI works, including the interaction between C++ and TypeScript code, can be found in the WebUI Explainer.

Shared, cross-platform resources can be found in ui/webui/resources.

A detailed example of how to create a WebUI in can be found at Creating WebUI interfaces in chrome.

If you need additional information on how to set up the BUILD.gn file to build your WebUI, there is detailed information and additional examples for BUILD files specifically at WebUI Build Configurations.

If you need additional information on how to share TS/HTML/CSS code between multiple (2+) WebUI surfaces, see Sharing Code in WebUI.

Debug vs User-Facing UIs

Before adding a new WebUI, the first question to consider is whether you are creating a user-facing or a debug UI. Some differences:

Creating a new WebUI

There are a few questions to answer before creating any new WebUI:

User facing UIs are expected to go through a full feature launch process, since by definition you're adding a significant new user-visible feature to Chromium. For debug UIs, prepare a design doc addressing all the questions above as well as the ones below, and consider also linking a proof of concept/ draft CL and/or basic mock.

Additional Questions for Debug UIs

When adding a debug UI, answer the following questions in addition to the questions listed above: