Tooling
Developer tools for PraxisJS — Vite plugin, in-app DevTools overlay, Storybook adapter, MCP server, and the project scaffolder and maintenance CLIs.
Tooling
Vite Plugin
One plugin handles everything Vite needs: decorator support, JSX transform to @praxisjs/jsx, and optional component-level HMR. Required for all PraxisJS projects.
DevTools
In-app overlay with three built-in panels: Signals (live value history), Components (render metrics), and Timeline (chronological event log).
DevTools Plugins
Extend the DevTools panel with custom tabs. Each tab is a plugin — built-in panels are individually importable and replaceable.
Storybook
Framework adapter for Storybook ≥ 8. Mounts PraxisJS components with full reactivity, HMR, and source preview — no extra config needed.
MCP Server
Model Context Protocol server for PraxisJS. Gives any MCP-compatible AI assistant live access to documentation and install commands.
praxisjs CLI
Maintenance CLI for existing projects — ai add / ai remove for AI integrations, doctor for diagnostics, upgrade for @praxisjs/* dependency updates.
Required setup for every project
Every PraxisJS project needs these two files configured correctly:
Install and configure the Vite plugin
npm install -D @praxisjs/vite-pluginpnpm add -D @praxisjs/vite-pluginyarn add -D @praxisjs/vite-pluginbun add -d @praxisjs/vite-plugin// vite.config.ts
import { defineConfig } from 'vite'
import { praxisjs } from '@praxisjs/vite-plugin'
export default defineConfig({
plugins: [praxisjs({ hmr: true })],
})Configure TypeScript
// tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"jsxImportSource": "@praxisjs/jsx",
"useDefineForClassFields": true,
"strict": true,
"noEmit": true
}
}Mount your app
// src/main.ts
import { render } from '@praxisjs/runtime'
import { App } from './App'
render(() => <App />, document.getElementById('app')!)Start from scratch
Skip the manual setup entirely:
npm create praxisjs@latestChoose from Minimal, With Router, Full, or Blog templates — all pre-configured with TypeScript, Vite, JSX, and HMR.
Already have a project? See the praxisjs CLI for doctor (diagnostics) and upgrade (dependency updates).
Creating Decorators
How to build custom decorators in PraxisJS using createFieldDecorator, createMethodDecorator, createLifecycleMethodDecorator, createGetterDecorator, createWritableGetterDecorator, createGetterObserverDecorator, createAccessorDecorator, and createClassDecorator.
Vite Plugin
@praxisjs/vite-plugin — configures Vite for PraxisJS with decorator support, JSX transform, TypeScript, and optional HMR.