Skip to content

Add md-react-preview for doc preview#250

Open
IzumiSy wants to merge 1 commit into
mainfrom
docs_markdown_preview
Open

Add md-react-preview for doc preview#250
IzumiSy wants to merge 1 commit into
mainfrom
docs_markdown_preview

Conversation

@IzumiSy
Copy link
Copy Markdown
Contributor

@IzumiSy IzumiSy commented May 13, 2026

Summary

Integrate md-react-preview (@izumisy/md-react-preview@^0.2.0) to provide live interactive previews for component documentation pages.

Background

AppShell's component catalog is managed and published as unified documentation on docs.tailor.tech. The data source for docs.tailor.tech is the Markdown files under the docs/ directory in this repository, which are synced to VitePress for rendering.

We also want to provide Storybook-like live component previews on docs.tailor.tech. However, since the documentation is authored in the AppShell repository but served from a separate site (docs.tailor.tech), we needed a streamlined process to deliver a consistent preview experience across both environments.

To solve this, we built md-react-preview (mrp). mrp provides both a Vite plugin and a VitePress plugin that share the same preview rendering core, enabling:

  • AppShell repository: Run pnpm docs:preview to preview documentation locally
  • docs.tailor.tech: The same previews are rendered in production via the VitePress plugin

This allows documentation authors to simply write preview code in Markdown and get identical results both locally and in production.

Changes

  • Added @izumisy/md-react-preview (^0.2.0) and @tailwindcss/vite as dev dependencies
  • Added mrp.config.ts — configures md-react-preview to scan docs/components/**/*.md with AppShell's CSS
  • Added docs:preview script — runs mrp dev to start the documentation preview server
  • Updated all component docs (docs/components/*.md) to use the new preview block syntax:
    • Preview code blocks now use export default (...) instead of bare JSX / ;-prefixed expressions
    • Multi-element previews are wrapped in <>...</> fragments
    • Removed semicolons from import statements inside preview blocks
  • Minor doc cleanups — removed redundant import sections and trimmed unnecessary content from some component pages

How to test

pnpm install
pnpm docs:preview

@IzumiSy IzumiSy force-pushed the docs_markdown_preview branch from f8ebf4e to a1a0882 Compare May 13, 2026 06:59
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 13, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@tailor-platform/app-shell@250
npm i https://pkg.pr.new/@tailor-platform/app-shell-sdk-plugin@250
npm i https://pkg.pr.new/@tailor-platform/app-shell-vite-plugin@250

commit: a1a0882

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