This repo provides a web-based viewer for Muse* app exports, built with Next.js and React. It was largely inspired by the muse viewer created by @jimmyhmiller.
With this project, you can view and interact with boards created in Muse directly in your browser — this becomes helpful when you need to share your thoughts/ideas with non-muse users.
For deployment, Cloudflare or Vercel works just fine!
*If you are new to Muse, it is an app for iPad and Mac that has been incredibly helpful for people who think well on canvases. To learn more about that app check my posts below:
- Board Visualization: Renders Muse boards with their original layout and connections
- Interactive Navigation: Click through nested boards and documents, similar to the native Muse app experience
- Support for Multiple Content Types:
- PDF documents with page previews
- Text notes with formatting
- URLs with preview cards
- Images and ink drawings (compatible with Muse's drawing tools)
- Nested boards with proper scaling
- Breadcrumb Navigation: Easy navigation through board hierarchy
# Clone the repository
git clone https://github.com/ramithuh/muse-webviewer
# Install dependencies
npm install
# Run the development server
npm run dev
- Export your board using the Muse app
- Place the exported files in the
/publicdirectory - Start the development server
- Open http://localhost:3000 in your browser
muse-webviewer/
├── app/ # Next.js app directory
├── public/ # Static files and Muse exports
├── src/
│ ├── components/ # React components
│ └── lib/ # Utility functions
└── types/ # TypeScript definitions
- Built with Next.js 14 and React
- TypeScript for type safety
- PDF.js for PDF rendering
- SVG-based connection lines
- Efficient board scaling and rendering
Contributions are welcome! Please feel free to submit a Pull Request. For discussions, join the Muse Discord community and check out the webviewer thread!
MIT License