Playland
A React document tool.
Features
- Zero config
- React
- TypeScript
- PostCSS, CSS Modules
- MDX (front matter, table of contents, syntax highlighting)
Install
npm i playland --save-dev
# Or
# yarn add playland --dev
Usage
File structures
Use md/mdx docs, see examples/basic:
.
├── README.md
├── package.json
└── docs # mdx pages
├── Foo.mdx
└── Bar.mdxUse jsx docs, see examples/with-jsx-pages:
.
├── .playland
│ └── config.js
├── README.md
├── package.json
├── docs # mdx pages
│ ├── Foo.mdx
│ └── bar.mdx
└── api # jsx pages
├── FooPage.jsx
└── BarPage.jsxConfig file
Optional .playland/config.js:
/** @type {import('playland/types/cli').UserConfig} */
module.exports = {
vite(config) {},
}Optional index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script type="module">
import React from 'react'
import ReactDOM from 'react-dom'
import {App} from 'playland/theme'
const entries = import.meta.glob(['./**/*.{mdx,md}'], {eager: true})
ReactDOM.render(
React.createElement(App, {entries}),
document.getElementById('root')
)
</script>
</body>
</html>Scripts
Add npm scripts to package.json:
{
...
"scripts": {
"start": "playland start",
"build": "playland build"
}
}