\n\n[Papyrum](https://papyrum.site/) is a tool that will help you document your design system or library of components based on [React](https://reactjs.org/).\n\n## Features\n\n- Zero config\n- [MDX based](https://mdxjs.com/), builds documentation with the markdown of the component era.\n- Typescript support\n- Syntax highlighting with [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer).\n\n
\n \n
\n\n## Start a new project\n\nPapyrum brings with it a command that will help you build your project based on templates.\n\n```bash\nnpx @papyrum/cli new [name] [template]\n```\n\nFor example:\n\n```bash\nnpx @papyrum/cli new my-website basic\n\n```\n\n| Template | Description |\n| ------------- | ------------- |\n| `basic` | Basic template |\n| `typescript` | Basic template with typescript |\n\n### Project structure\n\n```\nmy-website\n├── docs\n│ ├── Introduction.mdx\n│ └── Button.mdx\n├── src\n│ └── components\n├── static\n│ └── img\n│ ├── favicon.ico\n│ └── logo.svg\n├── package.json\n├── .editorconfig\n├── papyrum.config.js\n└── yarn.lock\n```\n\n### Structure summary\n\n- `docs` : Folder where our `.mdx` documentation files are hosted.\n- `src` : Ffolder where the components to be built are stored, in the case of building a component library.\n- `static` : Default place where static files will be served.\n- `papyrum.config.js` : Papyrum settings.\n\nNow execute this command to be able to raise a development server that will listen to your changes as you develop.\n\n```\nyarn dev\n```\n\nor\n\n```\nnpm run dev\n```\n\n## Add Papyrum to an existing project\n\nYou just need to install the command line tool:\n\n```\nyarn add @papyrum/cli\n```\n\nor\n\n```\nnpm install @papyrum/cli\n```\n\nThen create an `.mdx` file:\n\n```\n---\nroute: /\nname: Hello world\n---\n\n# Hi!\n___\n\nHello world with mdx\n```\n\nFinally run:\n\n```\nyarn dev\n```\n\nor\n\n```\nnpm run dev\n```\n\n## Examples\n\n- [Basic](https://github.com/wilsson/papyrum/tree/master/examples/basic)\n- [With typescript](https://github.com/wilsson/papyrum/tree/master/examples/typescript)\n\nIf you have any suggestion of a feature or feedback please do not hesitate to create a [issue](https://github.com/wilsson/papyrum/issues).","readmeFilename":"README.md","keywords":["documentation","react"]}
![](\"https://user-images.githubusercontent.com/4754339/71502967-1a73bf80-2841-11ea-9add-13cd5bd905dd.png\")
\n![](\"https://user-images.githubusercontent.com/4754339/91013125-d80ba980-e5ac-11ea-805d-0361ece616cd.png\")
\n