Skip to main content
Version: v1 (Current)

GxP Dev Toolkit

The GxP Dev Toolkit (@gxp-dev/tools) is a package for creating platform plugins for the GxP kiosk platform.

What You Can Build​

With the GxP Toolkit, you can create custom plugins that run on GxP kiosks, including:

  • Interactive displays - Check-in kiosks, registration flows, badge printing
  • Information screens - Schedules, maps, directories
  • Engagement features - Surveys, gamification, social walls
  • Custom integrations - Connect to external APIs and services

Key Features​

FeatureDescription
CLI Tool (gxdev)Project scaffolding, dev server, and build commands
Interactive TUITerminal UI for managing dev services
Hot ReloadVite-based dev server with instant updates
GxP Strings PluginVue directives for reactive string/asset replacement
Socket.IOReal-time event simulation
Browser ExtensionsChrome/Firefox DevTools for plugin inspection
Vue 3 + PiniaModern reactive framework with state management
Component KitPre-built UI components for kiosk development

Quick Start​

# Install globally
pnpm install -g @gxp-dev/tools

# Create a new project
mkdir my-plugin && cd my-plugin
gxdev init my-plugin

# Start development
pnpm run dev-http

Your plugin is now running at http://localhost:3060. Open the Dev Tools with Ctrl+Shift+D.

Documentation​

Getting Started​

Configuration​

Development Tools​

Reference​

Requirements​

  • Node.js 18 or higher
  • pnpm 8 or higher
  • Modern browser (Chrome, Firefox, Safari, Edge)

Installation​

pnpm install -g @gxp-dev/tools

This makes the gxdev command available globally.

Project-Level Installation​

pnpm install --save-dev @gxp-dev/tools

Use pnpm exec gxdev to run commands.

Common Workflows​

Create a New Plugin​

mkdir my-plugin && cd my-plugin
gxdev init my-plugin
pnpm run dev-http

Start Development with Full Services​

# Start Vite + Socket.IO + Chrome extension
gxdev dev --with-socket --chrome

Build for Production​

gxdev build
# Output: dist/my-plugin.gxpapp

Test Socket Events​

# List available events
gxdev socket list

# Send a test event
gxdev socket send --event AiSessionMessageCreated

Generate Placeholder Images​

gxdev assets generate --size 800x600 --name hero

Project Structure After Init​

my-plugin/
├── src/
│   ├── Plugin.vue          # Main plugin entry point
│   ├── DemoPage.vue        # Example component
│   ├── assets/             # Your static assets
│   └── stores/             # Pinia store setup
├── theme-layouts/          # Layout components (Public, Private, System)
├── socket-events/          # Socket event templates
├── dev-assets/             # Development placeholder images
├── app-manifest.json       # Plugin configuration
├── .env                    # Environment variables
└── package.json

Key Concepts​

Runtime vs Template​

  • Runtime files - Stay in node_modules/, imported via @gx-runtime
  • Template files - Copied to your project, fully customizable

GxP Store​

Central Pinia store providing:

  • Settings (pluginVars)
  • Translatable strings (stringsList)
  • Asset URLs (assetList)
  • Dynamic state (triggerState)
  • API client methods
  • Socket.IO integration

GxP Directives​

<!-- Replace text content from strings -->
<h1 gxp-string="welcome_title">Default Text</h1>

<!-- Replace image source from assets -->
<img gxp-src="hero_image" src="/placeholder.jpg" alt="Hero">

Dev Tools​

Press Ctrl+Shift+D to open in-browser Dev Tools:

  • Store Inspector (edit values in real-time)
  • Layout Switcher
  • Socket Simulator
  • Mock Data Editor

Getting Help​

  • Documentation: Browse the pages linked above
  • TUI Help: Run gxdev and type /help
  • CLI Help: Run gxdev --help or gxdev <command> --help
  • Issues: GitHub Issues