Skip to main content
Version: v1 (Current)

DevKit Basics

The GxP DevKit is a toolkit for building plugins locally. It provides a CLI, development server, platform state simulation, and browser extensions for debugging.

What the DevKit Provides​

ToolPurpose
CLI (gxdev)Project scaffolding, dev server management, and build tools
GxP StoreLocal simulation of platform state (attendee data, settings, strings)
AI AgentsOptional AI-powered scaffolding (Claude, Codex, Gemini)
Browser ExtensionsChrome/Firefox DevTools panels for inspecting plugin state
Socket.IO ServerLocal mock for real-time event testing

Quick Setup​

Prerequisites​

  • Node.js 18+
  • pnpm 8+

Install​

pnpm install -g @gxp-dev/tools

Create a Plugin Project​

gxdev init my-plugin

This launches an interactive wizard that walks you through naming, optional AI scaffolding, SSL setup, and starting the dev server. See the full DevKit Getting Started guide for the complete walkthrough.

Start Development​

cd my-plugin
gxdev dev

Your plugin runs at https://localhost:3060 with hot module replacement.

Key Concepts​

GxP Store​

The GxP Store simulates the platform's runtime state in your local dev environment. Your plugin accesses it the same way it would on the live platform:

import { useGxpStore } from '@gx-runtime/stores/gxpPortalConfigStore';

const store = useGxpStore();
// Access attendee data, settings, strings, etc.

The store provides mock data locally and connects to real platform data when deployed.

Strings Plugin​

The Strings system enables translatable text in your plugin. Instead of hardcoding labels, use the gxp-string attribute:

<h1 gxp-string="welcome_title">Welcome!</h1>

Project admins can override any string through the dashboard without touching code.

Socket Events​

Plugins can subscribe to real-time events for live updates:

// Listen for attendee check-ins, form submissions, etc.

The DevKit includes a local Socket.IO server for testing real-time features during development.

Plugin Architecture​

Plugins are Vue 3 applications compiled with Vite. The final build excludes Vue itself — the platform provides it at runtime, keeping plugin bundles compact.

my-plugin/
├── src/
│   ├── Plugin.vue          # Main entry point
│   └── stores/
│       └── index.js        # Store setup
├── app-manifest.json       # Plugin configuration
├── vite.config.js          # Build configuration
└── main.js                 # Development entry point

Full Documentation​

The DevKit has extensive documentation covering every feature:

Next Steps​