Skip to content

feat: export interactive HTML prototype from flow#29

Merged
trmquang93 merged 1 commit intomainfrom
feat/export-prototype
Apr 11, 2026
Merged

feat: export interactive HTML prototype from flow#29
trmquang93 merged 1 commit intomainfrom
feat/export-prototype

Conversation

@trmquang93
Copy link
Copy Markdown
Collaborator

Summary

  • Add Export Prototype to the File menu that generates a single self-contained .html file from the current flow
  • The HTML prototype includes all screen images inlined as base64, invisible hotspot tap areas, a floating back button, sidebar screen list, conditional branch popups, and keyboard navigation
  • Respects scope filtering — when viewing a sub-flow, only those screens are included in the export
  • Includes 24 unit tests covering navigation resolution, scope filtering, sorting, title escaping, and edge cases
  • User guide updated with full documentation of the prototype export feature

Changes

File What
src/utils/generatePrototype.js New — core prototype HTML generator with navigation map builder, screen serializer, CSS, and runtime JS engine
src/utils/generatePrototype.test.js New — 24 Vitest tests
src/hooks/useImportExport.js Wire onExportPrototype callback using generatePrototype + downloadPrototype
src/Drawd.jsx Pass onExportPrototype, scopeScreenIds, and connectedFileName through to hooks/TopBar
src/components/TopBar.jsx Add "Export Prototype" button to File dropdown menu
src/pages/docs/userGuide.md Document the export prototype feature (how-to, behavior, scope filtering)

Test plan

  • Open a flow with multiple screens and hotspots, click File > Export Prototype, verify a .html file downloads
  • Open the exported HTML in a browser — tap hotspots to navigate between screens, verify back button works
  • Test with conditional hotspots — verify the choice popup appears with labeled options
  • Activate a scope root (sub-flow view), export prototype, verify only scoped screens are included
  • Export with no screens — button should be disabled
  • npm test passes (24 new tests + all existing)

Add "Export Prototype" to the File menu that generates a self-contained
HTML file with all screen images inlined as base64, hotspot tap areas,
navigation logic, back button, sidebar screen list, and conditional
branch popups. Supports scope filtering so sub-flows export correctly.
@trmquang93 trmquang93 merged commit 2ddc481 into main Apr 11, 2026
1 check passed
@github-actions github-actions bot deleted the feat/export-prototype branch April 11, 2026 06:08
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