Pyreon — the signal-based UI framework

Pyreon is a signal-based UI framework that renders directly to the DOM without a virtual DOM. It provides fine-grained reactivity, streaming SSR, a JSX compiler, and compatibility layers for React, Vue, Solid, and Preact.

@pyreon/corestable @pyreon/reactivitystable @pyreon/zerostable @pyreon/routerstable

Core Framework

The foundation — reactivity engine, component model, renderers, router, and build tooling.

Package	Description
@pyreon/reactivity	Signals, computed values, effects, stores, and resources
@pyreon/core	Component model, JSX runtime, lifecycle hooks, control flow
@pyreon/compiler	JSX compiler with reactivity wrapping and static hoisting
@pyreon/runtime-dom	DOM renderer — mount, hydrate, transitions, keep-alive
@pyreon/runtime-server	SSR/SSG with streaming Suspense and store isolation
@pyreon/router	Type-safe routing with nested routes, guards, and loaders
@pyreon/head	Reactive document head management with SSR support
@pyreon/server	SSR handler, SSG, island architecture, and middleware
@pyreon/vite-plugin	Vite integration with JSX transform and HMR
@pyreon/typescript	Shared TypeScript configuration presets
@pyreon/cli	CLI tools — doctor, generate, and context commands
@pyreon/mcp	MCP server for AI-assisted development

Compatibility Layers

Use the API you already know, powered by Pyreon's signal engine.

Package	Description
@pyreon/react-compat	React hooks API — useState, useEffect, useMemo, etc.
@pyreon/preact-compat	Preact API — h(), Component class, signals integration
@pyreon/solid-compat	SolidJS API — createSignal, createEffect, control flow
@pyreon/vue-compat	Vue 3 Composition API — ref, computed, reactive, watch

Feature	React	Preact	Solid	Vue
Signals / reactive state	✓	✓	✓	✓
Computed / derived values	✓	✓	✓	✓
Effects / watchers	✓	✓	✓	✓
Lifecycle hooks	✓	✓	✓	✓
Control flow components	~	~	✓	~
Component model	✓	✓	✓	✓
Context / provide-inject	✓	✓	✓	✓
Store / state management	~	~	✓	✓

State & Data

Signal-native state management, forms, i18n, and data fetching.

Package	Description
@pyreon/store	Pinia-inspired composition stores with SSR isolation
@pyreon/state-tree	Structured state tree with snapshots, patches, and middleware
@pyreon/form	Signal-based form management with field arrays
@pyreon/validation	Schema validation adapters for Zod, Valibot, and ArkType
@pyreon/i18n	Reactive i18n with async namespace loading
@pyreon/query	TanStack Query adapter with Suspense and SSR dehydration
@pyreon/table	TanStack Table adapter for reactive table state
@pyreon/virtual	TanStack Virtual adapter for virtual scrolling
@pyreon/machine	Reactive state machines with type-safe transitions
@pyreon/storage	Reactive client-side storage — localStorage, sessionStorage, cookies, IndexedDB
@pyreon/permissions	Type-safe reactive permissions — RBAC, ABAC, feature flags
@pyreon/hotkeys	Keyboard shortcut management with scopes and modifiers

Meta-Framework

Zero-config full-stack framework and developer tooling.

Package	Description
@pyreon/zero	Full-stack meta-framework — file routing, SSR/SSG/ISR, optimized components
@pyreon/create-zero	Project scaffolding for new Zero applications
@pyreon/meta	Barrel package re-exporting the full fundamentals ecosystem
@pyreon/storybook	Storybook renderer for developing and documenting Pyreon components

UI System

Styling, theming, components, hooks, and animations.

Package	Description
@pyreon/ui-core	Core initialization, CSS engine connector, and shared utilities
@pyreon/styler	CSS-in-JS engine with theme support
@pyreon/unistyle	Responsive breakpoints and media query utilities
@pyreon/hooks	35 signal-based hooks for common UI patterns
@pyreon/elements	Foundational components — Element, List, Overlay, Portal, Text
@pyreon/attrs	Chainable component factory for composing default props
@pyreon/rocketstyle	Multi-dimensional style composition — themes, sizes, variants
@pyreon/coolgrid	Responsive grid system with Container, Row, Col
@pyreon/kinetic	CSS-transition animation components — Transition, Stagger, Collapse
@pyreon/kinetic-presets	120+ animation presets and composition utilities
@pyreon/connector-document	Bridge between styled components and @pyreon/document
@pyreon/document-primitives	Rocketstyle document components for multi-format export

Ecosystem

Specialized packages for rich application features.

Package	Description
@pyreon/document	Universal document rendering — one template, 14+ output formats
@pyreon/charts	Reactive ECharts bridge with lazy loading
@pyreon/code	Reactive CodeMirror 6 code editor with signals
@pyreon/flow	Reactive flow diagrams with signal-native nodes and auto-layout
@pyreon/feature	Schema-driven CRUD primitives with auto-generated hooks

Developer Tools

Package	Description
@pyreon/devtools	Chrome DevTools extension for component tree and signal inspection

Quick Start

Install the core packages:

npm install @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin

bun add @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin

pnpm add @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin

yarn add @pyreon/core @pyreon/reactivity @pyreon/runtime-dom @pyreon/vite-plugin

Create a component:

// @check
import { signal, computed } from '@pyreon/reactivity'
import { Show } from '@pyreon/core'
import { mount } from '@pyreon/runtime-dom'

const count = signal(0)
const doubled = computed(() => count() * 2)

const App = () => (
  <div>
    <button onClick={() => count.set(count() + 1)}>
      Count: {count()} (doubled: {doubled()})
    </button>
    <Show when={() => count() > 5}>
      <p>Count is greater than 5!</p>
    </Show>
  </div>
)

mount(App, document.getElementById('app')!)