Playland

A React components dev tool.

Goals

• 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 a separated pages folder, see examples/basic:

.
├── .playland
│   ├── app.js # export app components, required
│   └── config.js # server config, optional
├── README.md
├── docs # playland pages
│   └── ButtonPage.js
├── package.json
└── src
    └── Button
        ├── Button.js
        ├── Button.md
        └── index.js

Or use a single source folder, see examples/with-mdx:

.
├── .playland
│   └── app.js
├── README.md
├── package.json
└── src
    ├── Button.js
    └── Button.mdx # playland page

Config file

Optional .playland/config.js:

module.exports = {
  title: 'Play',
  home: '🏠',
  port: 10100,
  webpack: config => config,
}

Scripts

Add npm scripts to package.json:

{
  ...
  "scripts": {
    "start": "playland",
    "build": "playland --build"
  }
}