Note

This is an experimental project that's used internally at Wikimedia to create prototypes for research, testing, exploration, thought experiments, and fun. You are welcome to explore it and try it out too.

ProtoWiki

This repo is an experimental collection of resources for prototyping within the Wiki ecosystem. It contains two things:

1. A big list of links to many resources and tools that you can use.
2. A prototyping system itself for making minimal prototypes.

We'd love to hear from you. Have some feedback? Have a suggestion? Found a bug?
In all cases, please feel free to let us know.

Resources

Tip

This is the big list of resources. For the prototyping system itself, scroll down.

Prototype templates

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 and list of resources.
• 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 :)
• Minerva Prototypes — Prototyping system for reading experiences on mobile web.

Agent skills

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."

Packages

• 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, but you can try it out if you feel adventurous!

References

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 fakewiki package.
• FakeWiki LLMs.txt — Intended for AI agents: A list of methods and composables exported from the fakewiki package.
• FakeWiki Reference — Intended for humans: A list of methods and composables exported from the fakewiki package.

Prototyping system

Tip

Either follow these instructions, or ask an AI agent to follow them for you.

ProtoWiki's prototyping system tries to make things simpler and faster (and more on-design) by bringing you a preconfigured environment with sensible defaults. It comes with Codex installed and all the right styles for a Wikipedia-ish look. It also contains a growing collection of components and templates for commonly prototyped pages. And it does various things automatically that you'll probably need, like deploying.

There are also many skills within the repo that agents can use to navigate all of this, including how to use Codex properly, how to use ProtoWiki, how to get live data from wikis, and more.

Getting started

To run ProtoWiki locally, click "Use as template" on this repo, then clone your copy.

Then install dependencies and run the dev server:

npm install
npm run dev

Then open localhost:5173 in your browser.

Creating a prototype

1. Make a new folder in the prototypes folder.
2. Put an index.vue file in the folder containing your prototype.
3. 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.

Trouble-shooting: If it doesn't appear at first or you see a blank screen, try restarting the dev server. If you don't know how to do this, ask a friendly human or AI agent to help you.

Deploying a prototype

ProtoWiki gets deployed when you commit to the main branch.
It's available at [your-username].github.io/[your-copy-name]
For example: wikimedia.github.io/ProtoWiki.
You might need to enable actions within the actions tab of your repo to get this to work.

Alternatively, when you create a pull request on your copy, a preview gets deployed. Here's an example.
This is great because it also creates a QR code that people can use to try the prototype on their phone.

Planned features

• Visual editor prototyping support #15
• Helpers for accessing real data #21

To see more planned work, check out the issues.