Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wilsson/papyrum
Papyrum is a tool that will help you in the creation of your design system, style guide or in the documentation of your project based on react
https://github.com/wilsson/papyrum
design-systems docs documentation react styleguide ui zero-configuration
Last synced: 12 days ago
JSON representation
Papyrum is a tool that will help you in the creation of your design system, style guide or in the documentation of your project based on react
- Host: GitHub
- URL: https://github.com/wilsson/papyrum
- Owner: wilsson
- License: mit
- Created: 2019-02-13T23:22:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-19T15:22:06.000Z (about 1 year ago)
- Last Synced: 2024-10-31T23:31:24.323Z (19 days ago)
- Topics: design-systems, docs, documentation, react, styleguide, ui, zero-configuration
- Language: TypeScript
- Homepage: https://papyrum.site/
- Size: 1.2 MB
- Stars: 20
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[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/).
## Features
- Zero config
- [MDX based](https://mdxjs.com/), builds documentation with the markdown of the component era.
- Typescript support
- Syntax highlighting with [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer).
## Start a new project
Papyrum brings with it a command that will help you build your project based on templates.
```bash
npx @papyrum/cli new [name] [template]
```
For example:
```bash
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
```
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
- [Basic](https://github.com/wilsson/papyrum/tree/master/examples/basic)
- [With typescript](https://github.com/wilsson/papyrum/tree/master/examples/typescript)
If you have any suggestion of a feature or feedback please do not hesitate to create a [issue](https://github.com/wilsson/papyrum/issues).