Codex

Codex is a design system for Wikimedia. To learn more, visit the official documentation site. This page covers the Codex software package.

The Codex software package includes design tokens to store data for design values, user interface components built in JavaScript (Vue.js), and a suite of icons. These tools include wide-ranging support for internationalization, global usage and web accessibility by default.

This page documents how to use Codex in MediaWiki. You may also want to read the more general documentation about how to use Vue.js in MediaWiki.

Version
MediaWiki currently uses version 0.5.0 of Codex. A new version is released every 2 weeks (see the Release Timeline for more information about versions and the release cadence).

Packages
The following Codex packages are available in MediaWiki:


 * : This package contains design tokens in various formats, including Less variables and JSON.
 * : This package contains UI components built with Vue 3.
 * : This package contains a set of icons.

Read below to learn how to use these packages in MediaWiki.

Getting started
See the official docs to learn about Codex design tokens and to see demos of available tokens (for example, see the demo page for color tokens).

Using Codex design tokens in MediaWiki and extensions
You can import the design tokens directly into your Less file or  block via a relative import path. Please note that these instructions will change: the Design Systems Team is currently working to improve process of importing the tokens so you will not need to use a relative path in the future. See T325237 for more information.

The design tokens are currently available only as Less variables. The file is located in. The example below demonstrates importing the Less variables version of the tokens into a Vue component inside a MediaWiki extension.

Getting started
See the official docs to learn more about the available Vue 3 components, including demos and usage information (for example, see the demo page for the Button component). Note that code samples from these demos will not work in MediaWiki—see below for more information.

Using Codex components in MediaWiki and extensions
Codex is included in MediaWiki, and is made available through the  ResourceLoader module. To use Codex components in your code, add  to your module's dependencies, then import the components you need as follows: You can then pass these components to the   option of your component, and use them in your component's template. Remember that kebab-case is required in templates, so you have to use  for CdxButton,   for CdxTextInput, etc.

Example
Example of a simple block form using the CdxButton and CdxTextInput components from Codex: Example of the module definition (in  format):

Differences between Codex documentation and MediaWiki usage
The Codex documentation includes code examples that show how to use each component. These examples will not work in MediaWiki, because they use /, TypeScript types, and self-closing tags. The table below summarizes the differences between what is shown in the Codex documentation, and what must be used instead in MediaWiki. Also read the sections below that go into more detail about how to use Codex components and Codex icons in MediaWiki.

Getting started
Visit the official docs site for information about the icon system and a list of all icons.

Using Codex icons in MediaWiki and extensions
For performance reasons, there is no  ResourceLoader module containing all the icons from Codex. Such a module would be large and wasteful, since most users of Codex only need a handful of the 200+ icons. Instead, ResourceLoader provides a way for modules to embed the icons they need, by defining a package file as follows: These icons can then be imported in  files as follows: For more information about how to use these icons once you've imported them, see the Codex documentation on icons.

Example
Example of the same block form as above, but with an icon added:

Example of the ResourceLoader module definition: In this example,  is an init file that mounts the component with , as documented here.