Zero-config React component development server


1.0.374 years ago4 years agoMinified + gzip package size for @compositor/kit-dev in KB


Kit dev server

Isolated development server for React components

  • Zero configuration
  • Hot reloading
  • No entry point or HTML required
  • Isolated from your main application
  • Renders components and elements
  • Supports MDX & JSX formats
npm i -g @compositor/kit-cli

Start the dev server by passing a directory of components as the first argument.

kit examples


-o --open     Opens development server in default browser
-p --port     Port for development server
-m --mode     Enable alternative server UI modes
--webpack     Path to custom webpack.config.js

To see available options, run:

kit --help

All command line options can be set in your package.json file with a kit field.

  "kit": {
    "port": 9000,
    "open": true


By default, the Kit dev server renders each component in isolation with minimal base styling for the document. Use the --mode flag to enable alternative modes for the development UI.

Library Mode

Renders components using the Kit Library component component, which displays all components together in a grid and in isolation when clicked.

kit examples --mode library

File Types


The Kit dev server includes experimental support for special .mdx and .jsx file types.


Example .mdx file

import { Box, Heading, Text } from './_scope'

# Markdown syntax works

<Box p={3} color='tomato'>
  <Heading fontSize={5}>
    Inline JSX syntax works as well


The JSX format uses front matter to set default props for the rendered component. To provide components in scope, use the scope option in front-matter and include a JavaScript import statment.

Example .jsx file

title: Hello
scope: import scope from './_scope'
<Box p={3} color='tomato'>
  <Heading fontSize={5}>

Made by Compositor | MIT License

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.