Build and showcase your react components in isolation

npm install @vitro/docs.macro@0.0.83



this project is under heavy development

Differences with story book

  • No addons, if you want more features open a pull request here, we want a cohesive and coherent code base
  • Many features inherited from next.js like
    • Zero config typescript, babel, css support
    • Incremental compilation
    • React Fast refresh
    • Awesome Nextjs plugins like next-transpile-modules, next-images and more
    • SSR

Features missing from storybook (in progress)

  • Viewport sizing
  • Display source code

Addons that won't be implemented

  • Actions
  • Knobs
  • Docs
  • Console
  • Links
  • Props

Things to do

  • next run on top directory, this way urls are clickable in vscode
  • sidebar in safari has zindex too high
  • rename stories, storyExports to files, fileExports
  • render components inside iframe when specified, to not let css files modify the UI (or maybe render my UI inside iframes)
  • add a globalCSS options to pass an array of css files to include in global scope, this way people can use tailwind for example
  • add the next css plugin to let users import css files that are not css modules
  • dark mode
  • use more complex @/ because user could be using it already
  • store columns count in localstorage so columns count remains between page changes
  • dont recreate the stories if already present when running start (because mac and vscode go crazy)
  • reset render count to zero when rendering above profiler
  • enable the paths inspection compiled only if --verbose (also make it a separate package)
  • investigate if doing SSR or not
  • throttle the search bar
  • check that the global wrapper is a component before using it and give an error if not
  • make the sidebar fixed and scrollable
  • add a error boundary to every story block and display a pretty error
  • catch errors in server, wait for
  • add max zIndex to story toolbar (no this way is difficult to cover them with overlay in full screen)
  • investigate if the render count is accurate given that the profiler is parent of Component
  • make the profiler id unique adding the filename path to it
  • investigate slow startup time, try to optimize the regex and context.require flow
  • exit from full screen with esc key
  • CSS debug (injects border to every div, to see all components outlines)
  • Open in Vscode (via url with vscode://file)
  • see render counts and time
  • view in Full screen
  • better multi columns support
  • fix the path functions that rely on unix paths, check if runs on windows
  • remove as much logic as possible from the .vitro folder, move it to dependency package
  • move UI components to vitro-ui package
  • when generating the .vitro add a version file with the current version
  • remove the new command, the default command checks if a vitro.config.js exists, if not asks if user wants to create .vitro and config (or errors if not tty)
  • the start command keeps the .vitro updated running the new command when it sees that its version is greater than the generated one
  • the profiler does not run on hydration, maybe disable it when in production
  • no more needed, support for multiple globs paths adding more context.require (up to 10)
  • add emotion to aliases
  • add a button to make a block full screen
  • remove render counts and time on small blocks
  • how to easily deploy a storyboard to a subpath together with other nextjs apps? maybe wait for
  • how to pass a custom tsconfig, babel? maybe add a babelPath and tsconfigPath and copy these on the vitro new and start command


  • offer a pro managed service that
    • notifies vai email on components visual changes
    • notifies on broken components
    • tells you the average, value over time of web vitals of every component (render time, count, accessibility, )
    • bundle size over time