This directory contains complete, production-ready sample tools demonstrating how to build tools for Power Platform Tool Box using different modern web frameworks.
Technology: HTML, CSS, TypeScript
A vanilla TypeScript implementation demonstrating tool development without any framework dependencies.
Key Features:
- Pure TypeScript with no framework overhead
- Modern ES2022 features
- Clean separation of concerns
- Comprehensive API usage examples
Best For: Lightweight tools, simple utilities, learning the API basics
→ View HTML Sample Documentation
Technology: React 18, TypeScript, Vite
A modern React application using hooks and functional components.
Key Features:
- React 18 with concurrent features
- Custom hooks for API integration
- Component-based architecture
- Hot Module Replacement (HMR)
- Optimized production builds
Best For: Complex interactive tools, data visualization, tools requiring rich UI
→ View React Sample Documentation
Technology: Vue 3, Composition API, TypeScript, Vite
A Vue 3 application using the Composition API and Single File Components.
Key Features:
- Vue 3 with Composition API
<script setup>syntax for cleaner code- Reactive composables
- Single File Components (.vue)
- Type-safe event handling
Best For: Progressive web apps, form-heavy tools, tools requiring two-way data binding
→ View Vue Sample Documentation
Technology: Svelte 5, TypeScript, Vite
A Svelte application leveraging Svelte's compiler-based reactivity.
Key Features:
- Svelte 5 with modern reactivity
- Minimal runtime overhead
- Built-in reactivity (no virtual DOM)
- Stores for state management
- Smaller bundle sizes
Best For: Performance-critical tools, embedded tools, tools with limited screen space
→ View Svelte Sample Documentation
All samples include comprehensive examples of:
✅ Connection management with real-time updates
✅ Notification system (success, info, warning, error)
✅ Clipboard operations
✅ File save/load dialogs
✅ Theme detection (light/dark)
✅ Terminal creation and command execution
✅ Event subscription and handling
✅ FetchXML query execution
✅ CRUD operations (Create, Read, Update, Delete)
✅ Entity metadata retrieval
✅ Error handling and validation
✅ TypeScript with full type safety (@pptb/types)
✅ Modern build tooling (Vite)
✅ Component-based architecture
✅ State management patterns
✅ Event-driven architecture
✅ Responsive UI design
✅ Production-ready builds
Framework samples (React, Vue, Svelte) use Vite with special configuration for PPTB:
✅ IIFE Format: Builds use Immediately Invoked Function Expression instead of ES modules for compatibility with PPTB's iframe loading mechanism
✅ Single Bundle: All code and CSS bundled into one file to avoid module loading issues
✅ HTML Optimization: Custom plugin that:
- Removes
type="module"andcrossoriginattributes for proper loading withfile://URLs - Moves script tags to end of
<body>so DOM elements are available when IIFE executes
✅ No External Dependencies: All dependencies bundled together for standalone execution
- Node.js 18 or higher
- Power Platform Tool Box desktop application
-
Navigate to sample directory:
cd sample/[html|react|vue|svelte]-sample
-
Install dependencies:
npm install
-
Build the sample:
npm run build
-
Install in Power Platform Tool Box:
- Open Power Platform Tool Box
- Go to Tools section
- Click "Install Tool"
- Enter the path to the built sample directory
- Want minimal dependencies
- Need the smallest possible bundle size
- Are building a simple utility tool
- Want to learn the API without framework complexity
- Need rich, complex user interfaces
- Want to leverage the React ecosystem
- Are familiar with React patterns
- Need extensive third-party component libraries
- Want a progressive framework
- Prefer template-based syntax
- Need strong TypeScript support
- Want excellent documentation and tooling
- Want the smallest runtime bundle
- Need maximum performance
- Prefer compiler-based reactivity
- Want minimal boilerplate code
| Feature | HTML | React | Vue | Svelte |
|---|---|---|---|---|
| Bundle Size | ~50KB | ~158KB | ~77KB | ~45KB |
| Runtime Overhead | Minimal | Medium | Medium | Minimal |
| Learning Curve | Easy | Moderate | Easy | Easy |
| TypeScript Support | Excellent | Excellent | Excellent | Excellent |
| Build Time | Fast | Fast | Fast | Fast |
| HMR Support | No | Yes | Yes | Yes |
| Ecosystem | Standard Web | Large | Large | Growing |
Bundle sizes for HTML sample include compiled TypeScript; framework samples are IIFE bundles with all features included
npm run devStarts development server with hot module replacement. Note: ToolBox APIs are only available when loaded within the application.
npm run buildCreates optimized production build in dist/ directory.
All samples include TypeScript for type safety:
# React/Vue/Svelte
npm run check # or tsc for HTML
# Shows type errors without buildingEach sample follows a consistent structure:
[framework]-sample/
├── src/ # Source code
│ ├── components/ # UI components (React/Vue/Svelte)
│ ├── hooks/ # Custom hooks (React)
│ ├── composables/ # Composables (Vue)
│ ├── lib/ # Utilities and stores (Svelte)
│ └── ...
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── vite.config.[ts|js] # Vite configuration (React/Vue/Svelte)
├── index.html # Entry point
└── README.md # Sample-specific documentation
Problem: TypeScript errors during build
Solution: Ensure all dependencies are installed with npm install
Problem: window.toolboxAPI is undefined
Solution: The tool must be loaded within Power Platform Tool Box, not a standalone browser
Problem: Connection is always null
Solution: Create a connection in Power Platform Tool Box first
Problem: Changes don't reflect immediately
Solution: Restart dev server with npm run dev
- Tool Development Guide - Complete guide to building tools
- API Reference - Full API documentation
- Architecture Guide - System architecture overview
- Main Repository - Source code and issues
Found an issue or want to improve the samples?
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
See CONTRIBUTING.md for guidelines.
All samples are licensed under GPL-3.0. See LICENSE for details.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Documentation: docs/
Happy coding! 🚀