Codex

Codex is the frontend development toolkit used for implementing the Wikimedia Design Style Guide in code. As a software package, Codex includes UI components built in JavaScript (Vue.js), design tokens to store data for design values, and user-facing documentation. Codex components include wide-ranging support for internationalization, global usage and web accessibility by default.

Version used in MediaWiki
MediaWiki currently uses version 0.2.1 of Codex. Refer to the documentation for this version for an accurate reference of what components and features are available for use in MediaWiki. The main Codex documentation site tracks the development branch, and some things documented there may not have been released yet.

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.

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):

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: