Yeoman generator for Power Platform Tool Box to help you create tools
npm install generator-pptbYeoman generator for creating Power Platform Tool Box (PPTB) tools with TypeScript.


Install Yeoman and the PPTB generator globally:
``bash`
npm install -g yo generator-pptb
Create a new PPTB tool:
`bash`
yo pptb
Or create in a specific directory:
`bash`
yo pptb my-tool-name
If you do not want to download Yeoman and PPTB Generator globally you can run the below command:
`bash`
npx --package yo --package generator-pptb -- yo pptb
Power Platform Tool Box (PPTB) is a framework for building custom tools that integrate with Microsoft Power Platform. This generator helps you quickly scaffold new PPTB tools with best practices and modern development tooling.
- š Quick scaffolding - Generate a complete PPTB tool project in seconds
- šØ Multiple frameworks - Choose from HTML/TypeScript, React, Vue, or Svelte
- š¦ TypeScript support - Full TypeScript integration with type definitions
- š„ Modern tooling - Vite for fast development (React, Vue, Svelte)
- šÆ Best practices - Based on official PPTB sample tools
- š Pre-configured - Includes tsconfig, build scripts, and development setup
The generator supports four different tool types:
A simple HTML-first architecture with TypeScript. Perfect for lightweight tools.
Features:
- Pure HTML, CSS, and TypeScript
- Direct DOM manipulation
- Minimal dependencies
- Fast build times
Best for: Simple tools, forms, data viewers
Modern React 18 application with TypeScript and Vite.
Features:
- React 18 with hooks
- TypeScript support
- Vite for fast HMR
- Component-based architecture
- Fluent 9 UI, Ant Design or Material UI components
Best for: Complex UIs, interactive dashboards, data-driven applications
Vue 3 Composition API with TypeScript and Vite.
Features:
- Vue 3 with Composition API
- TypeScript support
- Vite for fast HMR
- Reactive data binding
Best for: Progressive web apps, admin panels, forms
Svelte 5 with TypeScript and Vite.
Features:
- Svelte 5 with runes
- TypeScript support
- Vite for fast HMR
- Compiled components (no runtime)
Best for: Performance-critical apps, small bundle sizes
Simply run:
`bash`
yo pptb
You'll be prompted to:
1. Choose a tool type (HTML/TypeScript, React, Vue, or Svelte)
2. Enter a tool name
3. Enter a tool identifier (package name)
4. Enter a description
5. Choose a package manager (npm, yarn, or pnpm)
6. Decide whether to initialize a git repository
Skip prompts with command-line options:
`bash`
yo pptb my-tool --quick
- --quick, -q - Quick mode, use defaults--toolType
- , -t - Tool type: html, react, vue, or svelte--toolDisplayName
- , -n - Display name of the tool--toolId
- - Identifier (package name) of the tool--toolDescription
- - Description of the tool--pkgManager
- - Package manager: npm, yarn, or pnpm--gitInit
- - Initialize git repository (true/false)
Example:
`bash`
yo pptb my-react-tool \
--toolType react \
--toolDisplayName "My React Tool" \
--toolId "pptb-my-react-tool" \
--toolDescription "A sample React tool for PPTB" \
--pkgManager npm \
--gitInit true
``
my-tool/
āāā src/
ā āāā index.html # Main UI
ā āāā index.ts # Tool logic
ā āāā styles.css # Styling
āāā dist/ # Build output
āāā package.json
āāā tsconfig.json
āāā README.md
``
my-tool/
āāā src/
ā āāā App.tsx|vue|svelte # Main component
ā āāā main.tsx|ts # Entry point
ā āāā styles.css # Styling
āāā dist/ # Build output
āāā index.html
āāā package.json
āāā tsconfig.json
āāā vite.config.ts
āāā README.md
After generating your tool:
1. Install dependencies:
`bash`
cd my-tool
npm install
2. Start development:
`bash
# For HTML/TypeScript
npm run watch
# For React/Vue/Svelte
npm run dev
`
3. Test in PPTB*:
- Build your tool
- Run the PPTB Desktop App
- Go to settings, select the Show Debug Menu option and select Save
- In the Debug menu, select Browse under Load Local Tool
- Select the root directory containing your tool's package.json and select Load Tool
- Test from the Tool Box interface
- To debug / set breakpoints etc. select the Help menu and select Toggle Tool Dev Tools to open the developer console while the tool is running
4. Build for production:
`bash`
npm run build
5. Finalize package and publish*:
-Run finalize-package to shrinkwrap
`bash`
npm run finalize-package
npm-shrinkwrap.json
This creates an file that locks dependencies for security and ensures consistent installations.
- Deploy to npm
*For more information on development, testing and releasing your tool see the Tool Development Guide
All generated tools include access to the PPTB APIs via window.toolboxAPI and window.dataverseAPI`.
Full list of API references is here.
> See the generated README in your tool for examples.
This generator is based on the official PPTB sample tools:
https://github.com/PowerPlatformToolBox/sample-tools
- Node.js >= 18.0.0
- npm, yarn, or pnpm
- Yeoman (yo)
Contributions are welcome! Please feel free to submit a Pull Request.
- Tool Development Guide
- Power Platform Tool Box
- Sample Tools
- Yeoman
For issues and questions:
- Open an issue on GitHub
- Check the sample tools repository