This repo is an experimental collection of resources for MediaWiki prototyping. It contains many links to many tools you can use. It's also an unopinionated prototyping template itself for minimal prototypes.
You can see it at wikimedia.github.io/ProtoWiki.
Depending on what you're trying to prototype, you might want to consider using one of these templates or systems.
- ProtoWiki — This repo! An unopinionated prototyping system for MediaWiki.
- Wikipedia Article Template - "Interactive UX prototype template for Wikipedia article pages, built with Vue 3 and Wikimedia Codex design system."
- Suggestion Mode Template - "Interactive UX prototype showing the Suggestion Mode feature in the edit mode of a Wikipedia's article."
- Wikihack Starter — "A Vue 3 prototyping environment for experimenting with Wikipedia reader features. Built for hackathons and rapid iteration, this starter kit lets you test new UI ideas in front of real users with minimal setup."
- FakeMediaWiki System — "An opinonated system for building lightweight MediaWiki prototypes. I should probably give it a better name."
- Wikipedia Boilerplate — "Rapid prototyping framework for Wikipedia UX design work."
- Amin's monorepo. You'll have to ask Amin for access :)
Skills that you can ask an AI agent to copy and use.
- ProtoWiki Skills — "Skills for MediaWiki prototyping."
- Wiki Skills — "A collection of skills for AI coding agents focused on Wikimedia projects."
- Codex package — The Wikimedia Codex design system. You'll want to use this!
- FakeWiki package — Used within FakeMediaWiki, it contains methods for using various MediaWiki APIs and common prototyping patterns. Highly experimental to use this outside of FakeMediaWiki, but you can try it out if you feel adventurous!
Lists of APIs you can use within prototypes.
- Wiki Signals — "Guidance for using real MediaWiki data in prototypes."
- FakeWiki Playground — Explore every function from the
fakewikipackage. - FakeWiki LLMs.txt — Intended for AI agents: A list of methods and composables exported from the
fakewikipackage. - FakeWiki Reference — Intended for humans: A list of methods and composables exported from the
fakewikipackage.
Either follow these instructions, or ask an AI agent to follow them for you!
To run ProtoWiki locally, clone this repo or fork it to use it as a template.
Then install dependencies and run the dev server:
npm install
npm run devThen open localhost:5173 in your browser.
You do not need npm run build for local prototyping — CI builds when you push.
Production: wikimedia.github.io/ProtoWiki (push to main).
PR previews deploy to GitHub Pages automatically when you open a pull request in your fork (e.g. feature → main on youruser/ProtoWiki). One-time on the fork: enable Pages → Deploy from branch → gh-pages, and Actions → Read and write permissions. The preview URL is posted as a comment on the PR.
Full steps, fork setup, and troubleshooting: .agents/skills/protowiki-deploy/SKILL.md.
- Make a new folder in the
prototypesfolder. - Put an
index.vuefile in the folder containing your prototype. - Click your prototype from the home page!
I recommend copying one of the template-* prototypes as a starting point. For example, copy+paste template-chrome, give it a new folder name, and change its title and description inside its index.vue file. For article HTML you write yourself in Vue (infobox + sections, no live fetch or snapshot file), use template-article-custom as the reference — see .agents/skills/protowiki-components/references/article.md. For dashboard / newcomer homepage layouts, use template-dashboard (minimal module boxes) or template-homepage (mentor, impact, and help modules).
Trouble-shooting: If it doesn't appear at first or you see a blank screeen, try restarting the dev server. If you don't know how to do this, ask a friendly human or AI agent to help you.
Chat to me (Lu Wilson) on Slack! or lwilson-ctr on the wikis!
This is all very experimental and exploratory. Thank you for being part of this.