explaingit

umijs/dumi

★ 3,797JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A tool that turns your component library's code and markdown files into a polished documentation website with live interactive examples, ready to publish.

Mindmap

mindmap
  root((dumi))
    What it does
      Generate docs site
      Live component demos
      Static site output
    Tech stack
      JavaScript
      Markdown files
      UmiJS ecosystem
    Use cases
      Component libraries
      Design systems
      Open source docs
    Audience
      Frontend developers
      Library authors
Click or tap to explore — scroll the page freely

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

Things people build with this

USE CASE 1

Generate a documentation website for your React component library that shows live code examples alongside written docs.

USE CASE 2

Write markdown files next to your components and publish them as a searchable static site.

USE CASE 3

Build an open-source design system with documentation that lets users try components in the browser.

Tech stack

JavaScriptUmiJSMarkdown

Getting it running

Difficulty · easy Time to first run · 30min
Use freely for any purpose, including commercial projects, with no restrictions beyond keeping the copyright notice.

In plain English

Dumi is a tool for generating documentation websites from component library code. When developers build reusable UI components, they need a way to write documentation and show live examples alongside the code itself. Dumi handles that by turning markdown files and component files into a static website that can be published and browsed. The project is part of the UmiJS ecosystem, a set of JavaScript tooling maintained primarily by Ant Group. The README is very brief and points to an external documentation site for full usage guides and examples. The project is licensed under MIT.

Copy-paste prompts

Prompt 1
I'm building a React component library and want to use dumi. Help me set up the project structure, configure dumi, and create my first component doc page with a live example.
Prompt 2
Show me how to add a live code playground in dumi docs for a Button component so readers can edit and run the example in the browser.
Prompt 3
How do I deploy my dumi-generated documentation site to GitHub Pages using GitHub Actions?
Prompt 4
I want to add a custom theme to my dumi documentation site. Walk me through how theming works and what files I need to create.
Prompt 5
My dumi site is showing a blank page after building. Help me debug common build errors in dumi projects.
Open on GitHub → Explain another repo

← umijs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.