whatisgithub

What is dumi?

umijs/dumi — explained in plain English

Analysis updated 2026-06-26

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

In one sentence

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

What do people build with it?

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.

What is it built with?

JavaScriptUmiJSMarkdown

How does it compare?

umijs/dumikurolabs/stegcloakmarkmarkoh/datamaps
Stars3,7973,7973,797
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedeveloperdeveloperdeveloper

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

How do you get 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.

So what is it?

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.

Frequently asked questions

What is dumi?

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

What language is dumi written in?

Mainly JavaScript. The stack also includes JavaScript, UmiJS, Markdown.

What license does dumi use?

Use freely for any purpose, including commercial projects, with no restrictions beyond keeping the copyright notice.

How hard is dumi to set up?

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

Who is dumi for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?