A reactive UI framework with TypeScript-first JSX transformation and fine-grained reactivity

⚠️REBRANDING & DEPRECATION NOTICE
Synetics is now Synetics. The original synetics-framework packages have been officially deprecated. Please use the new @synetics/* namespace for all future development. This package, @synetics/synetics.dev, is the core framework replacement.

About • Features • Quick Start • Getting Started Guide • Roadmap • Ecosystem • Contributing

follow me

---

What is Synetics?

Synetics is a reactive UI framework that combines compile-time JSX transformation with runtime reactivity primitives. It transforms JSX syntax into direct DOM operations at build time and uses signal-based reactivity for surgical, fine-grained updates.

Framework or Library?

Synetics is a framework because it provides:

• A complete runtime system with lifecycle management
• Opinionated architecture for component composition
• Integrated tooling (TypeScript transformer + Vite plugin)
• Built-in patterns for routing, dependency injection, and error handling
• A complete application bootstrap system

While it's modular and allows selective feature usage, it prescribes a specific approach to building reactive UIs with transformed JSX.

Core Philosophy

// Components run ONCE, not on every state changeexportconstCounter=({ initialCount =0})=>{const[count,setCount]=useState(initialCount)// count() is a getter - accessing it subscribes this DOM nodereturn<div>{count()}</div>// Future updates: ONLY this text node changes, not entire component}

Synetics combines:

• React's familiar hooks API (useState, useEffect, useMemo)
• SolidJS's signal-based reactivity for surgical updates
• Svelte's compile-time philosophy (JSX → optimized DOM code)
• TypeScript's full type safety with first-class transformer support

---

Core Features

✅ Core Features (v0.7.0-alpha)

🎯 Signal-Based Reactivity	• createSignal, createEffect, createMemo • Fine-grained dependency tracking • Automatic subscription management • Batched updates with batch()
🪝 React-Like Hooks	• useState - State management with signals • useEffect - Side effects with dependencies • useMemo - Computed values • useRef - Mutable references
🗃️ State Management	• Redux-style stores with signals • createStore, dispatch, subscribe • Undo/redo middleware (time-travel debugging) • Persistence (localStorage/sessionStorage) • Redux DevTools integration • Memoized selectors with select() • reconcile() - Immutable reconciliation
🧭 Enhanced Router	• Path parameters: /users/:id • Query string parsing with useSearchParams() • Navigation hooks: useRouter(), useNavigate(), useParams() • Route guards: beforeEach, afterEach • Nested routes with <Outlet />
🎨 Design System	• Framework-agnostic design tokens • CSS variable generation (build-time) • Dark mode support (automatic) • 200+ design variables exported
🔍 TypeScript Compiler API	• Type-safe routing (param extraction) • DI circular dependency detection • Enhanced error messages with suggestions • Auto prop validation from types • Route type integration • JSX prop validation
🔄 TypeScript Transformer	• JSX → Direct DOM compilation • Zero runtime JSX overhead • Automatic reactivity injection • Full type safety preserved
⚡ Control Flow	• <Show> - Conditional rendering • <For> - Keyed list rendering • <Index> - Non-keyed list rendering • <Dynamic> - Dynamic component resolution • Reactive updates only where needed
📦 Resource Management	• createResource - Async data fetching • createTrackedResource - Multi-resource tracking • <Waiting> component for loading states • Built-in caching and deduplication
📝 Form Management 🆕 v0.9.0	• useFormular() - formular.dev integration • Signal-based reactive forms • Built-in validation (sync/async/custom) • Nested objects and arrays support • Form state tracking (dirty/touched/valid) • 41 passing tests (100%)
🔄 Immutable Updates 🆕 v0.9.0	• produce() - Immer-style API • Nested draft tracking • Structural sharing optimization • Array and object proxy support • Type-safe with generics • 29 passing tests (100%)
🧬 Context System	• createContext / useContext • React-like Context API • Provider-based value propagation
🎭 Portals	• <Portal> component • Render content outside component tree • Modal and overlay support
🛡️ Error Boundaries	• <Tryer> / <Catcher> components • Declarative error handling • Component error isolation
💉 Dependency Injection	• ServiceManager - IoC container • ServiceLocator - Service resolution • Singleton, transient, and scoped lifetimes • Type-safe service registration
🚀 Bootstrap System	• bootstrapApp - Application builder • createApp / createOutlet • Lifecycle management • Multiple mount points support
🎪 Event System	• Event delegation for performance • Synthetic event wrappers • Automatic cleanup on unmount
🔌 Vite Plugi� Build Optimization	• Tree shaking analyzer implemented • CSS variable generator working • In Progress: Automatic dead code elimination (40%) • Planned: Component lazy loading, route splitting • Status: Foundation complete, automation pending
🎨 Styling System	• Manual style management works • Design tokens available • Missing: CSS-in-JS runtime, scoped styles, styled components • Status: Planned for future release
🔍 DevTools⚠️ Partial (v0.9.0)	• Redux DevTools integration ✅ • Time-travel debugging support (via Redux DevTools) • State inspection in Redux DevTools • Browser Extension: ⏳ Planned (separate repo) • Component tree inspector (planned) • Signal/state inspector (planned) • formular.dev form debugger (planned) • Status: 20% complete - Redux DevTools only
⚙️ Server-Side Rendering ✅ v0.8.0	• renderToString() - Server-side rendering • hydrate() - Client-side hydration • generateStatic() - Static site generation • HTML escaping and XSS protection • State serialization/deserialization • 15+ passing tests (100%)
🧪 Testing Utilities ✅ v0.9.0	• Component test renderer • Event simulation (fireEvent, click, type) • Async utilities (waitFor, waitForElement) • DOM queries (screen.getByText, getByRole) • formular.dev helpers (fillField, submitForm, createMockForm) • Mock utilities (mockRouter, mockService) • 25+ formular tests passing (100%)
🌐 HTTP Client ✅ v0.8.0	• useHttp() - Reactive HTTP hook • Request/response/error interceptors • Automatic caching with TTL • Retry logic with exponential backoff • Full TypeScript support • 25+ passing tests (100%)
🛠️ CLI Tool ✅ v0.8.0	• synetics create - Project scaffolding • synetics generate - Code generation • synetics add - Integration setup • synetics build - Production builds • Interactive prompts and templates
🔄 Lazy Loading & Code Splitting ✅ v0.6.0	• lazy() - Dynamic component import • Multiple preload strategies (eager, idle, visible, hover) • Route-based code splitting • usePrefetch() - Manual route prefetching • Integration with <Waiting> boundaries • Automatic bundle optimization
🔍 Component Lifecycle Tracing ✅ v0.6.0	• traceComponentMount/Update/Unmount() • Performance monitoring (render time, update count) • Memory leak detection • Excessive update warnings • Development-mode only (zero production overhead)

---

Architecture Overview

How It Works

1. Build-Time Transformation

// Your JSX code<buttononClick={increment}>{count()}</button>;// Transforms to (simplified):(()=>{constel0=document.createElement('button');el0.addEventListener('click',increment);createEffect(()=>{el0.textContent=String(count());});returnel0;})();

Key Benefits:

• No virtual DOM diffing
• No reconciliation overhead
• Direct DOM operations
• Minimal runtime footprint (~5-10KB)

2. Signal-Based Reactivity

const[count,setCount]=useState(0);// Returns: [getter, setter]count();// Read value (subscribes to changes)setCount(5);// Write value (notifies subscribers)

How it works:

• State values wrapped in Signals
• Reading count() inside an Effect automatically subscribes
• Writing via setCount() triggers ONLY subscribed effects
• Automatic dependency tracking
• Surgical updates to specific DOM nodes

3. Component Lifecycle

exportconstComponent=(props)=>{// 🔵 Component function runs ONCEconst[state,setState]=useState(0)useEffect(()=>{// 🟢 Effects re-run when dependencies changeconsole.log(state())},[state])// 🔵 Returns DOM elements (not re-rendered)return<div>{state()}</div>// 🟢 Only text node updates when state changes}

No Re-renders:

• Components run once at creation
• State changes don't trigger re-renders
• Effects track dependencies automatically
• Updates are surgical, not cascading

---

Roadmap

eary works

first version started: february 02, 2023

• rendering and prototyping core features january 2023
• forms libs creation march 2023
• component libs v1
• component libs v2
• component libs v3 june ~ 2023
• formular.dev january 2024
• formular.dev v.1 february 2025
• synetics-framework march 2025

current

Current Version: v0.7.0-alpha ✅
Next Release: v1.0.0-stable (Q2 2026)
Last Updated: January 27, 2026

🎯 Current Status

v0.7.0-alpha - IN PROGRESS (85%)

• ✅ formular.dev integration (useFormular() hook) - 41 tests passing
• ✅ produce() utility (Immer-style API) - 29 tests passing
• ✅ Testing utilities (component testing, form helpers) - 25 tests passing
• ✅ Dev Tools APIs - Registry Inspector, Event Inspector, Performance Monitor (29 files)
• ⚠️ DevTools UI - Browser extension planned for v1.0

v0.8.0-alpha - SHIPPED ✅ (January 2026)

• ✅ HTTP Client with useHttp() hook (25+ tests)
• ✅ CLI tool (synetics create, synetics generate, synetics add)
• ✅ SSR/SSG foundation (renderToString, hydrate, generateStatic)

🚀 Coming Next

v1.0.0 - Production Ready (Q2 2026)

• Stable API with semver guarantees
• Comprehensive documentation site
• Real-world example applications
• Performance benchmarks vs React/Solid/Vue
• Long-term support (LTS) commitment
• Community contribution guidelines

📊 What's Complete (v0.1.0-v0.7.0)

✅ Core Runtime (100%)

• Signal-based reactivity, hooks, control flow (<Show>, <For>, <Index>, <Dynamic>), context, error boundaries, portals

✅ State Management (100%)

• Redux-style stores, undo/redo, persistence, DevTools integration, immutable updates (produce())

✅ Router (100%)

• Path params, query strings, guards, nested routes, lazy loading

✅ Forms (100%)

• Via formular.dev integration - framework-agnostic, reactive, validated forms

✅ DI System (100%)

• IoC container with multiple lifetime scopes

✅ Server-Side Rendering (100%)

• renderToString(), hydrate(), generateStatic() with full state management

✅ HTTP Client (100%)

• useHttp() hook, interceptors, caching, retry logic

✅ Testing Utilities (100%)

• Component renderer, event simulation, form helpers, async utilities

➡️ For detailed roadmap: See ROADMAP.md

---

Strategic Differentiation from Competitors

Synetics + formular.dev aims to differentiate through four core pillars:

1. True Framework Agnosticism 🌐 ⭐ UNIQUE ADVANTAGE

• formular.dev works with Synetics, React, Vue, Angular, or vanilla JS
• Build forms once, reuse across frameworks
• No vendor lock-in for form logic
• Migrate frameworks without rewriting forms
• Competitors: Angular Forms (Angular only), React Hook Form (React only)

2. TypeScript Powerhouse 🔮

• Deepest TypeScript Compiler API integration of any framework
• Compile-time validation and optimization beyond standard tooling
• Type-safe everything: routing, DI, themes, state machines, forms
• Zero-cost abstractions that compile away

3. Enterprise-Ready Out-of-Box 🏢

• formular.dev: 6 languages + 12 countries built-in (vs Angular's manual setup)
• Most sophisticated DI system in any reactive framework
• Built-in patterns for large-scale applications
• Micro-frontend support out of the box
• Observable and debuggable at production scale

4. Performance First ⚡

• Smaller bundle: ~10KB (Synetics core gzipped)
• vs Angular: ~70KB (Core + Forms)
• vs React: ~45KB (runtime alone)
• vs SolidJS: ~7KB (similar architecture)
• Fine-grained reactivity with compile-time optimization
• Zero virtual DOM overhead

5. Developer Experience & Observability 🔍 ⭐ UNIQUE ADVANTAGE

• Component lifecycle tracing built into core (not afterthought extension)
• Performance monitoring: render time, update counts, memory usage
• Automatic excessive update detection
• Development warnings with actionable hints
• Signal state debugging with dependency graphs
• Zero production overhead (dev tools stripped at build)
• vs React/Vue: Requires browser extension for similar features

6. Advanced Code Splitting 📦

• Multiple preload strategies: eager, idle, visible, hover-based
• Route-level code splitting with prefetch hooks
• Automatic bundle optimization and dead code elimination
• Lazy component loading with integrated loading states
• vs Competitors: Most only offer basic dynamic imports

Target Audience:

• Teams building global applications (need i18n/multi-country out-of-box)
• TypeScript-heavy teams and organizations
• Enterprise applications requiring advanced patterns (DI, observability)
• Teams migrating from Angular seeking modern DX with familiar patterns
• Projects prioritizing type safety and build-time optimization
• Performance-critical applications requiring fine-grained reactivity
• Multi-framework teams (formular.dev works across React, Vue, Angular)

---

🔮 Future Vision (v2.0+)

Near-term (v1.0 - Q2 2026):

• 🔍 DevTools browser extension - Component tree, signal inspector, time-travel, profiler
• 📊 Performance profiler - Built-in component performance monitoring
• 🧪 Test coverage reporting - Integrated coverage tools

Experimental (v2.0+):

• 🌐 Edge runtime support (Cloudflare Workers, Deno Deploy)
• 🤖 AI-powered code generation and refactoring
• 🎮 Web Components compilation target
• 📱 React Native bridge for native apps
• 🔗 GraphQL/tRPC first-class integration
• 🎯 Automatic accessibility (a11y) validation
• 🌍 Built-in i18n with compile-time extraction

---

Framework Comparison

How Synetics Compares

Feature	React	Vue 3	Svelte	SolidJS	Synetics
Reactivity	VDOM diffing	Proxy-based	Compile-time	Fine-grained signals	Fine-grained signals
Updates	Re-render tree	Re-render component	Compile to updates	Update specific nodes	Update specific nodes
State Syntax	count	count.value	$count	count()	count()
Virtual DOM	Yes	Yes	No	No	No
Bundle Size	~45KB	~34KB	~2KB	~7KB	~10KB
Component Model	Function reruns	Function reruns	Compile away	Run once	Run once
TypeScript Compiler	No	No	No	No	Yes (API integration) ⭐
Built-in DI	No	Limited	No	No	Enterprise-grade ⭐
Lazy Loading	Basic	Basic	Basic	Basic	Advanced (6 strategies) ⭐
Component Tracing	Extension only	Extension only	Extension only	Extension only	Built-in (dev mode) ⭐
Preload Strategies	Manual	Manual	Manual	Manual	Automatic (4 strategies) ⭐
JSX/Templates	JSX	Templates/JSX	Templates	JSX	JSX (transformed)
SSR/SSG	Yes	Yes	Yes	Yes	Yes (v0.8.0)
DevTools	Excellent	Excellent	Good	Good	Partial (Redux only)⚠️
Ecosystem	Huge	Large	Growing	Growing	New (v0.9.0)

When to Choose Synetics

Choose Synetics if you want:

• ✅ React-like hooks API without virtual DOM overhead
• ✅ Fine-grained reactivity with automatic dependency tracking
• ✅ TypeScript Compiler API integration (type-safe routing, DI validation)
• ✅ Enterprise DI patterns built-in (Angular-style, but lightweight)
• ✅ Advanced lazy loading (6 preload strategies vs basic dynamic imports)
• ✅ Component lifecycle tracing built into framework (not extension-only)
• ✅ Compile-time optimizations with no runtime JSX overhead
• ✅ Minimal bundle size (~10KB vs React's 45KB)
• ✅ SSR/SSG complete (renderToString, hydrate, generateStatic) ✅
• ✅ Framework-agnostic forms via formular.dev (works with React, Vue, Angular)
• ✅ Production-ready HTTP client with interceptors, caching, retry logic
• ✅ CLI tools for scaffolding, code gen, and integration setup
• ✅ Development observability without needing browser extensions
• ✅ To learn cutting-edge reactive patterns

Choose Synetics OVER SolidJS if you:

• 🎯 Need advanced dependency injection (decorators, lifetimes, modules)
• 🎯 Want TypeScript Compiler API integration (not just good TS support)
• 🎯 Require built-in component tracing and performance monitoring
• 🎯 Need multiple lazy loading strategies (hover, idle, visible, eager)
• 🎯 Want enterprise patterns without building them yourself
• 🎯 Prefer opinionated framework over library
• 🎯 Building design-system-first applications
• 🎯 Migrating from Angular and want modern DX with familiar patterns

Consider alternatives if you need:

• ❌ Immediate API stability guarantees → use SolidJS (v1.8+ stable) or wait for Synetics v1.0 (Q2 2026)
• ❌ Full-stack meta-framework → use Next.js, Nuxt, SolidStart (Synetics is client-first)
• ❌ Massive third-party ecosystem → use React (millions of packages)
• ❌ Extensive pre-built component libraries → use React, Vue, Angular
• ❌ Framework with 5+ years of battle-testing → use React, Vue (Synetics is new)

---

Quick Start

Using Synetics CLI (Recommended)

# Install CLI globally
npm install -g @synetics/cli
# Create new project
synetics create my-app --template basic
cd my-app
# Install dependencies
npm install
# Start dev server
npm run dev

Manual Setup

See the complete Getting Started Guide for detailed setup instructions.

Minimal setup requires:

1. Dependencies:

   npm install @synetics/synetics.dev @synetics/vite-plugin
   npm install -D vite typescript

2. Vite Configuration:

   import{defineConfig}from'vite';import{syneticsPlugin}from'@synetics/vite-plugin';exportdefaultdefineConfig({plugins: [syneticsPlugin()],esbuild: {jsxFactory: 'h',jsxFragment: 'Fragment',jsxInject: `import { h, Fragment } from '@synetics/synetics.dev'`,},});

3. Bootstrap Your App:

   import{AppContextProvider,bootstrapApp}from'@synetics/synetics.dev';import{App}from'./App';constappRoot=bootstrapApp().root('#app').onMount((el)=>console.log('Mounted',el)).onError((err)=>console.error('Error:',err)).build();constapp=(<AppContextProviderroot={appRoot}context={{appName: 'My App',version: '1.0.0'}}><App/></AppContextProvider>);document.getElementById('app')?.appendChild(app);

📖 For complete setup guide:Getting Started

Quick Example

import{createSignal,createMemo,Show}from'@synetics/synetics.dev';exportconstCounter=({ initialCount =0}: {initialCount?: number})=>{const[count,setCount]=createSignal(initialCount);// Memoized computation - only re-runs when count changesconstdoubleCount=createMemo(()=>count()*2);// Fine-grained updates: only this text node updatesconstisPositive=createMemo(()=>count()>0);return(<divclass="counter"><h2>Count: {count()}</h2><h3>Double: {doubleCount()}</h3>{/* Conditional rendering with Show */}<Showwhen={isPositive()}><pstyle="color: green;">Positivenumber!🎉</p></Show><div><buttononClick={()=>setCount(count()+1)}>Increment</button><buttononClick={()=>setCount(count()-1)}>Decrement</button><buttononClick={()=>setCount(0)}>Reset</button></div></div>);};

Portal Pattern Example:

import{createSignal,Show,Portal}from'@synetics/synetics.dev';import{Modal}from'@synetics/ui';exportconstModalExample=()=>{const[isOpen,setIsOpen]=createSignal(false);const[data,setData]=createSignal('');return(<div><buttononClick={()=>setIsOpen(true)}>OpenModal</button><Showwhen={isOpen()}><Modalid="example-modal"isOpen={isOpen}onClose={()=>setIsOpen(false)}/><Portalid="example-modal"target="body"><inputtype="text"value={data()}onInput={(e)=>setData(e.target.value)}placeholder="Component-local state"/><p>Value: {data()}</p></Portal></Show></div></div>)}

---

Getting Started

Installation

# Clone the monorepo
git clone https://github.com/binaryjack/visual-schema-builder.git
cd visual-schema-builder
# Install dependencies
pnpm install
# Build Syneticscd packages/synetics.dev
pnpm build
# Run demo applicationscd ../demo
pnpm dev

Quick Example

import{useState,useEffect,useMemo}from'@synetics/synetics.dev/hooks'import{bootstrapApp}from'@synetics/synetics.dev/bootstrap'constCounter=({ initialCount =0})=>{const[count,setCount]=useState(initialCount)const[multiplier,setMultiplier]=useState(2)// Computed value (automatically tracks dependencies)constresult=useMemo(()=>count()*multiplier(),[count,multiplier])// Side effect (runs when count changes)useEffect(()=>{console.log(`Count: ${count()}`)},[count])return(<divclassName="counter"><h2>Count: {count()}</h2><p>Result: {result()}</p><buttononClick={()=>setCount(count()+1)}>Increment</button><buttononClick={()=>setCount(count()-1)}>Decrement</button></div>)}// Bootstrap your appbootstrapApp({rootElement: ()=><CounterinitialCount={0}/>,targetSelector: '#app'})

Lazy Loading with Preload Strategies 🆕 v0.6.0

import{lazy}from'@synetics/synetics.dev/lazy-loading'import{Waiting}from'@synetics/synetics.dev/resource'// Basic lazy loadingconstHeavyChart=lazy(()=>import('./components/HeavyChart'))// With preload strategiesconstDashboard=lazy(()=>import('./Dashboard'),{preloadStrategy: 'onIdle',// Load when browser is idle})constUserProfile=lazy(()=>import('./UserProfile'),{preloadStrategy: 'onVisible',// Load when element is visible})constSettings=lazy(()=>import('./Settings'),{preloadStrategy: 'onHover',// Load when user hovers})constApp=()=>{return(<div><Waitingfallback={<Spinner/>}><HeavyChartdata={chartData}/></Waiting><Dashboard/><UserProfile/><Settings/></div>)}

Form Management with formular.dev 🆕 v0.9.0

Note:formular.dev is a separate, framework-agnostic form library that works with Synetics, React, Vue, Angular, or vanilla JS. While Synetics provides a useFormular() hook for seamless integration, formular.dev can be used independently.

Why separate?

• ✅ No vendor lock-in - use same form code across frameworks
• ✅ Smaller Synetics core bundle (~10KB instead of ~22KB)
• ✅ formular.dev can be adopted without Synetics
• ✅ Teams can migrate frameworks without rewriting forms

Integration Example:

import{useFormular}from'@synetics/synetics.dev'constSignupForm=()=>{constform=useFormular({initialValues: {name: '',email: '',age: 18},validators: {name: 'required|minLength:2',email: 'required|email',age: 'required|number|min:18',},onSubmit: async(values)=>{awaitapi.post('/signup',values)},})return(<formonSubmit={form.handleSubmit}><inputtype="text"value={form.fields.name.value()}onInput={(e)=>form.fields.name.setValue(e.target.value)}placeholder="Name"/>{form.fields.name.error()&&<spanclass="error">{form.fields.name.error()}</span>}<buttontype="submit"disabled={form.isSubmitting()}>{form.isSubmitting() ? 'Submitting...' : 'Sign Up'}</button></form>)}

For standalone usage or React/Vue/Angular integration, see:

• formular.dev Documentation
• Synetics + formular.dev Examples

Immutable Updates with produce() 🆕 v0.9.0

import{produce}from'@synetics/synetics.dev';const[users,setUsers]=useState([{id: 1,name: 'Alice',age: 30},{id: 2,name: 'Bob',age: 25},]);// Immer-style immutable updatesconstupdateUserAge=(id: number,newAge: number)=>{setUsers(produce(users(),(draft)=>{constuser=draft.find((u)=>u.id===id);if(user){user.age=newAge;// Mutate the draft directly!}}));};// Works with nested structuresconst[state,setState]=useState({user: {profile: {settings: {theme: 'light',},},},});setState(produce(state(),(draft)=>{draft.user.profile.settings.theme='dark';// Deep mutation made easy}));

Testing Your Components 🆕 v0.9.0

import{render,screen,fillField,submitForm,waitFor}from'@synetics/synetics.dev';describe('SignupForm',()=>{it('should submit form with valid data',async()=>{constonSubmit=vi.fn();render(SignupForm,{props: { onSubmit }});// Fill form fieldsfillField(screen.getByPlaceholder('Name'),'John Doe');fillField(screen.getByPlaceholder('Email'),'john@example.com');// Submit formconstform=screen.getByRole('form');awaitsubmitForm(form,{waitForValidation: true});// Assertexpect(onSubmit).toHaveBeenCalledWith({name: 'John Doe',email: 'john@example.com',});});});

Project Structure

packages/
├── pulsar/ # Core framework
│ ├── src/
│ │ ├── reactivity/ # Signal system
│ │ ├── hooks/ # useState, useEffect, etc.
│ │ ├── control-flow/ # Show, For components
│ │ ├── context/ # Context API
│ │ ├── resource/ # Async resource management
│ │ ├── portal/ # Portal system
│ │ ├── error-boundary/ # Error handling
│ │ ├── di/ # Dependency injection
│ │ ├── router/ # Basic routing (WIP)
│ │ ├── lifecycle/ # Component lifecycle
│ │ ├── events/ # Event system
│ │ └── bootstrap/ # App initialization
│ └── art-kit/ # Brand assets
├── transformer/ # TypeScript JSX transformer
├── vite-plugin/ # Vite integration
└── demo/ # Example applications

---

Performance Characteristics

Benchmarks (v0.9.0-alpha)

Metric	Synetics	React	SolidJS	Notes
Initial Render	Fast ⚡	Medium	Fast	No VDOM creation overhead
Updates	Fastest ⚡⚡⚡	Medium	Fastest	Surgical DOM updates only
Memory	Low 💚	High	Low	No fiber tree or VDOM
Bundle Size	~10KB	~45KB	~7KB	Transformer at build time
Large Lists	Fastest ⚡⚡⚡	Slower	Fastest	Fine-grained updates with For

Note: Formal benchmarks pending. These are qualitative assessments based on architecture.

---

Real-World Examples

Live Showcase

🎨 See it in action:synetics-ui.dev showcase - 80+ examples demonstrating advanced patterns

1. Fine-Grained Reactivity

// Signal-based state with automatic dependency trackingexportconstSignalDemo=({ firstName, setFirstName, age, setAge }: Props)=>{return(<div><div><strong>Name:</strong>{firstName()}{/* Auto-subscribes */}<strong>Age:</strong>{age()}</div><buttononClick={()=>setAge(age()+1)}>Increment Age</button></div>);};

Key Features:

• Only subscribed DOM nodes update
• No virtual DOM diffing
• Surgical, fine-grained updates

2. Portal/PortalSlot Architecture

// Advanced pattern: Modal with content projectionexportcomponentModalDemo(){const[isOpen,setIsOpen]=createSignal(false);const[count,setCount]=createSignal(0);return(<div><buttononClick={()=>setIsOpen(true)}>Open Modal</button><Showwhen={isOpen()}>{/* Modal provides PortalSlots */}<Modalid="demo-modal"isOpen={isOpen}onClose={()=>setIsOpen(false)}/>{/* Project content into slots while keeping logic local */}<Portalid="demo-modal"target="header"><h3>Modal Title</h3></Portal><Portalid="demo-modal"target="body"><p>State is maintained in component scope: {count()}</p><buttononClick={()=>setCount(count()+1)}>
Increment ({count()})
</button></Portal><Portalid="demo-modal"target="footer"><buttononClick={()=>setIsOpen(false)}>Close</button></Portal></Show></div>);}

Benefits:

• UI projected globally (portal)
• Logic stays local (component scope)
• Clean separation of concerns

3. Error Boundaries

// Tryer/Catcher pattern for graceful error handlingimport{Tryer,Catcher}from'@synetics/synetics.dev';exportcomponentErrorBoundaryDemo(){const[throwError,setThrowError]=createSignal(false);constBuggyComponent=()=>{if(throwError())thrownewError('Component crash!');return<div>All good ✅</div>;};return(<Tryer><BuggyComponent/><Catcher>{(error)=>(<divstyle="color: red;">
⚠️ Error: {error.message}</div>)}</Catcher></Tryer>);}

Features:

• Independent boundaries
• Errors don't crash entire app
• Fallback UI for failed sections

4. Resources with Caching

// createResource with stale-while-revalidateexportconstCacheDemo=()=>{const[fetchCount,setFetchCount]=createSignal(0);constcachedResource=createResource(()=>{setFetchCount((c)=>c+1);returnfetchUser(1);},{staleTime: 5000});// Fresh for 5sreturn(<div><buttononClick={()=>cachedResource.refetch()}>Refetch</button><div>Network Requests: {fetchCount()}</div><Showwhen={cachedResource.data}><div><h4>{cachedResource.data.name}</h4><p>{cachedResource.data.email}</p><p>{Date.now()-cachedResource.fetchedAt<5000 ? '✅ Fresh' : '⚠️ Stale'}</p></div></Show></div>);};

Caching Strategy:

• Instant cache hits within staleTime
• Stale-while-revalidate after expiry
• Automatic refetch management

5. Dependency Injection

// ServiceManager with lifetime managementimport{ServiceManager}from'@synetics/synetics.dev';// Setup servicesconstservices=newServiceManager();services.register('analytics',()=>newAnalytics(),{lifetime: 'singleton'// Single instance app-wide});services.register('logger',()=>newLogger(),{lifetime: 'transient'// New instance each time});// Use in componentsexportcomponentMyComponent(){constanalytics=inject('analytics');constlogger=inject('logger');consttrackEvent=()=>{analytics.track('button_clicked');logger.log('Event tracked');};return<buttononClick={trackEvent}>Track Event</button>;}// Bootstrap with DIpulse(App,{root: '#app',
services // Available throughout app});

Patterns:

• Singleton: Shared instances (API clients, config)
• Transient: Fresh instances (loggers, factories)
• Scoped: Per-request instances (sessions)

6. Control Flow

// Show - Conditional rendering<Showwhen={isLoggedIn()}><Dashboard/></Show><Showwhen={user()} fallback={<Spinner/>}>{(u)=><Profileuser={u}/>}</Show>
// For - Keyed lists (optimal updates)
<Foreach={items()}>{(item,index)=>(<div>{index()}: {item.name}<buttononClick={()=>removeItem(item.id)}>Remove</button></div>)}</For>
// Index - Index-based iteration
<Indexeach={colors()}>{(color,i)=>(<divstyle={`color: ${color()}`}>
Item {i}: {color()}</div>)}</Index>

ForRegistry:

• Keyed by item ID
• Minimal re-renders
• Smooth animations

Index:

• Keyed by position
• Useful for primitive arrays
• Efficient reshuffling

7. Advanced Patterns

// Batch updates for performanceimport{batch}from'@synetics/synetics.dev';constupdateMultiple=()=>{batch(()=>{setFirstName('John');setLastName('Doe');setAge(30);setEmail('john@example.com');});// Only ONE update cycle for all changes};// Memos for expensive computationsconstfullName=createMemo(()=>{console.log('Computing full name...');return`${firstName()}${lastName()}`;});// Effects for side effectscreateEffect(()=>{console.log(`User is now ${age()} years old`);localStorage.setItem('age',String(age()));});

Complete Examples

Demo Applications:

• Counter App - State management, hooks, computed values
• Portal System - Modal, tooltip with PortalSlot architecture
• Error Boundaries - Tryer/Catcher patterns
• Resource Caching - Async data with caching
• DI Patterns - ServiceManager integration
• Control Flow - Show/For/Index examples

# Run the showcasecd packages/synetics-ui.dev
pnpm showcase:dev

---

Why Synetics?

Synetics isn't about radical innovation—it's about synthesis without compromise.

Born from 15+ years of building with jQuery, Knockout, Angular, Vue, and React, Synetics combines proven patterns:

• ✅ Angular's dependency injection → without the bloat
• ✅ React's hooks API → without the virtual DOM
• ✅ SolidJS's fine-grained reactivity → with familiar patterns
• ✅ Svelte's compiler approach → with TypeScript-first design
• ✅ Vue's progressive enhancement → with type safety

The result? A framework where you don't choose between:

• Performance vs developer experience
• Bundle size vs features
• Innovation vs familiarity
• Type safety vs simplicity

---

Current Limitations (Beta)ramework-agnostic form management library

• ✅ Works with Synetics, React, Vue, Angular, vanilla JS
• ✅ 6 languages built-in (EN, FR, ES, DE, PT, IT)
• ✅ 12+ country validation (phone, postal, SSN)
• ✅ 18+ validators with intelligent caching
• ✅ IoC/DI patterns that inspired Synetics's architecture
• ✅ 45KB core (12KB gzipped), zero dependencies

Synetics v0.9.0-alpha Status:

• ✅ SSR/SSG Support - Full server-side rendering implemented (v0.8.0)
• ✅ Enhanced Router - Path params, guards, nested routes complete
• ⚠️DevTools Integration - Redux DevTools working; dedicated browser extension planned for v1.0
• ✅ Forms Integration - formular.dev integration with full validation
• ✅ HTTP Client - Production-ready with caching and interceptors
• ✅ CLI Tools - Scaffolding, generation, and integration commands
• ✅ Testing Utilities - Component testing and form helpers
• ⚠️Small Ecosystem - Few third-party libraries (growing)
• ⚠️Breaking Changes Possible - API stabilizing for v1.0
• ⚠️Documentation Growing - Core docs complete, more examples needed

Production Readiness:

• ✅ Suitable for production with stable APIs (core, router, state, forms, SSR)
• ✅ Core features battle-tested with 300+ passing tests
• ⚠️ Monitor releases for breaking changes until v1.0.0
• ✅ Enterprise patterns (DI, state management) production-ready

Best for:

• 🚀 Production applications (with caution for API changes)
• 🏭 Enterprise internal tools and dashboards
• 📚 Learning modern reactive patterns
• 🔬 Building type-safe, reactive UIs
• 🧪 Prototyping and experiments
• 💻 Contributing to open-source frameworks

Not recommended for:

• ❌ Mission-critical applications requiring 100% API stability (wait for v1.0.0)
• ❌ Projects heavily dependent on extensive third-party React/Vue ecosystems
• ❌ Teams unable to monitor and adapt to breaking changes

---

Documentation

Core Guides

• Architecture Deep Dive
• API Reference
• Dependency Injection
• State Management
• Learning Journey

Feature Documentation

• Lazy Loading & Code Splitting
• Error Boundaries
• Async Resources
• Build Tools

Examples

• Demo Applications
• Component Showcase
• Form Examples

---

Ecosystem

Synetics is a modular framework with dedicated packages for each concern:

Core Packages

Package	Description	Repository
synetics.dev	Main framework with reactivity, router, DI, lifecycle	GitHub
@synetics/transformer	TypeScript JSX transformer for compile-time optimization	GitHub
@synetics/vite-plugin	Vite integration plugin	GitHub
@synetics/design-tokens	Framework-agnostic design tokens & brand assets	GitHub
@synetics/ui	Component library built with Synetics	GitHub
synetics-demo	Example applications and demos	GitHub

Related Projects

• formular.dev - Form management with IoC/DI patterns that inspired Synetics's architecture

---

Contributing

Synetics is in active development (v0.7.0-alpha). Contributions are welcome!

Ways to Contribute

• 🐛 Report bugs - Open issues with detailed reproduction steps
• 💡 Suggest features - Share ideas for framework improvements
• 📖 Improve docs - Help make our documentation clearer
• 🧪 Write tests - Increase coverage and catch regressions
• 💻 Submit PRs - Implement features or fix bugs
• 🎨 Build components - Contribute to the component library
• 📢 Spread the word - Share Synetics with other developers

Development Setup

For Contributors: Full Monorepo with Submodules

Synetics is developed as a monorepo with multiple packages distributed across separate Git repositories linked as submodules.

# Clone the main monorepo
git clone https://github.com/binaryjack/visual-schema-builder.git
cd visual-schema-builder
# Initialize and clone all submodules (synetics.dev, formular.dev, synetics-demo, etc.)
git submodule init
git submodule update --recursive
# Install dependencies across all packages
pnpm install
# Build all packages in correct dependency order
pnpm build
# Run demo applicationscd packages/synetics-demo
pnpm dev

Submodule packages:

• packages/synetics.dev - Core framework (GitHub)
• packages/formular.dev - Form library (GitHub)
• packages/synetics-demo - Demo apps (GitHub)
• packages/synetics-transformer - TypeScript transformer (GitHub)
• packages/synetics-vite-plugin - Vite plugin (GitHub)
• packages/synetics-design-system - Design tokens (GitHub)
• packages/synetics-ui.dev - Component library (GitHub)
• packages/synetics.dev-formular-ui - Form examples (GitHub)

Updating submodules:

# Pull latest changes from all submodule repositories
git submodule update --remote --recursive
# Commit submodule updates to main repo
git add packages/
git commit -m "chore: update submodules to latest"

For Package Development: Individual Package

If you only want to work on a specific package:

# Clone individual package repository
git clone https://github.com/binaryjack/synetics.dev.git
cd synetics.dev
# Install dependencies
pnpm install
# Build
pnpm build
# Run tests
pnpm test

Code Guidelines

• ✅ TypeScript strict mode (no any types)
• ✅ Feature slice pattern (one item per file)
• ✅ Prototype-based classes for core APIs
• ✅ Comprehensive JSDoc comments
• ✅ Test coverage >80% for new features
• ✅ Follow existing code style and patterns

See CONTRIBUTING.md for detailed guidelines.

---

License

MIT License - Copyright (c) 2026 Synetics framework

See LICENSE for full details.

---

Acknowledgments

Built with ⚡ by Tadeo Piana and contributors who refuse to compromise.

Special thanks to the authors of React, SolidJS, Svelte, and Vue for pioneering the patterns that made Synetics possible.

---

Synetics framework - v0.7.0-alpha
TypeScript-first reactive UI framework with compile-time JSX transformation

GitHub • Connect with the Creator

Issues • Roadmap • Docs