PHPackages oojs/oojs-ui - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. oojs/oojs-ui ActiveLibrary oojs/oojs-ui ============ Provides library of common widgets, layouts, and windows. v0.53.1(5mo ago)70936.1k↑24.5%251MITJavaScriptPHP >=8.1 Since Nov 22Pushed 2mo ago9 watchersCompare [ Source](https://github.com/wikimedia/oojs-ui)[ Packagist](https://packagist.org/packages/oojs/oojs-ui)[ Docs](https://www.mediawiki.org/wiki/OOUI)[ RSS](/packages/oojs-oojs-ui/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (7)Versions (242)Used By (1) OOUI ==== [](#ooui) OOUI is a component-based JavaScript UI library. Key features: - Common widgets, layouts, and dialogs - Classes, elements, and mixins to create custom interfaces - Internationalization and localization, like right-to-left (RTL) languages support - Theme-ability - Built-in icons - Accessibility features It was the standard library for Web products at the Wikimedia Foundation, having been originally created for use by [VisualEditor](https://www.mediawiki.org/wiki/VisualEditor). It is now in maintenance mode, and we strongly recommend all new code instead be written using [Codex](https://doc.wikimedia.org/codex/latest/). Quick start ----------- [](#quick-start) The library is available on [npm](https://www.npmjs.com/package/oojs-ui). To install: ``` $ npm install oojs-ui ``` Once installed, include the following scripts and styles to get started: ``` ``` Loading the library ------------------- [](#loading-the-library) While the distribution directory is chock-full of files, you will normally load only the following three: - `oojs-ui.js`, containing the full library; - One of `oojs-ui-wikimediaui.css` or `oojs-ui-apex.css`, containing theme-specific styles; and - One of `oojs-ui-wikimediaui.js` or `oojs-ui-apex.js`, containing theme-specific code You can load additional icon packs from files named `oojs-ui-wikimediaui-icons-*.css` or `oojs-ui-apex-icons-*.css`. The remaining files make it possible to load only parts of the whole library. Furthermore, every CSS file has a right-to-left (RTL) version available, to be used on pages using right-to-left languages if your environment doesn't automatically flip them as needed. Issue tracker ------------- [](#issue-tracker) Found a bug or missing feature? Please report it in our [issue tracker Phabricator](https://phabricator.wikimedia.org/maniphest/task/edit/form/1/?projects=PHID-PROJ-dgmoevjqeqlerleqzzx5)! Contributing ------------ [](#contributing) We are always delighted when people contribute patches. To setup your development environment: 1. Clone the repo: `$ git clone https://gerrit.wikimedia.org/r/oojs/ui oojs-ui` 2. Move into the library directory: `$ cd oojs-ui` 3. Install [composer](https://getcomposer.org/download/) and make sure running `composer` will execute it (*e.g.* add it to `$PATH` in POSIX environments). 4. Install dev dependencies: `$ npm install` 5. Build the library (you can alternatively use `grunt quick-build` if you don't need to rebuild the PNGs): `$ grunt build` 6. You can see a suite of demos in `/demos` by executing: `$ npm run-script demos` 7. You can also copy the distribution files from the dist directory into your project. 8. You can start a local web server by running `php -S localhost:80` in your root dir. 9. You can navigate to to run the tests locally in your browser. We use [Gerrit](https://gerrit.wikimedia.org/) for code review, and [Phabricator](https://phabricator.wikimedia.org) to track issues. To contribute patches or join discussions all you need is a [developer account](https://wikitech.wikimedia.org/w/index.php?title=Special:CreateAccount&returnto=Help%3AGetting+Started). - If you've found a bug, or wish to request a feature [raise a ticket on Phabricator](https://phabricator.wikimedia.org/maniphest/task/edit/form/1/?projects=PHID-PROJ-dgmoevjqeqlerleqzzx5). - To submit your patch, follow [the "getting started" quick-guide](https://www.mediawiki.org/wiki/Gerrit/Getting_started). We try to review patches within a week. - We automatically lint and style-check changes to JavaScript, PHP, LESS/CSS, Ruby and JSON files. You can test these yourself with `npm test` and `composer test` locally before pushing changes. SVG files should be squashed in advance of committing with [SVGO](https://github.com/svg/svgo) using `svgo --pretty --disable=removeXMLProcInst --disable=cleanupIDs `. A new version of the library is released most weeks on Tuesdays. Community --------- [](#community) Get updates, ask questions and join the discussion with maintainers and contributors: - Join the Wikimedia Developers mailing list, [wikitech-l](https://lists.wikimedia.org/mailman/listinfo/wikitech-l). - Chat with the maintainers on `#wikimedia-dev` on `irc.libera.chat`. - Ask questions on [StackOverflow](https://stackoverflow.com/tags/oojs-ui/info). - Watchlist the [documentation](https://www.mediawiki.org/wiki/OOUI) on MediaWiki to stay updated. Versioning ---------- [](#versioning) We use the [Semantic Versioning guidelines](http://semver.org/). Releases will be numbered in the following format: `..` Release ------- [](#release) ### Prerequisites [](#prerequisites) - [Create an NPM account](https://www.npmjs.com/signup), if you don't have one already - Verify that you can [log into your NPM account](https://www.npmjs.com/login) - Verify that you are [listed as a maintainer](https://www.npmjs.com/package/oojs-ui/access)of the oojs-ui package. If not, ask an existing maintainer to add you. - Make sure that you have two-factor authentication (2FA) set up. - Run `npm login` and follow the steps. You should only need to do this once on each computer. If you're not sure if you've already done this, you can run `npm whoami`; if it prints your NPM username, you're already logged in. - Clone the mediawiki/vendor repository: ### Prepare and submit the release commit [](#prepare-and-submit-the-release-commit) From the root of this repository, update master and check out a new `release` branch: ``` $ git remote update $ git checkout -B release -t origin/master ``` Clean-install npm dependencies, update Composer dependencies, and ensure tests pass: ``` $ npm ci && composer update && npm test && composer test ``` Generate a list of commits that are part of this release: ``` $ git log --format='* %s (%aN)' --no-merges v$(node -e 'console.log(require("./package").version);')...HEAD | grep -v "Localisation updates from" | sort ``` In History.md, add a new heading for this version and date. Copy the list of commits into the new section and sort into five sub-sections, in order, omitting any sub-section that has no commits: ``` ### Breaking changes ### Deprecations ### Features ### Styles ### Code ``` Generate the list of Phabricator tasks for this release. Copy the resulting list and save it for later. In a later step, you will add it to the commit message of the MediaWiki core commit. ``` $ git log --pretty=format:%b v$(node -e 'console.log(require("./package").version);')...HEAD | grep Bug: | sort | uniq ``` Update the version number (in the following command, change 'patch' to 'minor' if you've made breaking changes): ``` $ npm version patch --git-tag-version=false ``` Commit the release and submit to Gerrit. Note that if there is a Phabricator task associated with the release, you should edit the commit to add the bug number before running `git review`. ``` $ git add -u $ git commit -m "Tag v$(node -e 'console.log(require("./package").version);')" $ git review ``` ### Publish the tag and push to NPM [](#publish-the-tag-and-push-to-npm) After the tag commit is merged in this repo, push the tag and publish to NPM: ``` $ git remote update $ git checkout origin/master $ git tag "v$(node -e 'console.log(require("./package").version);')" $ npm run publish-build && git push --tags && npm publish ``` ### Update the mediawiki/vendor repo [](#update-the-mediawikivendor-repo) In your local mediawiki/vendor repo, point composer to the new version and pull in the updated vendor files: ``` # Replace 1.2.34 with the version number of the new release $ composer require oojs/oojs-ui 1.2.34 --no-update $ composer update --no-dev ``` Then commit the changes with the following commit message, replacing 1.2.34 with the new OOUI version number (example: ). ``` $ git add -u $ git commit ``` Commit message format: ``` Update OOUI to v1.2.34 Release notes: https://gerrit.wikimedia.org/g/oojs/ui/+/v1.2.34/History.md ``` Push this to gerrit. Take note of the Change-Id in the commit message. Copy it and save it for later. You will need it for the Depends-On: line in the commit message when updating MediaWiki. ``` $ git review # Show the last commit $ git show --stat ``` ### Update the MediaWiki core repo [](#update-the-mediawiki-core-repo) In your local MediaWiki core repo, open `composer.json` and update the version number of `oojs/oojs-ui` to the new version number. Open `RELEASE-NOTES-1.NN`. If there is already a list item about OOUI, update the latest version number. For example, if there is a list item that says "Updated OOUI from v1.2.0 to v1.2.33", update the latter version number fo `v1.2.34`. If there isn't a list item about OOUI yet, add one in the `Changed external libraries` section. Open `resources/lib/foreign-resources.yaml`. For the OOUI listing, change the `version`, the `purl`, and the `src` URL to use the new version number. Compute the new integrity hash: ``` $ php maintenance/run.php manageForeignResources make-sri ooui # Or if you're running Docker... $ docker compose exec mediawiki php maintenance/run.php manageForeignResources make-sri ooui ``` Then update the OOUI library files: ``` $ php maintenance/run.php manageForeignResources update ooui # Or if you're running Docker... $ docker compose exec mediawiki php maintenance/run.php manageForeignResources update ooui ``` Then run the following command to update `foreign-resources.cdx.json`: ``` $ php maintenance/run.php manageForeignResources make-cdx # Or if you're running Docker... $ docker compose exec mediawiki php maintenance/run.php manageForeignResources make-cdx ``` Then commit the changes with the following commit message, replacing 1.2.34 with the new OOUI version number: ``` $ git add -u $ git commit ``` Commit message format, where the list of bugs is the list you generated during the OOUI tag step, and Depends-On is set to the Change-Id of the mediawiki/vendor commit: ``` Update OOUI to v1.2.34 Release notes: https://gerrit.wikimedia.org/g/oojs/ui/+/v1.2.34/History.md Bug: T123456 Bug: T234567 Depends-On: I12345678901234567890 ``` Then push that commit to gerrit: ``` git review ``` ### Update the VisualEditor/VisualEditor repo [](#update-the-visualeditorvisualeditor-repo) In your local VisualEditor/VisualEditor repo, run the script to create a commit updating the local copy of OOUI, and push the commit to Gerrit: ``` $ ./bin/update-ooui.sh $ git review ``` ### Health Score 65 — FairBetter than 99% of packages Maintenance81 Actively maintained with recent releases Popularity53 Moderate usage in the ecosystem Community32 Small or concentrated contributor base Maturity81 Battle-tested with a long release history Bus Factor3 3 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~16 days Recently: every ~74 days Total 240 Last Release 153d ago PHP version history (7 changes)v0.2.0PHP >=5.3.2 v0.2.1PHP >=5.3.3 v0.16.0PHP >=5.5.9 v0.29.0PHP >=5.6.99 v0.36.0PHP >=7.2.9 v0.46.0PHP >=7.4.3 v0.52.0PHP >=8.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/b94d9718c06ec7c3fd7a104bc44966fb7464b9ec7411582343ea35a7a6a85f08?d=identicon)[mediawiki](/maintainers/mediawiki) ![](https://www.gravatar.com/avatar/716c86d71cbf921e7912a505f89d799de398fc0a3af0bd4c8862834b2d642bd7?d=identicon)[wikimedia](/maintainers/wikimedia) --- Top Contributors [![Volker-E](https://avatars.githubusercontent.com/u/619536?v=4)](https://github.com/Volker-E "Volker-E (1022 commits)")[![MatmaRex](https://avatars.githubusercontent.com/u/160413?v=4)](https://github.com/MatmaRex "MatmaRex (1007 commits)")[![translatewiki](https://avatars.githubusercontent.com/u/24829418?v=4)](https://github.com/translatewiki "translatewiki (710 commits)")[![edg2s](https://avatars.githubusercontent.com/u/180672?v=4)](https://github.com/edg2s "edg2s (692 commits)")[![jdforrester](https://avatars.githubusercontent.com/u/881572?v=4)](https://github.com/jdforrester "jdforrester (570 commits)")[![trevorparscal](https://avatars.githubusercontent.com/u/108389?v=4)](https://github.com/trevorparscal "trevorparscal (336 commits)")[![catrope](https://avatars.githubusercontent.com/u/260792?v=4)](https://github.com/catrope "catrope (199 commits)")[![prtksxna](https://avatars.githubusercontent.com/u/9491?v=4)](https://github.com/prtksxna "prtksxna (167 commits)")[![Krinkle](https://avatars.githubusercontent.com/u/156867?v=4)](https://github.com/Krinkle "Krinkle (145 commits)")[![thiemowmde](https://avatars.githubusercontent.com/u/6576639?v=4)](https://github.com/thiemowmde "thiemowmde (127 commits)")[![mooeypoo](https://avatars.githubusercontent.com/u/261238?v=4)](https://github.com/mooeypoo "mooeypoo (85 commits)")[![legoktm](https://avatars.githubusercontent.com/u/81392?v=4)](https://github.com/legoktm "legoktm (57 commits)")[![Krenair](https://avatars.githubusercontent.com/u/826662?v=4)](https://github.com/Krenair "Krenair (33 commits)")[![Tchanders](https://avatars.githubusercontent.com/u/10440647?v=4)](https://github.com/Tchanders "Tchanders (32 commits)")[![kemayo](https://avatars.githubusercontent.com/u/2187?v=4)](https://github.com/kemayo "kemayo (27 commits)")[![umherirrender](https://avatars.githubusercontent.com/u/1174884?v=4)](https://github.com/umherirrender "umherirrender (25 commits)")[![ricordisamoa](https://avatars.githubusercontent.com/u/4588496?v=4)](https://github.com/ricordisamoa "ricordisamoa (17 commits)")[![cscott](https://avatars.githubusercontent.com/u/156080?v=4)](https://github.com/cscott "cscott (17 commits)")[![paladox](https://avatars.githubusercontent.com/u/5727000?v=4)](https://github.com/paladox "paladox (15 commits)")[![zeljkofilipin](https://avatars.githubusercontent.com/u/23927?v=4)](https://github.com/zeljkofilipin "zeljkofilipin (13 commits)") ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/oojs-oojs-ui/health.svg) ``` [![Health](https://phpackages.com/badges/oojs-oojs-ui/health.svg)](https://phpackages.com/packages/oojs-oojs-ui) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)