whatisgithub

What is mfe-canvas?

lucamezzalira/mfe-canvas — explained in plain English

Analysis updated 2026-05-18

35Audience · pm founderComplexity · 1/5LicenseSetup · easy

In one sentence

A one-page worksheet template for planning and documenting the boundaries and ownership of a micro-frontend.

Mindmap

mindmap
  root((MFE Canvas))
    What it does
      Documents micro-frontend boundaries
      Worksheet not code
      Workshop or async fill-in
    Tech stack
      PDF guide
      Markdown template
      Example canvases
    Use cases
      Pre-build planning workshop
      Post-build boundary audit
      AI assistant context
    Audience
      Product managers
      Tech leads

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Run a team workshop to define a new micro-frontend's boundaries before building it.

USE CASE 2

Audit an existing micro-frontend to check whether its ownership matches what was planned.

USE CASE 3

Use a filled-in canvas as structured context for an AI coding assistant.

How does it compare?

lucamezzalira/mfe-canvasalexzielenski/black-mac-os-xamyraxvpn-main/amyraxvpn-relay
Stars353535
LanguageObjective-CHTML
Last pushed2011-04-12
MaintenanceDormant
Setup difficultyeasymoderateeasy
Complexity1/53/52/5
Audiencepm founderdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Non-code repository, template is licensed for non-commercial use only under Creative Commons.

So what is it?

The Micro-Frontend Canvas is a one-page structured document template for software teams who split their web applications into independently developed pieces, a pattern called micro-frontends. Each piece of the application is its own small project owned by a separate team, and the canvas is a worksheet for thinking through what that piece does, where its edges are, how it talks to other pieces, who owns it, and what risks it carries. The idea is to fill out one canvas per micro-frontend, either before building it to force the team to make decisions upfront, or after the fact to audit whether the boundaries and ownership actually match what was planned. The README describes two main workflows: a half-day workshop where the team prints the blank canvas and works through it together, or an async approach where a tech lead fills it to 90 percent and the team reviews it together afterward. The repository itself is mostly documentation rather than code. It contains a PDF guide with a blank template and worked examples, a Markdown version of the template you can copy directly into your project repository, and several filled-in example canvases covering an e-commerce checkout flow and an e-learning video player. Community-contributed examples are also welcome. The README distinguishes the canvas from a regular README file: the canvas captures why a micro-frontend exists and what decisions were made about its boundaries, while the README captures how to set it up and work on it day to day. The canvas changes infrequently, the README changes often. Both live in the repository together. There is also a section on using the completed canvas as context for AI coding assistants, where providing structured boundary and constraint information is described as improving code generation quality compared to vague prompts. The author is Luca Mezzalira, who wrote the O'Reilly book on micro-frontends. The template is licensed for non-commercial use under Creative Commons.

Copy-paste prompts

Prompt 1
Walk me through filling out the Micro-Frontend Canvas for a checkout flow I'm planning.
Prompt 2
Explain the difference between the Micro-Frontend Canvas and a regular README.
Prompt 3
Help me run a half-day workshop using this canvas template with my team.
Prompt 4
Show me the example e-commerce checkout canvas included in this repository.

Frequently asked questions

What is mfe-canvas?

A one-page worksheet template for planning and documenting the boundaries and ownership of a micro-frontend.

How hard is mfe-canvas to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is mfe-canvas for?

Mainly pm founder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.