Open main menu

ResourceLoader/Core modules

English  • 日本語 • 中文
shortcut: RL/CM


This page lists modules that ship with MediaWiki core by default. It reflects the current development version of MediaWiki and may vary from the latest stable release.

The order of the modules should be kept similar to their definition in Resources.php.

The modules jquery and mediawiki together form the base environment ("startup") and are always present. They should not (and in fact, can not) be loaded as modules or dependencies. mediawiki is what provides the loader client itself. jQuery and the other base utilities provided by mediawiki are internal dependencies of the ResourceLoader client.



This is the MediaWiki base module. It initialises the mw global object.


For a complete list of configuration values in mw.config, check out Manual:Interface/JavaScript. By default, keys here are also reflected as global variables for backwards compatibility (since MediaWiki 1.17). A console message will be shown when the global variables are used, as they are deprecated. The keys are identical to the variables beginning in wg, such as wgSiteName, wgArticleId etc.

// Check existence
if ( mw.config.exists( 'wgGlobalGroups' ) ) {
	// CentralNotice has registered this variable...

// Or just a plain access for comparison
// (no need to check exists first, it falls back to null)
if ( mw.config.get( 'wgPageName' ) === 'ResourceLoader' ) {
	// Do stuff...

/* Access multiple ones for use throughout a larger code base
   Returns an array containing the variables requested.        */
var conf = mw.config.get([

if ( conf.wgCanonicalSpecialPageName === 'Blankpage' ) {
	// Do stuff...


MediaWiki version: 1.22

A framework for registering and firing events in JavaScript (as opposed to doing everything on document ready). For example, the snippet below provides a message once the categories on a page load:

mw.hook( 'wikipage.categories' ).add( function ( $content ) {
	if (mw.config.get("wgCategories").length === 0) {
		alert("Please add categories to this page");


Helper functions for escaping and creating strings of HTML.



Load one or more modules, a script or a stylesheet. To load an external script or stylesheet, the URL must start with either "http://", "https://" or "//" (protocol-relative), or "/" (local path). Provide a MIME-type as second parameter (either "text/javascript" or "text/css"). If no MIME-type is provided, the default "text/javascript" is assumed. mw.loader creates an asynchronous request, if you need to run code that depends on a module, use mw.loader.using instead (which provides a callback). If you need a callback from an external script, use mw.loader.getScript (or jQuery.getScript).

Loader instructions represent the intent that a module by that name should be loaded. It will not load the same module a second time if has already been loaded previously. This does not apply to scripts and stylesheets – they will be loaded each time, even if loaded previously. If a script defines window.Foo, you can use ( window.Foo !== undefined ) to check if that script has already been loaded.

// Module by name
mw.loader.load( 'oojs' );

// Multiple non-external modules at once
mw.loader.load( ['oojs', 'mediawiki.Title'] );

// External javascript file
mw.loader.load( '' );

// External stylesheet
mw.loader.load( '', 'text/css' );

// Local script
mw.loader.load( '/w/index.php?title=MediaWiki:Gadget-HotCat.js&action=raw&ctype=text/javascript' );

// Local stylesheet
mw.loader.load( '/w/index.php?title=User:Example/custom-foo.css&action=raw&ctype=text/css', 'text/css' );

// Local gadget (the gadget must be defined in [[MediaWiki:Gadgets-definition]])
mw.loader.load( 'ext.gadget.Navigation_popups' );

Loads modules and then executes a callback function. You may call using() with two or three arguments: dependencies, a callback function to execute when modules are successfully loaded, and a callback function to execute on error. Or you can call it with one argument and use a jQuery promise object returned by this function (since MediaWiki 1.23) to specify callbacks.

Only modules and local gadgets can be loaded by calling using(). Trying to load other scripts or stylesheets will result in an "Unknown dependency" error. If you need a callback from another script, use mw.loader.getScript (or jQuery.getScript) instead.

mw.loader.using( 'jquery.colorUtil' ).then( function () {
	var curColor, newColor;

	// This function will be called right away if the required modules are already loaded.
	// Otherwise the module(s) are loaded and if all successful, the function is called.
	curColor = 'rgb(70,140,210)';
	newColor = $.colorUtil.getColorBrightness( curColor, +0.2 );
	alert( '20% brigher than ' + curColor + ' is ' + newColor );
} );
MediaWiki version: 1.33
Gerrit change 487566

Load a script by URL. Returns a jQuery promise object which can be used to specify callbacks.


mw.loader.getScript( '' )
    .then( function () {
        // Script succeeded. You can use X now.
    }, function ( e ) {
        // Script failed. X is not available
        mw.log.error( e.message ); // => "Failed to load script"
    } );
} );

To get a single callback from multiple promises, use jQuery.when or Promise.all

    mw.loader.getScript( '' ),
    mw.loader.getScript( '' )
    .then( function () {
        // Both script succeeded. You can use X and Y now.
    }, function ( e ) {
        // A script failed, and is not available
        mw.log.error( e.message ); // => "Failed to load script"
    } );
} );

MediaWiki version: 1.22
Gerrit change 88408

Lazy-loads the mediawiki.inspect module and executes its main method runReports.

Shows an ordered list of all ResourceLoader modules that are loaded on the page, sorted by the total size of each module's JavaScript, CSS, Mustache templates, and string assets. Can show CSS usage individually using mw.loader.inspect("css").

In MediaWiki 1.32 this function has been renamed to mw.inspect (Gerrit change 436340).


Collection of methods to help log messages to the console.


See also Manual:Messages API#Using messages in JavaScript

If the mediawiki.jqueryMsg module is loaded, the behaviour of this module changes significantly. See above link.


MediaWiki version: 1.23
Gerrit change 99547

Get the current time, measured in milliseconds since January 1, 1970 (UTC).

On browsers that implement the Navigation Timing API, this function will produce floating-point values with microsecond precision that are guaranteed to be monotonic. On all other browsers, it will fall back to using Date.

var totalTime, time =;
// some expensive code
totalTime = - time;


MediaWiki version: 1.23
Gerrit change 99547

Track an analytic event.

This method provides a generic means for MediaWiki JavaScript code to capture state information for analysis. Each logged event specifies a string topic name that describes the kind of event that it is. Topic names consist of dot-separated path components, arranged from most general to most specific. Each path component should have a clear and well-defined purpose. Data handlers are registered via `mw.trackSubscribe`, and receive the full set of events that match their subscription, including those that fired before the handler was bound.

The WikimediaEvents extension demonstrates how to add a subscriber for the "timing" and "counter" topics (example).

var totalTime, time =;
// some expensive code
totalTime = - time;
mw.track( '', totalTime );


Module that represents information about the current user.



Contains the preferences of the user, or the defaults when logged out.

// Get a preference option and use it directly
alert( 'According to your preferences, your gender is ' + mw.user.options.get( 'gender' ) );

// Get several preferences and compare them
var opts = mw.user.options.get( ['diffonly', 'showhiddencats'] );
if ( opts.diffonly === 0 && opts.showhiddencats === false ) {
	// User's preferences match
} else {
	// User's preferences don't match

This module is loaded asynchronously and may depend on a separate HTTP request for the user.defaults module. Always declare the relevant dependencies for your module, or use mw.loader.using().



MediaWiki version: 1.19

Is pre-populated with api tokens. Currently editToken, watchToken, and patrolToken.

var edittoken = mw.user.tokens.get( 'editToken' );
var watchtoken = mw.user.tokens.get( 'watchToken' );

See a live example from the module.


MediaWiki version: 1.18.1

This module provides the mw.Api constructor. The main methods of the mw.Api object are get(), post(), and ajax(). The mediawiki.api module (and its plugins) return a Promise – similar to jQuery.ajax (and its derivatives such as jQuery.get, and jQuery.getJSON).

Before MediaWiki 1.32 (Gerrit change 434179), the methods were part of separate modules named under mediawiki.api.*. These have been merged into the main module mediawiki.api, so you only have to depend on that module. The submodules have been deprecated with warnings. These submodules have been removed in MediaWiki 1.33.

Examples of methods that are available:

  • mw.Api#edit - Edit an existing page.
  • mw.Api#saveOptions - Changes one or more user preferences.
  • mw.Api#watch - Add a given title (or titles) to the user's watchlist.

Browse mw.Api Documentation


MediaWiki version: 1.24
Gerrit change 120806

Cookie module that follows most of MediaWiki's cookie settings (except wgCookieSecure). Simple examples:

var value;

mw.cookie.set( 'cookieToSet', 'valueToSet' );

value = mw.cookie.get( 'cookieToGet' );

This module prepends the cookie names with $wgCookiePrefix (e.g. "enwikiname=value"). If you use this module only you shouldn't encounter issues, but you might do if you mix it with other cookie handling codes.

See the API documentation for available options.


MediaWiki version: 1.19


MediaWiki version: 1.19

User interface for collecting feedback, particularly on new features. This sets the mw.Feedback constructor. Example:

var feedback = new mw.Feedback();
$( '#myButton' ).click( function () { feedback.launch(); } );


Sets up feedback GUI.


Displays a particular part of the feedback interface.


Shows that the feedback is being added.


Shows information about bug tracker


Shows thank you message.


Displays the feedback form, with optional pre-filled contents.


Shows given error message.


Dismisses feedback form.


Submits feedback form using mw.Api.newSection.


Main entry point for displaying the feedback form, with optional pre-filled contents.


MediaWiki version: 1.22
Gerrit change 88408

The mw.loader.inspect function lazy-loads this module and executes its main method runReports.


See also Manual:Messages API#Using messages in JavaScript

This module sets the mediawiki.jqueryMsg object. This is used for advanced message parsing. Use it only when mw.message does not meet your needs. For example, mediawiki.jqueryMsg is required for plural and gender support, the int: magic word and links.


MediaWiki version: 1.20
Gerrit change 19199

Creates bubble notifications. Basic examples:

mw.notify( 'This is a notification.' ); // Send a plaintext notification
mw.notify( mw.message( 'some-message' ) ); // Use an i18n message to send a notification
mw.notify( $( '<span>This is an <u>HTML</u> notification.</span>' ) ); // Send an HTML notification with a jQuery instance (a DOM node also works)

mw.notify( 'Test', { title: 'Title!' } ); // Give the notification a title
mw.notify( 'Test', { autoHide: false } ); // Don't automatically hide the notification
mw.notify( 'Test', { tag: 'foobar' } ); // Send a notification tagged with a tag
mw.notify( 'Test 2', { tag: 'foobar' } ); // This one will replace the previous 'foobar' notification.


Wrapper for HTML5 Web Storage.

// localStorage 'key' ); 'key', 'value' ); 'key' );

// sessionStorage 'key' ); 'key', 'value' ); 'key' );

If you need to replace $.jStorage, be aware saves only string values, so you must additonal use something like JSON.stringify() and JSON.parse() or parseInt/parseFloat.


MediaWiki version: 1.22

(deprecated in 1.29) Please use OOUI instead.

UI module developed as part of the Agora project. It defines mw-ui-* CSS styles. It is used in the Login and Create account forms and several extensions. It provides one appearance for Vector and another for the rest of the skins.




Adds a <style> element to the HEAD and returns the CSSStyleSheet object.

The CSSStyleSheet object can be used to disable the css rules at any later time and re-enable them as well. This can be done through the 'disabled' attribute. When setting this to true, the rules no longer apply. When setting to false, the rules apply again.

See also W3 on CSSStyleSheet for more info.

// Add a simple stylesheet rule
mw.util.addCSS( '.plainlinks { color: green; }' );

// Add a rule and set a variable to the sheet
var myCssRules = mw.util.addCSS( '.plainlinks { color: green; }' );
$( '#myButton' ).click( function () {
	// When button is clicked, toggle the stylesheet from true to non-true (false), or from false to non-false (true)
	myCssRules.disabled = !myCssRules.disabled;
} );


This function is ported from the legacy wikibits keeping it fully backwards compatible, with a few adjustments that support all core skins and with added support for a CSS-selector as nextnode.

Only the first three arguments are required. In case you need to execute a custom function when the user clicks on a portlet use the jQuery(...).on('click', .. ) on returned Element object to attach a callback that runs the code that should be executed.

See the mw.util documentation for details.

// First wait for mediawiki.util to load, and the page to be ready.
$.when( mw.loader.using( 'mediawiki.util' ), $.ready ).then( function () { 
   // General usage:
    mw.util.addPortletLink( portletId, href, text /*, id, tooltip, accesskey, nextnode */ );
} );

// Add in the toolbox before the Print-link
var newElement = mw.util.addPortletLink(
	'Go to',

// The old way of passing a DOM-node still works
	'Go to',	
	document.getElementById( 't-print' )


A jQuery object for a page's overall content area regardless of the skin used. This is, for example, #content in the Vector-skin (before 1.20 it was #bodyContent).

This does not refer to the area where the page content goes. If you wish to work with that area of the page instead of the overall content area you should use $('#mw-content-text') instead.

This property is populated on document ready. To use it, wait for $.ready and be sure to have a module dependency on mediawiki.util which will ensure your document ready handler fires after initialization.

Because of the lazy-initialised nature of this property, you are discouraged from using it.

/* Add some HTML to the page content */
mw.util.$content.append( '<h2>Lorem ipsum</h2><p>This section was just added to the bottom of the wiki page.</p>' );

/* Count number of tables in the page's content with a class of "wikitable" */
var $wikitablesInPage = mw.util.$content.find( 'table.wikitable' );

if ( $wikitablesInPage.length ) {
	alert( 'There are ' + $wikitablesInPage.length + ' wikitables on this page.' );
} else {
	alert( 'There are no wikitables on this page.' );

Here is a more advanced example involving loading in extra content with an AJAX request. Run this example on a page other than the main page.

/* Loads in main page (or any page for that matter) over AJAX (may be useful for Special:BlankPage) */

// Put a loading message on top of the page
mw.util.$content.prepend( '<p><em>Loading...</em></p><hr/>' );

// To get the article contents, use #mw-content-text instead.
$('#mw-content-text').load( mw.util.getUrl( mw.config.get( 'wgMainPageTitle' ) ) + ' #mw-content-text', function () {
	mw.notify( 'Load complete!' );
} );


This function returns the value of the specified URL parameter. By default it uses the current window's address. Optionally you can pass it a custom location.

It returns null if the parameter is not present. Returns an empty string("") if it was an empty parameter (such as /page.php?some=parameter&emptyparameter=&id=12

// Location:
// Suppose we're editing a page section, this will return the number of the edit section
mw.util.getParamValue( 'section' ); /* returns '28'; */

// Extract a value from a custom url
// For example on a diff page where there is: "← Older edit" and you need the oldid of the previous edit
var oldid = mw.util.getParamValue( 'oldid', '//' );
if ( oldid !== null ) {
	alert( 'The previous text version of this page has id: ' + oldid );
} else {
	alert( 'No "oldid" parameter found in the given address.' );


This function returns the address to a local wiki page.

var sandboxLink = mw.html.element(
	'a', {
		href: mw.util.getUrl( 'Sandbox 3000' ), // returns "/wiki/Sandbox_3000"
		title: 'Go to Sandbox'
	}, 'Click here to enter the sandbox!'


MediaWiki version: 1.18

This function returns bool for passed string is valid IPv4 Address or not.

// true
mw.util.isIPv4Address( '' );

// false (range is invalid IPv4 Address)
mw.util.isIPv4Address( '' );

// false
mw.util.isIPv4Address( 'string' );


MediaWiki version: 1.18

This function returns bool for passed string is valid IPv6 Address or not.

// true
mw.util.isIPv6Address( '2001:db8:a:0:0:0:0:0' );

// true
mw.util.isIPv6Address( '2001:db8:a::' );

// false (range is invalid IPv6 Address)
mw.util.isIPv6Address( '2001:db8:a::/32' );

// false
mw.util.isIPv6Address( 'string' );


MediaWiki version: 1.18

(deprecated in 1.24) Use mw.notify instead.

This function was ported from the legacy wikibits module, with full backwards compatibility, with a few improvements and with added support for hiding pre-existing messages by calling the method without arguments (or passing null).

// Basic usage, replace/add the message on top
mw.util.jsMessage( 'This is something a <strong>message</strong> for the <strong>user</strong>' );

// Classed usage, adds/replaces the 'mw-js-message-foobar' as class for the message-box
mw.util.jsMessage( 'Foobar message 01255', 'foobar' );

// Any of the folllowing will empty and hide the box
mw.util.jsMessage( '' );
mw.util.jsMessage( null );


This function returns an encoded string in its raw form for use in urls.

var exFooUrl = '' + mw.util.rawurlencode( mw.config.get( 'wgPageName' ) );

For building query strings, you may want to use jQuery.param instead:

var query = {
	page: 'MyPage',
	value: mw.config.get( 'skin' ),
	action: 'foo'

var fooQuery = '' + $.param( query );


Returns true if its string parameter is a valid e-mail address according to HTML5 specification, false if not, and null if passed an empty string.

var isValid = mw.util.validateEmail( "" ) === true;


This function returns a "pretty" version of a URL encoded wiki page name. It keeps slashes and colons unencoded. The behavior differs from wfUrlencode on the PHP side.

// This url will end up in the user's addressbar, so prettification is useful.
var $histLink = $( '<a>' ).attr(
	mw.config.get( 'wgScript' ) + '?action=history&title=' + mw.util.wikiUrlencode( mw.config.get( 'wgPageName' ) ),

// This will never be shown, don't bother with string concatenation, just encode it regularly with $.param(), much easier.
	url: mw.config.get( 'wgScript' ) + '?' + $.param({ action: 'history', title: mw.config.get( 'wgPageName' ) }),
	dataType: 'html'
.done( function ( html ) {
	/* .. */


(deprecated in 1.23) (removed in 1.32) Gerrit change 429993

Use mw.util.getUrl instead.


MediaWiki version: 1.18

This function returns the location of a script on the current wiki. Much like wfScript in GlobalFunctions.php.

Parameters: str - Name of the script (eg. 'api'), defaults to 'index'.

jQuery.getJSON( mw.util.wikiScript( 'api' ), {
	format: 'json',
	action: 'query',
	titles: 'Main Page',
	prop: 'revisions'
} ).done( function ( data ) {
	// data.query
} );


MediaWiki version: 1.26


Returns a string for literal use in a regular expressions by escaping characters that have a special meaning in a regex.


This sets the mw.Title constructor, which has several methods in its prototype. Basic example:

var t = new mw.Title( 'Image: foo_bar baz.jpg' );
t.getMain(); // "Foo_bar_baz.jpg"
t.getNamespaceId(); // 6
t.getNamespacePrefix(); // "File:"


Basic examples:

var uri = new mw.Uri(); // Instance for the location of the current window

// Add one or more URL parameters, automatically handling ? and & as needed.
// Note that this modifies it in place, rather than creating a new URI object.
uri.extend( { action: 'edit', section: 3 } );

var otheruri = new mw.Uri( '' ); // The trailing slash is *required*
otheruri.toString(); // ""

OOjs and OOUIEdit

MediaWiki version: 1.23


OOjs is an API module which provides a consistent way of implementing object-oriented design in JS.


OOUI uses OOjs to implement a UI toolkit. oojs-ui is the legacy name for the module.

jQuery & pluginsEdit


More information about jQuery's presence in MediaWiki, see jQuery. For more about jQuery in general and all its core functions, refer to

ResourceLoader provides jQuery as part of its base environment (the loader client uses jQuery internally), therefore this module is always loaded and should not (and in fact can not) be loaded through ResourceLoader (as dependency or otherwise).




MediaWiki versions: 1.16 – 1.31

(removed in 1.31) Gerrit change 386469


MediaWiki versions: 1.20 – 1.31

(removed in 1.31) Gerrit change 386029 (T178450)

The code is still available at Also, some wikis have it hacked in as a gadget, such as Wikimedia Commons.

This is a jQuery module that allows you to put a red notification "badge" on an item on the page.



This single-function plugin can be called to add this functionality to any number of checkboxes. By default (onload) it's applied to all input elements that have a type of checkbox, excluding any with a class of 'noshiftselect'. As it has a built-in prevention to avoid binding the CheckboxShiftClick twice to the same element you can simply run the line below under "Default" again at any time if you want to enable dynamically added checkboxes in the page to be shift-selectable as well. Or alternatively run it on the specific selector of choice (see second example below).

// Default:
$( 'input[type=checkbox]:not(.noshiftselect)' ).checkboxShiftClick();

// Enable the functionality for checkboxes in dynamically created form <form id="my-tool-form">
$( 'form#my-tool-form input[type=checkbox]' ).checkboxShiftClick();


“Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.” —

In fact, it turns a select into a combo box with autocomplete functionality by default but also supports grouping, and "tagging" (i.e. multiple values).

$("select").chosen({/* options */});


A plugin that extracts information about the client's browser, layout engine and operating system. Use this instead of jQuery.browser, which is deprecated and will be removed from jQuery in the near future.


The profile function is the main function here and returns (and caches) all the information in an object in. All possible values (except for version numbers) are predefined. A typical return looks like this:

/* jQuery.client.profile() */
	'name': 'firefox',
	'layout': 'gecko',
	'layoutVersion': '20100101',
	'platform': 'win'
	'version': '10.0.2',
	'versionBase': '10',
	'versionNumber': 10,

Here a few examples:

if ( $.client.profile().layout == 'gecko' && $.client.profile().platform == 'linux' ) {
	// This will only run on Gecko browsers (ie. Mozilla Firefox) on Linux.

if ( $.client.profile().name == 'msie' ) {
	// Only for good ol' Internet Explorer

// Shortcut
var prof = $.client.profile();
if ( == 'firefox' && prof.versionBase == '2' && prof.platform == 'win' ) {
	// Target Mozilla Firefox 2.x on Windows

Check jquery.client.js for possible values of browser names, layout engines and platforms.




Used by the Vector extension.


MediaWiki version: 1.18


MediaWiki version: 1.17


You can use jquery.cookie or you can use mediawiki.cookie instead in new code, since it takes into account MediaWiki's cookie configuration settings for you.

This plugin allows you to set, get and delete cookies.

// Set cookie (simple, current page/path)
$.cookie( 'myName', 'Flower' );

// Set cookie (extra options)
$.cookie( 'myName', 'Flower', {
	expires: 7, // expires in 7 days
	path: '/' // domain-wide, entire wiki
} );

// Get cookie
var name = $.cookie( 'myName' );

// Delete cookie
// Deprecated since 1.2 please use $.removeCookie('foo') instead
$.cookie( 'myName', null );


When deleting a cookie, you must use the same path and domain used when the cookie was set.

Note that when MediaWiki server-side code sets a cookie it usually prefixes it with the database name; this prefix is available to JavaScript code as the mw.config variable wgCookiePrefix.

Note that users will likely get separate cookies for /wiki/ and /w/ paths in page URLs if you do not specify the extra option { path: '/' } when setting a cookie.




MediaWiki version: 1.26
Gerrit change 223201


MediaWiki version: 1.24

(removed in 1.25)

Provides JSON encoding to old browsers which do not support JSON.stringify. Deprecated since MediaWiki 1.24[1]. Removed in MediaWiki 1.25, use the "json" module instead (which lazy-loads the json2.js polyfill).


(deprecated in 1.28) Please use

var key = "myStorageKey",
	value = $.jStorage.get( key );

if ( !$.jStorage.storageAvailable() ) {
	throw new Error( 'No storage available. Fall back to ... or tell the user to install a real browser!' );

$.jStorage.listenKeyChange( key, function( key, action ) {
	if ( window.console && $.isFunction( console.log ) ) {
		console.log(key + " has been " + action);
} );

value = {a: 1, b: 2, c: [3, 4, 5]};
$.jStorage.set( key, value );


MediaWiki version: 1.17

(deprecated in 1.32) Gerrit change 456302

Please use jquery.i18n instead.

Localizes the elements in a jQuery collection.


MediaWiki version: 1.18
See also Manual:Collapsible elements.

Makes elements collapsible. It supports lots of variations such as:

Add "mw-collapsible" to an element (a <div> for example) with some content and save the page. The inner content of this element will be treated as collapsible content. Prepended to the element, before the collapsible content, is a toggle-link with a localized label (collapsible-expand, collapsible-collapse)
Initial state
Adding "mw-collapsed" as additional class will cause the element to be initially collapsed when the page is loaded.
Custom label
HTML5 only Using the data-collapsetext and data-expandtext attributes one can define a custom text for the toggle labels added by the script. When added in wikitext these could be populated by a localized message like:
<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">
Remote toggle
If you don't want the script to put the default toggle link (whether or not with a custom label) in your element, you can make one of your own. This could reside anywhere inside or outside the collapsible element. Its relationship to the collapsible element is detected by using an ID attribute with the prefix mw-customcollapsible and a corresponding class attribute with prefix mw-customtoggle for the collapsible element and the togglelink respectively.
Example: Simple collapsible div or table


{| class="infobox"
! Foo
| Bar
! Lorem
| Ipsum
! More info
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! Head
! Top
| Cell
| content
| This table is collapsible
| Because it has the "mw-collapsible" class
| It was initially hidden, because it
| had the "mw-collapsed" class

<div class="toccolours mw-collapsible" style="width: 400px;">
This is text is collapsible. {{Lorem}}


Foo Bar
Lorem Ipsum
More info
Head Top
Cell content
This table is collapsible Because it has the "mw-collapsible" class
It was initially hidden, because it had the "mw-collapsed" class
This is text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example: Hide the collapsible element by default, the toggle element resides outside of it


<div class="mw-customtoggle-myDivision" style="background:#e0e8ff">Click here to toggle the element</div>

<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="toccolours mw-collapsible-content">Lorem ipsum dolor sit amet...</div>

<div class="mw-customtoggle-myDivision" style="background:#e8ffe0">Clicking will toggle it also!</div>


Click here to toggle the element
Lorem ipsum dolor sit amet...
Clicking will toggle it also!

For other live examples, see Test Wikipedia - Collapsing Testpage.


MediaWiki versions: 1.16 – 1.31

This plugin adds support for placeholder texts in input fields for browsers that don't support the HTML5 attribute yet. If the attribute is not supported it's applied to all input elements with a 'placeholder' attribute, on-load.

It has a built-in check for browser support, but for efficiency it's best to do this check (also) wrapped around to call.

// Default:
if ( !( 'placeholder' in document.createElement( 'input' ) ) ) {
	$( 'input[placeholder]' ).placeholder();

// Example for your dynamically added foobar fields
$( "form#foobar-ajax input[placeholder]" ).placeholder();


Testing framework. See



Assesses the completeness (coverage) of test suites for object oriented javascript libraries. Written to be used in environments with jQuery and QUnit.

This is also used by MediaWiki core when running the QUnit test suite with the completenesstest option enabled.





MediaWiki version: 1.18


mw.util.jsMessage( 'The selected text is "' + mw.html.escape( $( '#wpTextbox1' ).textSelection( 'getSelection' ) ) + '".' );


(deprecated in 1.28)

The library will be available for the forseeable future, but overlaps with functionality within OOUI and provides a suboptimal experience to mobile users. Where jQuery.tipsy is being used, we encourage developers to inspect OOUI and feedback on how the library might be improved to support the usecase that jquery.tipsy provides.

Example page; jQuery project page

Option Type Possible values Default Description
gravity string / call-back function 'nw' | 'n' | 'ne' | 'w' | 'e' | 'sw' | 's' | 'se' / $.fn.tipsy.autoNS | $.fn.tipsy.autoWE | pointer or anonymous 'n' sets the positioning of the tooltip relative to the element
fade bool true | false true use fading effect (fadeIn / fadeOut)
title string (an attribute) / call-back function style, class, id, ..., function () { return 'some string'; } title (or if not specified fallback-value; see below) Which string to display as a "tool-tip"?
fallback string 'valid string' used if an element has no tooltip
html bool true | false false interpret the tooltip text as HTML
delayIn number in ms 0, 1, 2, ... 0 How long to wait after onmouseover to show the tip?
delayOut number in ms 0, 1, 2, ... 0 How long to wait after onmouseout to close the tip?
trigger string 'focus' | 'manual' | 'hover' hover When to show the tooltip (useful for forms)
live bool true | false false dynamical add to selectors- see JQuery's live interpretation
offset number in px 0 offset from tooltip to element
opacity number (float) 1.0 opacity of the tooltip
mw.loader.using( 'jquery.tipsy', function () {
		$( '<span>', {
			title: 'Some tipsy test title'
		} )
		.append( 'Hover here' )
		.tipsy( {
			option: 'value',
			option2: 'value2'
		} )
} );


MediaWiki version: 1.17

(deprecated in 1.26)

There are several methods added to the jQuery object for older browsers serving as backwards-compatibility for new native prototypes in newer browser. Also several other convenience functions have been created such as isEmpty and escapeRE. In MediaWiki 1.17 and 1.18 these methods were part of the "jquery.mwPrototypes" module. In MediaWiki 1.19 this module has been renamed to "jquery.mwExtension" (see rev:94227).


Trims whitespace from the left side of the string. Use instead: s.replace( /^\s+/, "" )


Trims whitespace from the right of the string. Use instead: s.replace( /\s+$/, "" )


Returns the string with the first character capitalized. Use instead: s.charAt( 0 ).toUpperCase() + s.substr( 1 )


Returns a string for literal use in a regular expressions by escaping characters that have a special meaning in a regex. In ≥ 1.26 use mediawiki.RegExp instead.


Check whether a passed a variable is a direct link to an element.


MediaWiki version: 1.17

This function checks if a variable is empty. Supports strings, booleans, arrays and objects. The string "0" is considered empty. A string containing only whitespace (ie. " ") is considered not empty.


Compares two arrays and returns a boolean for whether they are in fact the same


MediaWiki version: 1.17

Compares two objects for it's properties and values (recursive).

 * Trim
$.trimLeft( '  foo bar  ' ); // "foo bar  ";
$.trimRight( '  foo bar  ' ); // "  foo bar";
$.trim( '  foo bar  ' ); // "foo bar";

 * isEmpty
$.isEmpty( 'string' ); // false
$.isEmpty( '0' ); // true
$.isEmpty( '' ); // true
$.isEmpty( [] ); // true

 * compareArray
$.compareArray( [1, "a", [], [2, 'b'] ], [1, 'a', [], [2, "b"] ] ); // true
$.compareArray( [1, 2], [8, 7] ); // false

 * isDomElement
// Sure, a plain normal dom element: True
$.isDomElement( document.getElementById( 'content' ) );

// This returns an array of dom elements, not a dom element itself: False
$.isDomElement( document.getElementsByClassName( 'portal' ) );

// This is a normal dom element: True
$.isDomElement( document.getElementsByClassName( 'portal' )[0] );

// jQuery objects are not dom elements: False
$.isDomElement( $( '#content' ) );

// jQuery.get(0) returns the raw dom element for the object: True
$.isDomElement( $( '#content' ).get(0) );

// Anything else: False
$.isDomElement( 'hello world' );

jQuery UIEdit

(deprecated in 1.29) Please use OOUI instead.

For more information on and demos for jQuery UI, refer to

The following components are available as individual ResourceLoader modules:

The module name of each jQuery UI component is the script name, without the .js extension. For example: jquery.ui.core for the jquery.ui.core.js script.