papyrum: A TypeScript repository from renaco

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 .mdx documentation 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

npm run dev

Add Papyrum to an existing project

You just need to install the command line tool:

yarn add @papyrum/cli

npm install @papyrum/cli

Then create an .mdx file:

---
route: /
name: Hello world
---

# Hi!
___

Hello world with mdx

Finally run:

yarn dev

npm run dev

Examples