Ecosystem
PraxisJS first-party packages — Head, Content, Router, Store, DI, Motion, FSM, and async concurrency.
Ecosystem
All first-party packages use the same signal system and decorator conventions as core. They're completely independent of each other — install only what your project needs. For versions and stability status, see the Packages reference.
Document Head
@Head reactively manages document title, meta tags, og:*, and twitter:* per component. Stack-based with automatic cleanup on unmount.
Content
Markdown content collections. @Collection registers a schema and its glob path. @PagedCollection wires pagination to any composable. Build-time loading via the bundled Vite plugin.
Router
Signal-based client-side routing. @Router sets up routes and layouts. @Route co-locates path with the page component. Reactive injectors for params, query, and navigation.
Store
Class-based singleton state management. @Storable marks a class as a singleton store. @Store injects the shared instance into any component.
Dependency Injection
@Injectable, @Inject, @Scope, and token-based injection. Scoped child containers per component instance. Circular dependency detection.
Motion
Animated field decorators. @Tween for duration-based easing. @Spring for physics-based spring animation. Assign a value — the transition plays automatically.
State Machines
Finite state machines via @StateMachine and @Transition. @StateMachine is a field decorator — declare the machine as a typed field and @Transition binds methods to valid transitions.
Concurrency
@Task, @Queue, and @Pool for async concurrency control. Reactive .loading(), .error(), and .pending() state directly on each decorated field.
CSS
@Styled for typed scoped CSS with this.$css autocomplete. @Style for reactive CSS properties that update the DOM directly — no re-renders, no class toggling.
UI Libraries
Morphos (headless primitives) and Kosmesis (copy-paste components) — companion projects that bring a full UI layer to PraxisJS.
Installation
Each package is independent. Install only what you need:
Head
npm install @praxisjs/headpnpm add @praxisjs/headyarn add @praxisjs/headbun add @praxisjs/headContent
npm install @praxisjs/contentpnpm add @praxisjs/contentyarn add @praxisjs/contentbun add @praxisjs/contentRouter
npm install @praxisjs/routerpnpm add @praxisjs/routeryarn add @praxisjs/routerbun add @praxisjs/routerStore
npm install @praxisjs/storepnpm add @praxisjs/storeyarn add @praxisjs/storebun add @praxisjs/storeDI
npm install @praxisjs/dipnpm add @praxisjs/diyarn add @praxisjs/dibun add @praxisjs/diMotion
npm install @praxisjs/motionpnpm add @praxisjs/motionyarn add @praxisjs/motionbun add @praxisjs/motionFSM
npm install @praxisjs/fsmpnpm add @praxisjs/fsmyarn add @praxisjs/fsmbun add @praxisjs/fsmConcurrency
npm install @praxisjs/concurrentpnpm add @praxisjs/concurrentyarn add @praxisjs/concurrentbun add @praxisjs/concurrentCSS
npm install @praxisjs/csspnpm add @praxisjs/cssyarn add @praxisjs/cssbun add @praxisjs/cssChoosing a package
| I need to… | Use |
|---|---|
| Set page title and meta tags per route | Head |
| Load and render markdown files | Content |
| Navigate between pages | Router |
| Share state across components | Store |
| Inject services into components | DI |
| Animate a value when it changes | Motion |
| Model complex state transitions | FSM |
| Track loading/error state on async methods | Concurrency |
| Build accessible UI without writing behavior from scratch | UI Libraries |
Global Styles
globalStyle() and preflight() — inject unscoped CSS once, at module level. Ideal for resets, @font-face, and base element rules.
Content
@praxisjs/content — markdown content collections with @Collection, class-based frontmatter schema, runtime validation, and a Vite plugin for zero-boilerplate build-time loading.