Uibook

Name: uibook
Rating: 5 (226 reviews)
Author: vrizo

Uibook is a tool for visual testing of React components. It lets you quickly check both desktop and mobile views of your components with real media queries and different combinations of props.

The Key Features:

Responsive Testing for developers to play with real media queries
Live Text Editing for designers and editors to check their content
Installed as a Webpack Plugin, it doesn’t require any additional builder.

:triangular_flag_on_post: Check the Uibook demo project here: https://uibook.vrizo.net/.

Usage

Quick Install :hatching_chick:

We’ve designed Uibook for seamless integration into your project. Install it as a webpack plugin, and you’re all set: Uibook doesn’t require any separate bundler.

_webpack.config.js_

const UibookPlugin = require('uibook/plugin')module.exports = {
  …
  plugins: [
    new UibookPlugin({
      outputPath: '/uibook',
      controller: path.join(__dirname, '../src/uibook-controller.js'),
      hot: true
    })
  ],
}

Describe components in Pages :hatched_chick:

You should define two things only:

The Page — simple object with test component name and cases;
The Case — set of props and callbacks to the component.

_button.uibook.js_

import UibookCase from 'uibook/case'
import Button from '../src/button'export default {
  component: Button,
  cases: [
    () => Button,
    () => Small button
  ]
}

Pass Pages to the Controller :baby_chick:

As soon as you finish your first Uibook Page, you’re ready to write the Uibook Controller. This is where all Pages are included and passed to UibookStarter :sparkles:

_uibook-controller.js_

import UibookStarter from 'uibook/starter'
import ButtonUibook from './button.uibook'export default UibookStarter({
  pages: {
    Button: ButtonUibook
  }
})

Launch :rocket:

There is no need for any additional servers or webpack instances. Uibook integrates into your project, so just run your bundler and open /uibook (or your custom address — outputPath) in a browser.

More information

Live Text Editing

This mode enables contentEditable for each case, allowing managers, designers and interface editors to preview content in components.

Text Edit Mode

Special thanks

Anyone is welcome to contribute, you can check current tasks in PLAN.md. I would be glad to answer your questions about the project.

--- Tranlated By Open Ai Tx | Last indexed: 2026-03-26 ---