🚀 Coherent.js

May 18, 2026 · View on GitHub

High-performance server-side rendering framework built on pure JavaScript objects

⚡ Production-Ready Performance

Coherent.js delivers exceptional performance with validated production metrics:

📦 Per-package bundle size gated by CI (see packages/*/bundle-size.json)
🚀 247 renders/sec with LRU caching
🔧 100% tree-shaking ready across all 12 packages

🎯 Why Coherent.js?

Hybrid FP/OOP Architecture

OOP State Management: Encapsulation, methods, and lifecycle management
FP Component Composition: Purity, composability, and 100% cacheability
Best of Both Worlds: Developer productivity + runtime performance

Production-Optimized

Tree Shaking: sideEffects: false across all packages
Modular Exports: Conditional exports for optimal bundle sizes
LRU Caching: Component-level caching with configurable LRU eviction
Bundle Analysis: Real production validation and optimization

Developer Experience

Pure Objects: No JSX, no compilation, just JavaScript
TypeScript Support: Full type definitions and generics
Enhanced DevTools: Component visualization, performance monitoring
Migration Friendly: Easy paths from React/Vue/Express

🚀 Quick Start

# Install Coherent.js
pnpm add @coherent.js/core @coherent.js/state @coherent.js/api

# Development tools (tree-shakable)
pnpm add -D @coherent.js/devtools

Your First Component

// Pure functional component (100% cacheable)
const Welcome = ({ name }) => ({
  div: {
    className: 'welcome',
    children: [
      { h1: { text: `Welcome, ${name}!` }},
      { p: { text: 'Built with pure JavaScript objects' }}
    ]
  }
});

// Enhanced OOP state management
import { createFormState } from '@coherent.js/state';

const userForm = createFormState({
  name: '',
  email: ''
});

// Add validation (OOP encapsulation)
userForm.addValidator('email', (value) => {
  if (!value.includes('@')) return 'Valid email required';
});

Production Bundle Optimization

// ✅ Tree-shakable imports (recommended)
import { renderToString } from '@coherent.js/core';
import { createFormState } from '@coherent.js/state';
import { logComponentTree } from '@coherent.js/devtools/visualizer';

// ❌ Avoid: Import entire packages
import * as coherent from '@coherent.js/core';

📊 Performance Benchmarks

Metric	Coherent.js	Traditional Frameworks
Rendering Speed	247 renders/sec	89 renders/sec
Memory Usage	50MB average	60MB+

🏗️ Architecture Overview

📦 Core Framework (382.4KB source)
├── Components (pure FP objects)
├── Rendering (SSR + streaming)
├── Performance (LRU caching)
└── Utils (tree-shakable)

🧩 State Management (71.0KB source)
├── Reactive State (core)
├── Enhanced Patterns (FormState, ListState)
├── Persistence & Validation
└── Tree-shakable modules

🌐 API Framework (88.7KB source)
├── Smart Routing (LRU cached)
├── Middleware & Security
├── Validation & Serialization
└── Modular exports

🔧 DevTools (130.8KB source)
├── Component Visualizer
├── Performance Dashboard
├── Enhanced Error Context
└── Tree-shakable

📚 Documentation

Getting Started - 5-minute setup
Production Guide - Bundle optimization & deployment
Migration Guide - From React/Vue/Express
API Reference - Complete documentation
Examples - Full-stack applications

📦 Which Package Do I Need?

Use Case	Package(s)
Server-side rendering	`@coherent.js/core`
Client-side hydration	`@coherent.js/core` + `@coherent.js/client`
Express integration	`@coherent.js/core` + `@coherent.js/integrations`
Fastify integration	`@coherent.js/core` + `@coherent.js/integrations`
Next.js integration	`@coherent.js/core` + `@coherent.js/integrations`
State management	`@coherent.js/state`
Forms & validation	`@coherent.js/forms`
SEO (meta tags, sitemap, JSON-LD)	`@coherent.js/seo`
Database ORM	`@coherent.js/database`
API routing & middleware	`@coherent.js/api`
Internationalization	`@coherent.js/i18n`
Testing utilities	`@coherent.js/tooling/testing`
Performance profiling & optimization	`@coherent.js/devtools/performance`

All packages are ESM-only and require Node.js 22+. Install with pnpm add @coherent.js/<name>.

🛠️ Development Tools

// Development only (excluded from production bundle)
import { logComponentTree } from '@coherent.js/devtools/visualizer';
import { createPerformanceDashboard } from '@coherent.js/devtools/performance';

// Component debugging
logComponentTree(MyComponent, 'MyComponent', {
  colorOutput: true,
  showProps: true
});

// Performance monitoring
const dashboard = createPerformanceDashboard();
dashboard.start();

🚀 Production Deployment

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'coherent-core': ['@coherent.js/core'],
          'coherent-state': ['@coherent.js/state']
        }
      }
    }
  }
};

📦 Packages

Core

@coherent.js/core - Framework core (382.4KB source)
@coherent.js/state - State management (71.0KB source)
@coherent.js/api - API framework (88.7KB source)
@coherent.js/client - Client utilities (83.4KB source)

Features

@coherent.js/database - Database adapters (121.8KB source)
@coherent.js/forms - Form utilities (72.1KB source)
@coherent.js/devtools - Development tools (130.8KB source)

Integrations

@coherent.js/integrations - Framework integration adapters via subpath exports (/express, /fastify, /koa, /nextjs, /astro, /remix, /sveltekit)

Tooling

@coherent.js/tooling - Testing utilities (/testing subpath) and Language Server (coherent-language-server binary)
coherent-language-support - VS Code extension

IDE Support

Coherent.js provides first-class IDE support for an excellent developer experience.

VS Code Extension

Install the Coherent.js Language Support extension from the VS Code Marketplace for:

IntelliSense - Autocomplete for HTML attributes and event handlers
Validation - Real-time warnings for invalid attributes and HTML nesting
Snippets - Quick patterns like cel, ccomp, cinput, and more
Hover Info - Type information and documentation on hover

# Install from command line
code --install-extension coherentjs.coherent-language-support

Or search "Coherent.js Language Support" in the VS Code Extensions panel.

Language Server (for other editors)

The @coherent.js/tooling package ships a coherent-language-server binary that provides LSP support for any editor:

# Install globally
npm install -g @coherent.js/tooling

# Run the server
coherent-language-server --stdio

Configure your editor's LSP client to use coherent-language-server for JavaScript and TypeScript files.

🎯 Production Validation

All performance claims validated with real measurements:

✅ Bundle Analysis: Real file sizes, not mock data
✅ Performance: 247 renders/sec with LRU caching
✅ Optimization: 100% tree-shaking ready across all packages

🆘 Getting Help

📖 Documentation - Complete guides and API reference
🚀 Examples - Full-stack applications
🐛 Issues - Report bugs
💬 Discussions - Community support

📄 License

🎉 Start building high-performance web applications with Coherent.js today!