Skip to content

Add vitepress-md-react-preview plugin for interactive UI component preview#114

Closed
IzumiSy wants to merge 3 commits into
mainfrom
use_mrp
Closed

Add vitepress-md-react-preview plugin for interactive UI component preview#114
IzumiSy wants to merge 3 commits into
mainfrom
use_mrp

Conversation

@IzumiSy
Copy link
Copy Markdown

@IzumiSy IzumiSy commented May 13, 2026

Summary

Integrate md-react-preview (mrp) into docs.tailor.tech to provide live interactive previews for AppShell component documentation pages.

Background

AppShell's component documentation is authored as Markdown in the app-shell repository and synced to this repository (docs.tailor.tech) for rendering with VitePress.

In tailor-platform/app-shell#250, mrp was integrated on the AppShell side to enable local component preview via pnpm docs:preview. This PR is the counterpart on the docs.tailor.tech side — it adds the VitePress plugin so that the same preview blocks render as live interactive components in production.

What is mrp?

md-react-preview (mrp) is a toolchain that enables Storybook-like live React component previews directly inside Markdown documentation. It provides both a Vite plugin and a VitePress plugin sharing the same rendering core:

  • AppShell repository: Authors run pnpm docs:preview to preview documentation locally (via mrp dev)
  • docs.tailor.tech: The same previews are rendered in production via the VitePress plugin (@izumisy/vitepress-plugin-react-preview)

This allows documentation authors to write ```tsx preview code blocks in Markdown and get identical interactive results both locally and in production.

Changes

  • Added @izumisy/vitepress-plugin-react-preview (^0.3.0), @tailor-platform/app-shell, react, and react-dom as dev dependencies
  • Configured mrp in .vitepress/config.mts — registers the Vite plugin and markdown-it plugin with AppShell's CSS (@tailor-platform/app-shell/styles)
  • Registered PreviewBlock Vue component globally in .vitepress/theme/index.ts
  • Updated docs/app-shell/components/button.md to use the new preview fence syntax (export default (...) with fragment wrappers)

How to test

pnpm install
pnpm dev

Open http://localhost:5173/app-shell/components/button and verify that the "Basic Usage" section renders live interactive Button components.

@IzumiSy IzumiSy changed the title Add vitepress-md-react-preview plugin Add vitepress-md-react-preview plugin for interactive UI component preview May 13, 2026
@IzumiSy IzumiSy marked this pull request as ready for review May 13, 2026 09:32
@IzumiSy IzumiSy requested a review from a team as a code owner May 13, 2026 09:32
@IzumiSy IzumiSy closed this May 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant