Skip to content

Add local demo app for previewing the builder - #1

Merged
zhawtof merged 1 commit into
mainfrom
claude/kind-davinci-0964c8
May 15, 2026
Merged

Add local demo app for previewing the builder#1
zhawtof merged 1 commit into
mainfrom
claude/kind-davinci-0964c8

Conversation

@zhawtof

@zhawtof zhawtof commented May 15, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Adds a Vite + React demo app under demo/ so the library can be exercised in a browser without publishing or wiring up the full template repo.
  • The demo imports BlockKitBuilder directly from src/index.ts via a Vite alias — edits to library source hot-reload in the demo.
  • Mocks loadChannels, loadSendAsUserStatus, and onSend so the palette → surface → send-dialog flow works end-to-end without a backend.
  • Adds .claude/launch.json so the Claude Code preview tool can boot the server on port 5173.

Why

There was no first-party way to render the component locally — the closest thing is the external block-kit-builder-template repo, which couples preview to a full Cloudflare Workers + slack-hono backend. That's heavy for iterating on the builder itself.

This adds a minimal in-tree harness for fast visual iteration, similar in spirit to a Storybook setup but cheaper.

Notes for reviewers

  • The demo is a separate package (demo/package.json) with its own node_modules so library devDependencies don't grow.
  • The Vite alias means library source changes hot-reload; you do not need to run pnpm build in the root to see updates.
  • Demo styles include a default shadcn token set (--background, --primary, etc.) since the library only declares fallbacks.
  • demo/pnpm-workspace.yaml was generated by pnpm approve-builds esbuild and is needed so a fresh pnpm install in demo/ doesn't error on pnpm 11's ignored-builds check.

Test plan

  • cd demo && pnpm install succeeds on a clean checkout
  • pnpm --dir demo dev starts on port 5173
  • Builder renders with the seeded header/section/divider blocks
  • Drag a block from the palette into the surface — appears in preview
  • Click Send → dialog lists mock channels → submit → browser alert fires and payload logs to console
  • Toggle the demo page theme button → preview chrome flips light/dark

🤖 Generated with Claude Code

Adds a Vite + React demo under demo/ that imports the library
directly from src/ via a Vite alias, so changes to library source
hot-reload in the browser. Mocks loadChannels, loadSendAsUserStatus,
and onSend so the full builder UX (palette, surface, send dialog)
can be exercised without a backend.

Also adds .claude/launch.json so `preview_start demo` can boot the
dev server on port 5173.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@zhawtof
zhawtof merged commit 114016d into main May 15, 2026
5 checks passed
@zhawtof
zhawtof deleted the claude/kind-davinci-0964c8 branch May 15, 2026 22:48
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