Tooling
Developer tools for PraxisJS — Vite plugin, in-app DevTools overlay, Storybook adapter, and the project scaffolder.
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.
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-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": false,
"strict": true,
"noEmit": true
}
}`useDefineForClassFields: false` is required
With true, TypeScript compiles class fields via Object.defineProperty, which runs after decorator initializers and overwrites the signal wiring they set up. Set it to false so field assignments are treated as constructor assignments and decorators work correctly.
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, or Full templates — all pre-configured with TypeScript, Vite, JSX, and HMR.
Creating Decorators
How to build custom decorators in PraxisJS using createFieldDecorator, createMethodDecorator, createLifecycleMethodDecorator, createGetterDecorator, createGetterObserverDecorator, and createClassDecorator.
Vite Plugin
@praxisjs/vite-plugin — configures Vite for PraxisJS with decorator support, JSX transform, TypeScript, and optional HMR.