CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Codex - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"557a0214-e568-46a9-a8b6-942d8284fece","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Codex","wgTitle":"Codex","wgCurRevisionId":6874919,"wgRevisionId":6874919,"wgArticleId":1504770,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["WMF Projects 2021q3","WMF Projects 2021q4","WMF Projects 2022q1","WMF Projects 2022q2","WMF Projects 2022q3","WMF Projects 2022q4","WMF Projects 2023q1","WMF Projects 2023q2","WMF Projects 2023q3","WMF Projects 2023q4","WMF Projects 2024q1","WMF Projects 2024q2","WMF Projects 2024q3","WMF Projects 2024q4","WMF Projects"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Codex","wgRelevantArticleId":1504770, "wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgInternalRedirectTargetUrl":"/wiki/Codex","wgTranslatePageTranslation":"source","wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"visual","wgULSPosition":"personal","wgULSisCompactLinksEnabled":true, "wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.translate.tag.languages":"ready","ext.pygments":"ready","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=[ "mediawiki.action.view.redirect","ext.pygments.view","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.translate.pagetranslation.uls","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.discussionTools.init.styles%7Cext.pygments%2Ctranslate%2CwikimediaBadges%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.5"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="Codex - MediaWiki"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/Codex"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Codex&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/Codex"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Codex rootpage-Codex skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download"><span>Get MediaWiki</span></a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions"><span>Get extensions</span></a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/"><span>Tech blog</span></a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute"><span>Contribute</span></a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out"><span>User help</span></a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ"><span>FAQ</span></a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents"><span>Technical manual</span></a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk"><span>Support desk</span></a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication"><span>Communication</span></a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/"><span>Developer portal</span></a></li><li id="n-svn-statistics" class="mw-list-item"><a href="/wiki/Development_statistics"><span>Code statistics</span></a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translate content</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump"><span>Village pump</span></a></li><li id="n-Sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox"><span>Sandbox</span></a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=mediawikiwiki&page=Codex" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search MediaWiki" aria-label="Search MediaWiki" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Codex" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Codex" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Codex" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Codex" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Basic_usage" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Basic_usage"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Basic usage</span> </div> </a> <button aria-controls="toc-Basic_usage-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Basic usage subsection</span> </button> <ul id="toc-Basic_usage-sublist" class="vector-toc-list"> <li id="toc-CodexExample_MediaWiki_extension" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#CodexExample_MediaWiki_extension"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>CodexExample MediaWiki extension</span> </div> </a> <ul id="toc-CodexExample_MediaWiki_extension-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Usage_with_JavaScript" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Usage_with_JavaScript"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span> <span>Usage with JavaScript</span> </div> </a> <ul id="toc-Usage_with_JavaScript-sublist" class="vector-toc-list"> <li id="toc-Loading_the_entire_library_(recommended_for_use_in_userscripts)" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Loading_the_entire_library_(recommended_for_use_in_userscripts)"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2.1</span> <span>Loading the entire library (recommended for use in userscripts)</span> </div> </a> <ul id="toc-Loading_the_entire_library_(recommended_for_use_in_userscripts)-sublist" class="vector-toc-list"> <li id="toc-Loading_a_subset_of_Codex_components_(recommended_for_skins_and_extensions)" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#Loading_a_subset_of_Codex_components_(recommended_for_skins_and_extensions)"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2.1.1</span> <span>Loading a subset of Codex components (recommended for skins and extensions)</span> </div> </a> <ul id="toc-Loading_a_subset_of_Codex_components_(recommended_for_skins_and_extensions)-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Usage_without_JavaScript_(CSS-only_Codex_components)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Usage_without_JavaScript_(CSS-only_Codex_components)"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3</span> <span>Usage without JavaScript (CSS-only Codex components)</span> </div> </a> <ul id="toc-Usage_without_JavaScript_(CSS-only_Codex_components)-sublist" class="vector-toc-list"> <li id="toc-Loading_component_styles" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Loading_component_styles"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3.1</span> <span>Loading component styles</span> </div> </a> <ul id="toc-Loading_component_styles-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Providing_component_markup" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Providing_component_markup"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3.2</span> <span>Providing component markup</span> </div> </a> <ul id="toc-Providing_component_markup-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Using_Codex_in_PHP" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Using_Codex_in_PHP"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.4</span> <span>Using Codex in PHP</span> </div> </a> <ul id="toc-Using_Codex_in_PHP-sublist" class="vector-toc-list"> <li id="toc-Installation" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Installation"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.4.1</span> <span>Installation</span> </div> </a> <ul id="toc-Installation-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Example_Usage" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Example_Usage"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.4.2</span> <span>Example Usage</span> </div> </a> <ul id="toc-Example_Usage-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Usage_in_MediaWiki" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Usage_in_MediaWiki"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.4.3</span> <span>Usage in MediaWiki</span> </div> </a> <ul id="toc-Usage_in_MediaWiki-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Advanced_usage" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Advanced_usage"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Advanced usage</span> </div> </a> <button aria-controls="toc-Advanced_usage-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Advanced usage subsection</span> </button> <ul id="toc-Advanced_usage-sublist" class="vector-toc-list"> <li id="toc-Using_a_limited_subset_of_components" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Using_a_limited_subset_of_components"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>Using a limited subset of components</span> </div> </a> <ul id="toc-Using_a_limited_subset_of_components-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Using_Codex_icons" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Using_Codex_icons"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>Using Codex icons</span> </div> </a> <ul id="toc-Using_Codex_icons-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Using_design_tokens_directly" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Using_design_tokens_directly"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span> <span>Using design tokens directly</span> </div> </a> <ul id="toc-Using_design_tokens_directly-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Codex_LESS_mixins" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Codex_LESS_mixins"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.4</span> <span>Codex LESS mixins</span> </div> </a> <ul id="toc-Codex_LESS_mixins-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Using_Codex_in_userscripts" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Using_Codex_in_userscripts"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.5</span> <span>Using Codex in userscripts</span> </div> </a> <ul id="toc-Using_Codex_in_userscripts-sublist" class="vector-toc-list"> <li id="toc-Loading_Vue/Codex" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Loading_Vue/Codex"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.5.1</span> <span>Loading Vue/Codex</span> </div> </a> <ul id="toc-Loading_Vue/Codex-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Use_Vue.createMwApp" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Use_Vue.createMwApp"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.5.2</span> <span>Use Vue.createMwApp</span> </div> </a> <ul id="toc-Use_Vue.createMwApp-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Real_examples" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Real_examples"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.5.3</span> <span>Real examples</span> </div> </a> <ul id="toc-Real_examples-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Release_cycle" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Release_cycle"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Release cycle</span> </div> </a> <ul id="toc-Release_cycle-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Using_a_custom_version_of_Codex_for_development_or_testing" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Using_a_custom_version_of_Codex_for_development_or_testing"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Using a custom version of Codex for development or testing</span> </div> </a> <ul id="toc-Using_a_custom_version_of_Codex_for_development_or_testing-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Codex</span></h1> <div class="mw-indicators"> <div id="mw-indicator-phabricator-project" class="mw-indicator"><div class="mw-parser-output"><div class="mw-parser-output"><style data-mw-deduplicate="TemplateStyles:r6605561">.mw-parser-output .tpl-badge{background-color:var(--background-color-progressive-subtle,#eaf3ff);color:var(--color-base,#202122);border-radius:10px;display:inline-block;font-size:90%;padding:5px 8px}</style><div class="tpl-badge"><a href="/wiki/Special:MyLanguage/Phabricator" title="Special:MyLanguage/Phabricator">Issue tracker</a>: <a href="https://phabricator.wikimedia.org/tag/codex/" class="extiw" title="phab:tag/codex/"><b>#Codex</b></a></div></div></div></div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Codex" title="View the content page [c]" accesskey="c"><span>Page</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Codex" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Codex"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Codex&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Codex&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Codex"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Codex&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Codex&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Codex" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Codex" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Codex&oldid=6874919" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Codex&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Codex&id=6874919&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FCodex"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FCodex"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=Codex"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Codex&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Codex&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-pt-translate-header noprint nomobile" dir="ltr" lang="en"><a href="/w/index.php?title=Special:Translate&group=page-Codex&action=page&filter=&action_source=translate_page" title="Special:Translate">Translate this page</a></div><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Languages:</div><ul class="mw-pt-languages-list"><li><a href="/wiki/Codex/id" class="mw-pt-progress mw-pt-progress--med" title="Kodeks (19% translated)" lang="id" dir="ltr">Bahasa Indonesia</a></li> <li><a href="/wiki/Codex/de" class="mw-pt-progress mw-pt-progress--low" title="Codex (6% translated)" lang="de" dir="ltr">Deutsch</a></li> <li><span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en" dir="ltr">English</span></li> <li><a href="/wiki/Codex/dtp" class="mw-pt-progress mw-pt-progress--low" title="Codex/dtp (0% translated)" lang="dtp" dir="ltr">Kadazandusun</a></li> <li><a href="/wiki/Codex/fr" class="mw-pt-progress mw-pt-progress--complete" title="Codex (100% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/wiki/Codex/it" class="mw-pt-progress mw-pt-progress--med" title="Codex (19% translated)" lang="it" dir="ltr">italiano</a></li> <li><a href="/wiki/Codex/pl" class="mw-pt-progress mw-pt-progress--med" title="Codex/pl (31% translated)" lang="pl" dir="ltr">polski</a></li> <li><a href="/wiki/Codex/ru" class="mw-pt-progress mw-pt-progress--low" title="Codex (12% translated)" lang="ru" dir="ltr">русский</a></li> <li><a href="/wiki/Codex/kk" class="mw-pt-progress mw-pt-progress--low" title="Codex/kk (0% translated)" lang="kk" dir="ltr">қазақша</a></li> <li><a href="/wiki/Codex/zh" class="mw-pt-progress mw-pt-progress--med" title="Codex (44% translated)" lang="zh" dir="ltr">中文</a></li> <li><a href="/wiki/Codex/ja" class="mw-pt-progress mw-pt-progress--high" title="Codex (75% translated)" lang="ja" dir="ltr">日本語</a></li></ul></div> <p><br/> </p> <style data-mw-deduplicate="TemplateStyles:r6870138">.mw-parser-output table.ambox{margin:0 10%;width:unset;border:1px solid var(--border-color-base,#a2a9b1);border-left:10px solid var(--border-color-progressive,#36c);background-color:var(--background-color-neutral-subtle,#f8f9fa);box-sizing:border-box}.mw-parser-output table.ambox+table.ambox,.mw-parser-output table.ambox+link+table.ambox,.mw-parser-output table.ambox+style+table.ambox{margin-top:-1px}.mw-parser-output .ambox td.mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox th.mbox-text,.mw-parser-output .ambox td.mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox td.mbox-image{padding:2px 0 2px 0.5em}.mw-parser-output .ambox td.mbox-imageright{padding:2px 0.5em 2px 0}.mw-parser-output table.ambox-notice{border-left-color:var(--border-color-progressive,#36c)}.mw-parser-output table.ambox-speedy{background-color:var(--background-color-error-subtle,#fee7e6)}.mw-parser-output table.ambox-delete,.mw-parser-output table.ambox-speedy{border-left-color:var(--background-color-error--active,#b32424)}.mw-parser-output table.ambox-content{border-left-color:#f28500}.mw-parser-output table.ambox-style{border-left-color:#fc3}.mw-parser-output table.ambox-move{border-left-color:#9932cc}.mw-parser-output table.ambox-protection{border-left-color:var(--border-color-base,#a2a9b1)}html body.mediawiki .mw-parser-output .ambox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;box-sizing:border-box;width:238px;font-size:88%;line-height:1.25em}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;box-sizing:border-box;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}</style><table class="ambox ambox-notice plainlinks metadata" role="presentation"><tbody><tr><td class="mbox-image"><div style="width:52px"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/ec/OOjs_UI_icon_information-progressive.svg/40px-OOjs_UI_icon_information-progressive.svg.png" decoding="async" width="40" height="40" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/ec/OOjs_UI_icon_information-progressive.svg/60px-OOjs_UI_icon_information-progressive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/ec/OOjs_UI_icon_information-progressive.svg/80px-OOjs_UI_icon_information-progressive.svg.png 2x" data-file-width="20" data-file-height="20"/></span></span></div></td><td class="mbox-text"><div class="mbox-text-span">Visit <a href="https://doc.wikimedia.org/codex/latest/" class="extiw" title="wmdoc:codex/latest/">the official documentation site</a> for comprehensive details on Codex, including how to use it outside of MediaWiki.</div></td></tr></tbody></table> <p><br/> <style data-mw-deduplicate="TemplateStyles:r6651102">.mw-parser-output .infobox{box-sizing:border-box;border:2px solid var(--border-color-base,#a2a9b1);width:280px;border-collapse:collapse;border-spacing:0;background-color:white;color:#333;clear:right;float:right;margin:0 0 0.5em 0.5em}.mw-parser-output .infobox-rtl{clear:left;float:left;margin:0 0.5em 0.5em 0}.mw-parser-output .infobox th{text-align:left;padding:0.2em 0.5em;vertical-align:top}.mw-parser-output .infobox-rtl th{text-align:right}@media(max-width:719px){body.mediawiki .mw-parser-output .infobox{float:none;clear:both;width:100%;margin:0 0 .5em 0}}.mw-parser-output .infobox td{border:none;padding:0.2em 0.5em;vertical-align:top}.mw-parser-output .infobox-header{background-color:#a2a9b1;color:#FFF;text-align:left}.mw-parser-output .infobox-header a{color:#FFF}.mw-parser-output .infobox-header td,.mw-parser-output .infobox-header th{padding:0.5em 0.5em}.mw-parser-output .infobox-header img{padding:0 0.2em 0 0.5em}@media screen{html.skin-theme-clientpref-night .mw-parser-output .infobox{background-color:inherit;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .infobox{background-color:inherit;color:inherit}}</style><style data-mw-deduplicate="TemplateStyles:r6651116">.mw-parser-output .wmf-engineering-project-box{border:1px solid #eaecf0;padding:.2em;width:300px;background:#f8f9fa;color:#222}.mw-parser-output .wmf-engineering-project-box-catlink{font-size:smaller;margin:.2em;text-align:center}.mw-parser-output .wmf-engineering-project-box-title{font-size:1.2em;margin:.2em;background:#14866d;color:#fff;padding:.5em;text-align:center;font-weight:bold}.mw-parser-output .wmf-engineering-project-box-description{margin:.2em;padding:.2em;font-style:italic}.mw-parser-output .wmf-engineering-project-box-data{font-size:.9em;margin:.2em 0;width:100%}.mw-parser-output .wmf-engineering-project-box-data th{width:25%;font-weight:normal}.mw-parser-output .wmf-engineering-project-box-previous,.mw-parser-output .wmf-engineering-project-box-next{font-size:smaller;margin:.2em}.mw-parser-output .infobox-ltr .wmf-engineering-project-box-previous,.mw-parser-output .infobox-rtl .wmf-engineering-project-box-next{float:left}.mw-parser-output .infobox-ltr .wmf-engineering-project-box-next,.mw-parser-output .infobox-rtl .wmf-engineering-project-box-previous{float:right}@media screen{html.skin-theme-clientpref-night .mw-parser-output .wmf-engineering-project-box{background:transparent;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .wmf-engineering-project-box{background:transparent;color:inherit}}</style> </p> <table class="infobox infobox-ltr wmf-engineering-project-box plainlinks"><tbody><tr><td> <div class="nomobile wmf-engineering-project-box-catlink"><a href="/wiki/Special:MyLanguage/Category:WMF_Projects" title="Special:MyLanguage/Category:WMF Projects">Wikimedia Foundation projects</a><span style="display:none"><a href="/wiki/Category:WMF_Projects" title="Category:WMF Projects"> </a></span></div> <div class="wmf-engineering-project-box-title">Codex</div> <div class="wmf-engineering-project-box-description">Design system for Wikimedia featuring guidelines and a set of tools (design tokens, components, and icons) for creating user-interfaces</div> <table class="wmf-engineering-project-box-data"> <tbody><tr> <th scope="row">Group:</th> <td><a href="/wiki/Design_System_Team" title="Design System Team">Design System Team</a></td> </tr> <tr> <th scope="row">Start:</th> <td>2021-08</td> </tr> <tr> <th scope="row">Team members:</th> <td><a href="/wiki/User:ATomasevich_(WMF)" title="User:ATomasevich (WMF)">Anne Tomasevich</a>, <a href="/wiki/User:BMartinezCalvo_(WMF)" title="User:BMartinezCalvo (WMF)">Bárbara Martínez Calvo</a>, <a href="/wiki/User:CCiufo-WMF" title="User:CCiufo-WMF">Chris Ciufo</a>, <a href="/wiki/User:EGardner_(WMF)" title="User:EGardner (WMF)">Eric Gardner</a>, <a href="/wiki/User:LWatson-WMF" title="User:LWatson-WMF">Lauralyn Watson</a>, <a href="/wiki/User:NBaca-WMF" title="User:NBaca-WMF">Nat Baca</a>, <a href="/wiki/User:Roan_Kattouw_(WMF)" title="User:Roan Kattouw (WMF)">Roan Kattouw</a>, <a href="/wiki/User:Sarai_S%C3%A1nchez_(WMDE)" title="User:Sarai Sánchez (WMDE)">Sarai Sánchez</a>, <a href="/wiki/User:Volker_E._(WMF)" title="User:Volker E. (WMF)">Volker E.</a></td> </tr> <tr> <th scope="row">Backlog:</th> <td><a href="https://phabricator.wikimedia.org/tag/codex/" class="extiw" title="phab:tag/codex/">#Codex</a></td> </tr> <tr class="mw-empty-elt"> </tr></tbody></table></td></tr></tbody></table> <p><b>Codex</b> is the design system for Wikimedia. As a system, Codex is made up of several distinct elements which may be used separately or together. These elements include: design tokens, icons, and UI components. Codex is bundled within MediaWiki, and is also available as a series of NPM packages. </p><p>The current version of Codex is <b>1.17.0</b> </p><p>Codex's source code is hosted on <a class="external text" href="https://gerrit.wikimedia.org/g/design/codex">Gerrit</a>, and its development is tracked in <a class="external text" href="https://phabricator.wikimedia.org/project/profile/5587/">Phabricator</a>. <a href="https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/%2B/refs/heads/main/CHANGELOG.md" class="extiw" title="gerrit:plugins/gitiles/design/codex/+/refs/heads/main/CHANGELOG.md">Read the full changelog</a>. </p> <meta property="mw:PageProp/toc"/> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Basic_usage" data-mw-thread-id="h-Basic_usage"><span data-mw-comment-start="" id="h-Basic_usage"></span>Basic usage<span data-mw-comment-end="h-Basic_usage"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=1" title="Edit section: Basic usage"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Codex provides a variety of <b>components</b> which skin, extension, and userscript authors can embed in their own user interfaces: buttons, checkboxes, toggle switches, dialogs, etc. Many of these components can be extensively customized. </p><p>A full list of current Codex components (along with documentation and interactive demos) can be found <a href="https://doc.wikimedia.org/codex/latest/components/overview.html" class="extiw" title="wmdoc:codex/latest/components/overview.html">here</a>. </p> <div class="mw-heading mw-heading3"><h3 id="CodexExample_MediaWiki_extension" data-mw-thread-id="h-CodexExample_MediaWiki_extension-Basic_usage"><span data-mw-comment-start="" id="h-CodexExample_MediaWiki_extension-Basic_usage"></span>CodexExample MediaWiki extension<span data-mw-comment-end="h-CodexExample_MediaWiki_extension-Basic_usage"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=2" title="Edit section: CodexExample MediaWiki extension"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The Design System Team maintains the <a class="external text" href="https://gitlab.wikimedia.org/repos/design-systems/CodexExample/-/tree/main?ref_type=heads">CodexExample</a> MediaWiki extension for demonstration purposes. This extension can be installed (it sets up a dedicated special page called `Special:CodexExample` with live demos) or you can study its source code for inspiration. See the project README page for more information. </p> <div class="mw-heading mw-heading3"><h3 id="Usage_with_JavaScript" data-mw-thread-id="h-Usage_with_JavaScript-Basic_usage"><span data-mw-comment-start="" id="h-Usage_with_JavaScript-Basic_usage"></span>Usage with JavaScript<span data-mw-comment-end="h-Usage_with_JavaScript-Basic_usage"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=3" title="Edit section: Usage with JavaScript"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Codex components are built using the <a href="/wiki/Vue.js" title="Vue.js">Vue.js</a> JavaScript framework. If you are developing a Vue application in MediaWiki, then it's easy to load Codex components from <a href="/wiki/ResourceLoader" title="ResourceLoader">ResourceLoader</a> using <code>require()</code>. You can load all of Codex at once, or just a limited subset of components. </p> <div class="mw-heading mw-heading4"><h4 id="Loading_the_entire_library_(recommended_for_use_in_userscripts)" data-mw-thread-id="h-Loading_the_entire_library_(recommended_for_use_in_userscripts)-Usage_with_JavaScript"><span id="Loading_the_entire_library_.28recommended_for_use_in_userscripts.29"></span><span data-mw-comment-start="" id="h-Loading_the_entire_library_(recommended_for_use_in_userscripts)-Usage_with_JavaScript"></span>Loading the entire library (recommended for use in userscripts)<span data-mw-comment-end="h-Loading_the_entire_library_(recommended_for_use_in_userscripts)-Usage_with_JavaScript"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=4" title="Edit section: Loading the entire library (recommended for use in userscripts)"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">"ext.myExtension.foo"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"dependencies"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="s2">"@wikimedia/codex"</span><span class="w"> </span><span class="p">]</span> <span class="w"> </span><span class="nt">"packageFiles"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"init.js"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"MyComponent.vue"</span> <span class="w"> </span><span class="p">]</span> <span class="p">}</span> </pre></div> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cm"></span> <span class="p"><</span><span class="nt">template</span><span class="p">></span> <span class="p"><</span><span class="nt">cdx-button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">"doSomething"</span><span class="p">></span>Click me!<span class="p"></</span><span class="nt">cdx-button</span><span class="p">></span> <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">CdxButton</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="w"> </span><span class="s1">'@wikimedia/codex'</span><span class="w"> </span><span class="p">);</span> <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">exports</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">"MyComponent"</span><span class="p">,</span> <span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">CdxButton</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="nx">methods</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">doSomething</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">//...</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </pre></div> <div class="mw-heading mw-heading5"><h5 id="Loading_a_subset_of_Codex_components_(recommended_for_skins_and_extensions)" data-mw-thread-id="h-Loading_a_subset_of_Codex_components_(recommended_for_skins_and_extensions)-Loading_the_entire_library_(recommended_for_use_in_userscripts)"><span id="Loading_a_subset_of_Codex_components_.28recommended_for_skins_and_extensions.29"></span><span data-mw-comment-start="" id="h-Loading_a_subset_of_Codex_components_(recommended_for_skins_and_extensions)-Loading_the_entire_library_(recommended_for_use_in_userscripts)"></span>Loading a subset of Codex components (recommended for skins and extensions)<span data-mw-comment-end="h-Loading_a_subset_of_Codex_components_(recommended_for_skins_and_extensions)-Loading_the_entire_library_(recommended_for_use_in_userscripts)"></span></h5><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=5" title="Edit section: Loading a subset of Codex components (recommended for skins and extensions)"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>To only load a limited set of components, you can declare your dependencies in the following way below: </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">"ext.myExtension.foo"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"class"</span><span class="p">:</span><span class="w"> </span><span class="s2">"MediaWiki\\ResourceLoader\\CodexModule"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"packageFiles"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"init.js"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"MyComponent.vue"</span> <span class="w"> </span><span class="p">],</span> <span class="w"> </span><span class="nt">"codexComponents"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"CdxButton"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxCard"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxDialog"</span> <span class="w"> </span><span class="p">]</span> <span class="p">}</span> </pre></div> <p>This will generate a virtual file, <code>codex.js</code>, in your resources directory with the exports you need. You can then require the components you requested from that virtual file: </p> <div class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// In resources/ext.myExtension.foo/MyComponent.vue</span> <span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">CdxButton</span><span class="p">,</span><span class="w"> </span><span class="nx">CdxTextInput</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="w"> </span><span class="s1">'../codex.js'</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>See the <a href="https://gitlab.wikimedia.org/repos/design-systems/CodexExample" class="extiw" title="gitlab:repos/design-systems/CodexExample">CodexExample repository</a> for more in-depth example of how to use Codex in a MediaWiki extension. </p><p><span class="anchor" id="Using_CSS-only_Codex_components"></span> </p> <div class="mw-heading mw-heading3"><h3 id="Usage_without_JavaScript_(CSS-only_Codex_components)" data-mw-thread-id="h-Usage_without_JavaScript_(CSS-only_Codex_components)-Basic_usage"><span id="Usage_without_JavaScript_.28CSS-only_Codex_components.29"></span><span data-mw-comment-start="" id="h-Usage_without_JavaScript_(CSS-only_Codex_components)-Basic_usage"></span>Usage without JavaScript (CSS-only Codex components)<span data-mw-comment-end="h-Usage_without_JavaScript_(CSS-only_Codex_components)-Basic_usage"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=6" title="Edit section: Usage without JavaScript (CSS-only Codex components)"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r4199130">.mw-parser-output .mw-version{border:1px solid #72777d;font-size:80%;line-height:1.2;border-collapse:collapse}.mw-parser-output .mw-version-ltr{float:right;margin:0 0 .5em .5em;text-align:right}.mw-parser-output .mw-version-rtl{float:left;margin:0 .5em .5em 0;text-align:left}.mw-parser-output .mw-version td{padding:.1em .3em}.mw-parser-output .mw-version-versionbox{border:5px solid #00af89;text-align:center}.mw-parser-output .mw-version-versionnumber{font-weight:bold;font-size:180%}.mw-parser-output .mw-version-version .mw-version-versionbox{border-color:#c8ccd1}.mw-parser-output .mw-version.mw-version-version2 .mw-version-versionbox{border-top-color:#c8ccd1;border-right-color:#c8ccd1;border-left-color:#c8ccd1}.mw-parser-output .mw-version-version-unsupported .mw-version-versionbox{border-color:#d33}.mw-parser-output .mw-version.mw-version-version2-unsupported .mw-version-versionbox{border-top-color:#d33;border-right-color:#d33;border-left-color:#d33}.mw-parser-output .mw-version-version-legacy .mw-version-versionbox{border-color:#f93}.mw-parser-output .mw-version.mw-version-version2-legacy .mw-version-versionbox{border-top-color:#f93;border-right-color:#f93;border-left-color:#f93}.mw-parser-output .mw-version-version-stable .mw-version-versionbox,.mw-parser-output .mw-version.mw-version.mw-version-and-later .mw-version-versionbox{border-color:#00af89}.mw-parser-output .mw-version.mw-version-version2-stable .mw-version-versionbox{border-top-color:#00af89;border-right-color:#00af89;border-left-color:#00af89}.mw-parser-output .mw-version-version-future .mw-version-versionbox{border-color:#8080c0}.mw-parser-output .mw-version.mw-version-version2-future .mw-version-versionbox{border-top-color:#8080c0;border-right-color:#8080c0;border-left-color:#8080c0}.mw-parser-output .mw-version-version-alpha .mw-version-versionbox{border-style:dotted}</style> <table class="mw-version mw-version-ltr mw-version-version mw-version-version-stable mw-version-and-later"><tbody><tr> <td>MediaWiki version:</td> <td class="mw-version-versionbox" title="The latest stable version is 1.42"><div class="mw-version-versionnumber"><small>≥</small> 1.42</div></td> </tr></tbody></table> <p>Many Codex components also support "css-only" usage. These components should appear visually identical to their JS-enabled counterparts, but they will offer more limited behavior. </p> <div class="mw-heading mw-heading5"><h5 id="Loading_component_styles" data-mw-thread-id="h-Loading_component_styles-Usage_without_JavaScript_(CSS-only_Codex_components)"><span data-mw-comment-start="" id="h-Loading_component_styles-Usage_without_JavaScript_(CSS-only_Codex_components)"></span>Loading component styles<span data-mw-comment-end="h-Loading_component_styles-Usage_without_JavaScript_(CSS-only_Codex_components)"></span></h5><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=7" title="Edit section: Loading component styles"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>You can load the styles of a limited subset of Codex CSS components in the same way as you would for JS components, above. If you only need the styles, you can add the <code>"codexStyleOnly": "true"</code> option when you define your module. </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">"ext.myExtension.foo"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"class"</span><span class="p">:</span><span class="w"> </span><span class="s2">"MediaWiki\\ResourceLoader\\CodexModule"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"styles"</span><span class="p">:</span><span class="w"> </span><span class="s2">"ext.myExtension.foo/styles.less"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"codexStyleOnly"</span><span class="p">:</span><span class="w"> </span><span class="s2">"true"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"codexComponents"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"CdxButton"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxCard"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxCheckbox"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxProgressBar"</span> <span class="w"> </span><span class="p">]</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading5"><h5 id="Providing_component_markup" data-mw-thread-id="h-Providing_component_markup-Usage_without_JavaScript_(CSS-only_Codex_components)"><span data-mw-comment-start="" id="h-Providing_component_markup-Usage_without_JavaScript_(CSS-only_Codex_components)"></span>Providing component markup<span data-mw-comment-end="h-Providing_component_markup-Usage_without_JavaScript_(CSS-only_Codex_components)"></span></h5><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=8" title="Edit section: Providing component markup"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>To use CSS-only Codex components, just ensure that the appropriate styles are loaded and then add the necessary markup to your page. For now, you'll have to do this by hand. You can find example markup in the "CSS-only usage" section on a component's documentation page (<a href="https://doc.wikimedia.org/codex/latest/components/demos/button.html#css-only-version" class="extiw" title="wmdoc:codex/latest/components/demos/button.html">here is the markup for the Button component</a>). </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"cdx-button cdx-button--action-default"</span><span class="p">></span>Default button<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"cdx-button cdx-button--action-progressive"</span><span class="p">></span> Progressive button <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"cdx-button cdx-button--action-destructive"</span><span class="p">></span> Destructive button <span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Using_Codex_in_PHP" data-mw-thread-id="h-Using_Codex_in_PHP-Basic_usage"><span data-mw-comment-start="" id="h-Using_Codex_in_PHP-Basic_usage"></span>Using Codex in PHP<span data-mw-comment-end="h-Using_Codex_in_PHP-Basic_usage"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=9" title="Edit section: Using Codex in PHP"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r6651107">.mw-parser-output .note{background-position:left 7px top 50%;padding:0.5em 0.5em 0.5em 40px;margin:0.5em 0;overflow:hidden;background-color:#f8f9fa;color:#333;background-repeat:no-repeat;border:1px solid #ddd}.mw-parser-output .note-inline{display:inline-block;vertical-align:middle}.mw-parser-output .note-info{background-color:#eaf3ff;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/e/ec/OOjs_UI_icon_information-progressive.svg");background-size:25px;border-color:#a3caff;padding-left:40px;min-height:25px}.mw-parser-output .note-reminder{background-color:#fff9ea;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg");background-size:25px;border-color:#fc3;min-height:25px}.mw-parser-output .note-warn{background-color:#fff9ea;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg");background-size:25px;border-color:#fc3;min-height:25px}.mw-parser-output .note-error{background-color:#fee7e6;color:#333;background-image:url("https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg");background-size:25px;border-color:#c33;min-height:25px}@media screen{html.skin-theme-clientpref-night .mw-parser-output .note{background-color:transparent;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .note{background-color:transparent;color:inherit}}</style><div role="note" class="note note-info">Codex PHP is still under construction and not yet available for use in MediaWiki core (<a href="https://phabricator.wikimedia.org/T379662" class="extiw" title="phab:T379662">phab:T379662</a>). Expect breaking changes to be introduced until a stable version is announced.</div> <p>Codex PHP is a library for building CSS-only UI components using Codex, the Wikimedia design system, please see the <a href="https://doc.wikimedia.org/design-codex-php/main/" class="extiw" title="wmdoc:design-codex-php/main/">Codex PHP documentation</a>. </p> <div class="mw-heading mw-heading4"><h4 id="Installation" data-mw-thread-id="h-Installation-Using_Codex_in_PHP"><span data-mw-comment-start="" id="h-Installation-Using_Codex_in_PHP"></span>Installation<span data-mw-comment-end="h-Installation-Using_Codex_in_PHP"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=10" title="Edit section: Installation"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Install the Codex PHP library via Composer: </p> <div class="mw-highlight mw-highlight-lang-bash mw-content-ltr" dir="ltr"><pre><span></span>composer<span class="w"> </span>require<span class="w"> </span>wikimedia/codex </pre></div> <div class="mw-heading mw-heading4"><h4 id="Example_Usage" data-mw-thread-id="h-Example_Usage-Using_Codex_in_PHP"><span data-mw-comment-start="" id="h-Example_Usage-Using_Codex_in_PHP"></span>Example Usage<span data-mw-comment-end="h-Example_Usage-Using_Codex_in_PHP"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=11" title="Edit section: Example Usage"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Here’s an example of creating an Accordion component in PHP: </p> <div class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><pre><span></span><span class="nv">$accordion</span> <span class="o">=</span> <span class="nv">$codex</span> <span class="o">-></span><span class="na">accordion</span><span class="p">()</span> <span class="o">-></span><span class="na">setTitle</span><span class="p">(</span> <span class="s2">"Accordion Example"</span> <span class="p">)</span> <span class="o">-></span><span class="na">setDescription</span><span class="p">(</span> <span class="s2">"This is an example of an accordion."</span> <span class="p">)</span> <span class="o">-></span><span class="na">setContentHtml</span><span class="p">(</span> <span class="nv">$codex</span> <span class="o">-></span><span class="na">htmlSnippet</span><span class="p">()</span> <span class="o">-></span><span class="na">setContent</span><span class="p">(</span> <span class="s2">"<p>This is the content of the accordion.</p>"</span> <span class="p">)</span> <span class="o">-></span><span class="na">build</span><span class="p">()</span> <span class="p">)</span> <span class="o">-></span><span class="na">setOpen</span><span class="p">(</span> <span class="k">false</span> <span class="p">)</span> <span class="o">-></span><span class="na">setAttributes</span><span class="p">(</span> <span class="p">[</span> <span class="s2">"class"</span> <span class="o">=></span> <span class="s2">"foo"</span><span class="p">,</span> <span class="s2">"bar"</span> <span class="o">=></span> <span class="s2">"baz"</span><span class="p">,</span> <span class="p">]</span> <span class="p">)</span> <span class="o">-></span><span class="na">build</span><span class="p">()</span> <span class="o">-></span><span class="na">getHtml</span><span class="p">();</span> <span class="k">echo</span> <span class="nv">$accordion</span><span class="p">;</span> </pre></div> <div class="mw-heading mw-heading4"><h4 id="Usage_in_MediaWiki" data-mw-thread-id="h-Usage_in_MediaWiki-Using_Codex_in_PHP"><span data-mw-comment-start="" id="h-Usage_in_MediaWiki-Using_Codex_in_PHP"></span>Usage in MediaWiki<span data-mw-comment-end="h-Usage_in_MediaWiki-Using_Codex_in_PHP"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=12" title="Edit section: Usage in MediaWiki"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Below is an example of using Codex components in MediaWiki: </p> <div class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><?php</span> <span class="k">use</span> <span class="nx">MediaWiki\SpecialPage\SpecialPage</span><span class="p">;</span> <span class="k">use</span> <span class="nx">Wikimedia\Codex\Adapter\WebRequestAdapter</span><span class="p">;</span> <span class="k">use</span> <span class="nx">Wikimedia\Codex\Utility\Codex</span><span class="p">;</span> <span class="k">use</span> <span class="nx">Wikimedia\Codex\Utility\WebRequestCallbacks</span><span class="p">;</span> <span class="k">class</span> <span class="nc">SomeSpecial</span> <span class="k">extends</span> <span class="nx">SpecialPage</span> <span class="p">{</span> <span class="k">public</span> <span class="k">function</span> <span class="fm">__construct</span><span class="p">()</span> <span class="p">{</span> <span class="k">parent</span><span class="o">::</span><span class="na">__construct</span><span class="p">(</span> <span class="s2">"SomeSpecial"</span> <span class="p">);</span> <span class="p">}</span> <span class="k">public</span> <span class="k">function</span> <span class="nf">execute</span><span class="p">(</span> <span class="nv">$subPage</span> <span class="p">)</span> <span class="p">{</span> <span class="nv">$codex</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Codex</span><span class="p">();</span> <span class="nv">$requestAdapter</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WebRequestAdapter</span><span class="p">(</span> <span class="nv">$this</span><span class="o">-></span><span class="na">getRequest</span><span class="p">()</span> <span class="p">);</span> <span class="nv">$callbacks</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">WebRequestCallbacks</span><span class="p">(</span> <span class="nv">$requestAdapter</span> <span class="p">);</span> <span class="nv">$tab1</span> <span class="o">=</span> <span class="nv">$codex</span> <span class="o">-></span><span class="na">Tab</span><span class="p">()</span> <span class="o">-></span><span class="na">setName</span><span class="p">(</span> <span class="s2">"tab1"</span> <span class="p">)</span> <span class="o">-></span><span class="na">setLabel</span><span class="p">(</span> <span class="s2">"Tab 1"</span> <span class="p">)</span> <span class="o">-></span><span class="na">setContentHtml</span><span class="p">(</span> <span class="nv">$codex</span> <span class="o">-></span><span class="na">htmlSnippet</span><span class="p">()</span> <span class="o">-></span><span class="na">setContent</span><span class="p">(</span> <span class="s2">"<p>Content 1.</p>"</span> <span class="p">)</span> <span class="o">-></span><span class="na">build</span><span class="p">()</span> <span class="p">)</span> <span class="o">-></span><span class="na">setSelected</span><span class="p">(</span> <span class="k">true</span> <span class="p">)</span> <span class="o">-></span><span class="na">build</span><span class="p">();</span> <span class="nv">$tabs</span> <span class="o">=</span> <span class="nv">$codex</span> <span class="o">-></span><span class="na">Tabs</span><span class="p">()</span> <span class="o">-></span><span class="na">setCallbacks</span><span class="p">(</span> <span class="nv">$callbacks</span> <span class="p">)</span> <span class="o">-></span><span class="na">setTab</span><span class="p">(</span> <span class="p">[</span> <span class="nv">$tab1</span> <span class="p">]</span> <span class="p">)</span> <span class="o">-></span><span class="na">build</span><span class="p">()</span> <span class="o">-></span><span class="na">getHtml</span><span class="p">();</span> <span class="nv">$this</span><span class="o">-></span><span class="na">getOutput</span><span class="p">()</span><span class="o">-></span><span class="na">addHTML</span><span class="p">(</span> <span class="nv">$tabs</span> <span class="p">);</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Advanced_usage" data-mw-thread-id="h-Advanced_usage"><span data-mw-comment-start="" id="h-Advanced_usage"></span>Advanced usage<span data-mw-comment-end="h-Advanced_usage"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=13" title="Edit section: Advanced usage"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="Using_a_limited_subset_of_components" data-mw-thread-id="h-Using_a_limited_subset_of_components-Advanced_usage"><span data-mw-comment-start="" id="h-Using_a_limited_subset_of_components-Advanced_usage"></span>Using a limited subset of components<span data-mw-comment-end="h-Using_a_limited_subset_of_components-Advanced_usage"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=14" title="Edit section: Using a limited subset of components"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The <code>@wikimedia/codex</code> ResourceLoader module provides the entire Codex library – all components, styles, etc. If you are developing a skin or an extension and you care about performance, you should consider using Codex's <b>code-splitting</b> feature. ResourceLoader allows you to specify a list of Codex components and load only the JS/CSS for those components plus their dependencies. </p><p>To use this feature, define a custom ResourceLoader module (this is typically done in <code>skin.json</code> or <code>extension.json</code>) and specify a list of <code>codexComponents</code>: </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">"ext.myExtension.blockform"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"class"</span><span class="p">:</span><span class="w"> </span><span class="s2">"MediaWiki\\ResourceLoader\\CodexModule"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"codexComponents"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"CdxButton"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxCard"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxDialog"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxIcon"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxRadio"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"CdxTextInput"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"useModelWrapper"</span> <span class="w"> </span><span class="p">],</span> <span class="w"> </span><span class="nt">"packageFiles"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"init.js"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"BlockForm.vue"</span> <span class="w"> </span><span class="p">],</span> <span class="w"> </span><span class="nt">"messages"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"block-target"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"ipb-submit"</span> <span class="w"> </span><span class="p">]</span> <span class="p">}</span> </pre></div> <p>This will generate a virtual file, <code>codex.js</code>, in your <code>resources</code> directory with the exports you need. You can then require the components and composables you requested from that virtual file: </p> <div class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// In resources/ext.myExtension/BlockForm.vue</span> <span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">CdxButton</span><span class="p">,</span><span class="w"> </span><span class="nx">CdxTextInput</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="w"> </span><span class="s1">'../codex.js'</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>If you only need CSS-only components and don't wish to load the component JavaScript, you can add <code>"codexStyleOnly": true</code> to the module definition. </p><p>Similarly, if you only need the JavaScript files and not styles, you can add <code>"codexScriptOnly": "true"</code>. You should only do this if you're putting the styles in another, style-only module as described above. </p> <div class="mw-heading mw-heading3"><h3 id="Using_Codex_icons" data-mw-thread-id="h-Using_Codex_icons-Advanced_usage"><span data-mw-comment-start="" id="h-Using_Codex_icons-Advanced_usage"></span>Using Codex icons<span data-mw-comment-end="h-Using_Codex_icons-Advanced_usage"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=15" title="Edit section: Using Codex icons"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>For performance reasons, there is no <code>codex-icons</code> 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, similar to the code-splitting approach described above. </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{</span> <span class="w"> </span><span class="nt">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"icons.json"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"callback"</span><span class="p">:</span><span class="w"> </span><span class="s2">"MediaWiki\\ResourceLoader\\CodexModule::getIcons"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"callbackParam"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="c1">// List the icons your module needs here, e.g.:</span> <span class="w"> </span><span class="s2">"cdxIconArrowNext"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"cdxIconBold"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"cdxIconTrash"</span> <span class="w"> </span><span class="p">]</span> <span class="p">}</span> </pre></div> <p><span class="anchor" id="Codex_design_tokens"></span><span class="anchor" id="Using_Codex_design_tokens_in_MediaWiki_and_extensions"></span> </p> <div class="mw-heading mw-heading3"><h3 id="Using_design_tokens_directly" data-mw-thread-id="h-Using_design_tokens_directly-Advanced_usage"><span data-mw-comment-start="" id="h-Using_design_tokens_directly-Advanced_usage"></span>Using design tokens directly<span data-mw-comment-end="h-Using_design_tokens_directly-Advanced_usage"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=16" title="Edit section: Using design tokens directly"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Design tokens can be imported into LESS stylesheets as variables. This may be useful if you are developing your own components or styles and want them to integrate with Codex. </p><p>Codex design tokens should be imported from the <code>mediawiki.skin.variables.less</code> file. </p> <div class="mw-highlight mw-highlight-lang-less mw-content-ltr" dir="ltr"><pre><span></span><span class="nv">@import</span><span class="w"> </span><span class="s1">'mediawiki.skin.variables.less'</span><span class="o">;</span> <span class="p">.</span><span class="nc">my-feature</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="o">@</span><span class="kc">color</span><span class="o">-</span><span class="n">base</span><span class="p">;</span> <span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="o">@</span><span class="k">background-color</span><span class="o">-</span><span class="n">base</span><span class="p">;</span> <span class="p">}</span> </pre></div> <p>For a full list of Codex's design tokens, broken down by category, see <a href="https://doc.wikimedia.org/codex/latest/design-tokens/overview.html" class="extiw" title="wmdoc:codex/latest/design-tokens/overview.html">here</a>. </p> <div class="mw-heading mw-heading3"><h3 id="Codex_LESS_mixins" data-mw-thread-id="h-Codex_LESS_mixins-Advanced_usage"><span data-mw-comment-start="" id="h-Codex_LESS_mixins-Advanced_usage"></span>Codex LESS mixins<span data-mw-comment-end="h-Codex_LESS_mixins-Advanced_usage"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=17" title="Edit section: Codex LESS mixins"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Some Codex functionality is implemented using Less mixins. For example, the <a href="https://doc.wikimedia.org/codex/latest/components/mixins/link.html" class="extiw" title="wmdoc:codex/latest/components/mixins/link.html">Link component</a> is a Less mixin rather than a Vue component, and using icons in CSS-only components requires using a Less mixin (see also the documentation for <a href="#Using_CSS-only_Codex_components">using CSS-only components</a> below). </p><p>Using Codex Less mixins in MediaWiki and extensions works very similarly to <a href="#Using_Codex_design_tokens_in_MediaWiki_and_extensions">using design tokens</a>: simply import <code>'mediawiki.skin.variables.less'</code>, which makes all Codex mixins available, as well as the design tokens. </p> <div class="mw-highlight mw-highlight-lang-less mw-content-ltr" dir="ltr"><pre><span></span><span class="nv">@import</span><span class="w"> </span><span class="s1">'mediawiki.skin.variables.less'</span><span class="o">;</span> <span class="p">.</span><span class="nc">my-feature</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="err">a</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="err">.cdx-mixin-link-base()</span><span class="p">;</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Using_Codex_in_userscripts" data-mw-thread-id="h-Using_Codex_in_userscripts-Advanced_usage"><span data-mw-comment-start="" id="h-Using_Codex_in_userscripts-Advanced_usage"></span>Using Codex in userscripts<span data-mw-comment-end="h-Using_Codex_in_userscripts-Advanced_usage"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=18" title="Edit section: Using Codex in userscripts"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>It is possible to use Codex in userscripts. However, there are some limitations that will require certain workarounds. Here are a few considerations to keep in mind when using Vue and Codex in userscripts: </p> <ul><li>No <code>.vue</code> single-file component support; you must define components in plain JS files</li> <li>Everything needs to live in one file; userscripts don't provide a good way to load custom modules</li> <li>Define component templates using ES6 template literals</li> <li>Prefer global component registration for Codex components</li></ul> <div class="mw-heading mw-heading4"><h4 id="Loading_Vue/Codex" data-mw-thread-id="h-Loading_Vue/Codex-Using_Codex_in_userscripts"><span id="Loading_Vue.2FCodex"></span><span data-mw-comment-start="" id="h-Loading_Vue/Codex-Using_Codex_in_userscripts"></span>Loading Vue/Codex<span data-mw-comment-end="h-Loading_Vue/Codex-Using_Codex_in_userscripts"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=19" title="Edit section: Loading Vue/Codex"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>You'll need to load Vue and Codex from ResourceLoader. The best way to do this is via <code>mw.loader.using</code>; the rest of your userscript code should live in a callback or promise chain. </p> <div class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">mw</span><span class="p">.</span><span class="nx">loader</span><span class="p">.</span><span class="nx">using</span><span class="p">(</span><span class="w"> </span><span class="s1">'@wikimedia/codex'</span><span class="w"> </span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="w"> </span><span class="nx">require</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">Vue</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="w"> </span><span class="s1">'vue'</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">Codex</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">require</span><span class="p">(</span><span class="w"> </span><span class="s1">'@wikimedia/codex'</span><span class="w"> </span><span class="p">);</span> <span class="p">}</span><span class="w"> </span><span class="p">);</span> </pre></div> <div class="mw-heading mw-heading4"><h4 id="Use_Vue.createMwApp" data-mw-thread-id="h-Use_Vue.createMwApp-Using_Codex_in_userscripts"><span data-mw-comment-start="" id="h-Use_Vue.createMwApp-Using_Codex_in_userscripts"></span>Use <code>Vue.createMwApp</code><span data-mw-comment-end="h-Use_Vue.createMwApp-Using_Codex_in_userscripts"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=20" title="Edit section: Use Vue.createMwApp"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Once you've loaded Vue and Codex, you must define a Vue app and mount it somewhere on the page. The exact location will vary depending on what you are trying to do. You can use <a rel="nofollow" class="external text" href="https://github.com/wikimedia/mediawiki/blob/master/resources/src/vue/index.js">MediaWiki's custom <code>createMwApp</code> method</a> for this. </p> <div class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">mw</span><span class="p">.</span><span class="nx">loader</span><span class="p">.</span><span class="nx">using</span><span class="p">(</span><span class="w"> </span><span class="s1">'@wikimedia/codex'</span><span class="w"> </span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="w"> </span><span class="nx">require</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">//... require Vue and Codex as above</span> <span class="w"> </span><span class="c1">// create an element to mount the Vue app</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">mountPoint</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="w"> </span><span class="s1">'div'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="c1">// create a Vue app and mount it to the target element</span> <span class="w"> </span><span class="nx">Vue</span><span class="p">.</span><span class="nx">createMwApp</span><span class="p">(</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// data, computed props, methods, etc. go here</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">).</span><span class="nx">mount</span><span class="p">(</span><span class="w"> </span><span class="nx">mountPoint</span><span class="w"> </span><span class="p">);</span> <span class="p">}</span><span class="w"> </span><span class="p">);</span> </pre></div> <div class="mw-heading mw-heading4"><h4 id="Real_examples" data-mw-thread-id="h-Real_examples-Using_Codex_in_userscripts"><span data-mw-comment-start="" id="h-Real_examples-Using_Codex_in_userscripts"></span>Real examples<span data-mw-comment-end="h-Real_examples-Using_Codex_in_userscripts"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=21" title="Edit section: Real examples"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The link below shows a complete example of a userscript which adds a portlet link to all Wiki pages that triggers a custom Codex Dialog component to launch when clicked. Feel free to copy this script to your own user page to use as a starting point. </p><p><a class="external free" href="https://en.wikipedia.org/wiki/User:EGardner_(WMF)/codex-hello-world.js">https://en.wikipedia.org/wiki/User:EGardner_(WMF)/codex-hello-world.js</a> </p><p>Here is another script using Codex : </p><p><a class="external free" href="https://en.wikipedia.org/wiki/User:JSherman_(WMF)/revertrisk.js">https://en.wikipedia.org/wiki/User:JSherman_(WMF)/revertrisk.js</a> </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Release_cycle" data-mw-thread-id="h-Release_cycle"><span data-mw-comment-start="" id="h-Release_cycle"></span>Release cycle<span data-mw-comment-end="h-Release_cycle"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=22" title="Edit section: Release cycle"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>A new version of Codex is released every other Tuesday. When a new release is created, a patch is also submitted to MediaWiki core to use that new release. Since this is done on Tuesdays, the update to core will be deployed the following week (the next time the <a class="external text" href="https://wikitech.wikimedia.org/wiki/Deployments/Train">deployment train runs</a>). </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Using_a_custom_version_of_Codex_for_development_or_testing" data-mw-thread-id="h-Using_a_custom_version_of_Codex_for_development_or_testing"><span data-mw-comment-start="" id="h-Using_a_custom_version_of_Codex_for_development_or_testing"></span>Using a custom version of Codex for development or testing<span data-mw-comment-end="h-Using_a_custom_version_of_Codex_for_development_or_testing"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Codex&action=edit&section=23" title="Edit section: Using a custom version of Codex for development or testing"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>MediaWiki uses the latest release of Codex. If you need to use a different version for development or testing purposes, for example to test how an unmerged patch in Codex interacts with MediaWiki, you can point MediaWiki to your own version of Codex as follows: </p> <ol><li>Clone the <a href="https://gerrit.wikimedia.org/g/design/codex" class="extiw" title="git:design/codex">Codex repository</a> (if you haven't already), and check out the change you want to test.</li> <li>Run <code>npm install</code> and <code>npm run build-all</code> in the root directory of the Codex repository.</li> <li>Point <code>$wgCodexDevelopmentDir</code> to the root directory of the Codex repository. For example, if you cloned the Codex repository in the parent directory of the MediaWiki directory, add <code>$wgCodexDevelopmentDir = MW_INSTALL_PATH . '../codex';</code> to <code>LocalSettings.php</code></li> <li>Test that it works by running <code>mw.loader.load( '@wikimedia/codex' )</code> in the browser console. This should trigger a warning saying "You are using a local development version of Codex", and should not trigger any errors.</li></ol> <p>Once you have this set up, you can make additional changes to your Codex clone, but you have to run <code>npm run build-all</code> each time to make those changes take effect in MediaWiki. </p><p>To disable development mode and go back to using the latest release of Codex, comment out the line in <code>LocalSettings.php</code> that sets <code>$wgCodexDevelopmentDir</code>. </p>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1&useformat=desktop" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=Codex&oldid=6874919">https://www.mediawiki.org/w/index.php?title=Codex&oldid=6874919</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/wiki/Category:WMF_Projects" title="Category:WMF Projects">WMF Projects</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:WMF_Projects_2021q3" title="Category:WMF Projects 2021q3">WMF Projects 2021q3</a></li><li><a href="/wiki/Category:WMF_Projects_2021q4" title="Category:WMF Projects 2021q4">WMF Projects 2021q4</a></li><li><a href="/wiki/Category:WMF_Projects_2022q1" title="Category:WMF Projects 2022q1">WMF Projects 2022q1</a></li><li><a href="/wiki/Category:WMF_Projects_2022q2" title="Category:WMF Projects 2022q2">WMF Projects 2022q2</a></li><li><a href="/wiki/Category:WMF_Projects_2022q3" title="Category:WMF Projects 2022q3">WMF Projects 2022q3</a></li><li><a href="/wiki/Category:WMF_Projects_2022q4" title="Category:WMF Projects 2022q4">WMF Projects 2022q4</a></li><li><a href="/wiki/Category:WMF_Projects_2023q1" title="Category:WMF Projects 2023q1">WMF Projects 2023q1</a></li><li><a href="/wiki/Category:WMF_Projects_2023q2" title="Category:WMF Projects 2023q2">WMF Projects 2023q2</a></li><li><a href="/wiki/Category:WMF_Projects_2023q3" title="Category:WMF Projects 2023q3">WMF Projects 2023q3</a></li><li><a href="/wiki/Category:WMF_Projects_2023q4" title="Category:WMF Projects 2023q4">WMF Projects 2023q4</a></li><li><a href="/wiki/Category:WMF_Projects_2024q1" title="Category:WMF Projects 2024q1">WMF Projects 2024q1</a></li><li><a href="/wiki/Category:WMF_Projects_2024q2" title="Category:WMF Projects 2024q2">WMF Projects 2024q2</a></li><li><a href="/wiki/Category:WMF_Projects_2024q3" title="Category:WMF Projects 2024q3">WMF Projects 2024q3</a></li><li><a href="/wiki/Category:WMF_Projects_2024q4" title="Category:WMF Projects 2024q4">WMF Projects 2024q4</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 29 November 2024, at 23:35.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=Codex&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-5c59558b9d-z7448","wgBackendResponseTime":110,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Basic_usage","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-CodexExample_MediaWiki_extension-Basic_usage","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Usage_with_JavaScript-Basic_usage","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Loading_the_entire_library_(recommended_for_use_in_userscripts)-Usage_with_JavaScript","replies":[{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-Loading_a_subset_of_Codex_components_(recommended_for_skins_and_extensions)-Loading_the_entire_library_(recommended_for_use_in_userscripts)","replies":[]}]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Usage_without_JavaScript_(CSS-only_Codex_components)-Basic_usage","replies":[{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-Loading_component_styles-Usage_without_JavaScript_(CSS-only_Codex_components)","replies":[]},{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-Providing_component_markup-Usage_without_JavaScript_(CSS-only_Codex_components)","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Using_Codex_in_PHP-Basic_usage","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Installation-Using_Codex_in_PHP","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Example_Usage-Using_Codex_in_PHP","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Usage_in_MediaWiki-Using_Codex_in_PHP","replies":[]}]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Advanced_usage","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Using_a_limited_subset_of_components-Advanced_usage","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Using_Codex_icons-Advanced_usage","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Using_design_tokens_directly-Advanced_usage","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Codex_LESS_mixins-Advanced_usage","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Using_Codex_in_userscripts-Advanced_usage","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Loading_Vue/Codex-Using_Codex_in_userscripts","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Use_Vue.createMwApp-Using_Codex_in_userscripts","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Real_examples-Using_Codex_in_userscripts","replies":[]}]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Release_cycle","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Using_a_custom_version_of_Codex_for_development_or_testing","replies":[]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.031"},"limitreport":{"cputime":"0.284","walltime":"0.364","ppvisitednodes":{"value":731,"limit":1000000},"postexpandincludesize":{"value":10106,"limit":2097152},"templateargumentsize":{"value":1714,"limit":2097152},"expansiondepth":{"value":14,"limit":100},"expensivefunctioncount":{"value":16,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":35329,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 152.626 1 -total"," 40.50% 61.809 1 Template:Wikimedia_engineering_project_information"," 26.87% 41.016 1 Template:Ambox"," 16.73% 25.527 1 Template:MW_version"," 14.46% 22.076 1 Template:MW_version/layout"," 9.35% 14.270 1 Template:Ptag"," 7.36% 11.239 1 Template:Ll"," 7.14% 10.896 1 Template:Note"," 5.57% 8.503 2 Template:Anchor"," 4.81% 7.337 2 Template:Dir"]},"scribunto":{"limitreport-timeusage":{"value":"0.035","limit":"10.000"},"limitreport-memusage":{"value":1021149,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-5c59558b9d-f6mjz","timestamp":"20241129235453","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>