Papyrum is a tool that will help you document your design system or library of components based on React.
Features
- Zero config
- MDX based, builds documentation with the markdown of the component era.
- Typescript support
- Syntax highlighting with Prism React Renderer.
Start a new project
Papyrum brings with it a command that will help you build your project based on templates.
npx @papyrum/cli new [name] [template]For example:
npx @papyrum/cli new my-website basic
| Template | Description |
|---|---|
basic |
Basic template |
typescript |
Basic template with typescript |
Project structure
my-website
├── docs
│ ├── Introduction.mdx
│ └── Button.mdx
├── src
│ └── components
├── static
│ └── img
│ ├── favicon.ico
│ └── logo.svg
├── package.json
├── .editorconfig
├── papyrum.config.js
└── yarn.lock
Structure summary
docs: Folder where our.mdxdocumentation files are hosted.src: Ffolder where the components to be built are stored, in the case of building a component library.static: Default place where static files will be served.papyrum.config.js: Papyrum settings.
Now execute this command to be able to raise a development server that will listen to your changes as you develop.
yarn dev
or
npm run dev
Add Papyrum to an existing project
You just need to install the command line tool:
yarn add @papyrum/cli
or
npm install @papyrum/cli
Then create an .mdx file:
---
route: /
name: Hello world
---
# Hi!
___
Hello world with mdx
Finally run:
yarn dev
or
npm run dev
Examples
If you have any suggestion of a feature or feedback please do not hesitate to create a issue.