Signal-Based Reactivity

Build faster
with Exter

A modern frontend framework with fine-grained reactivity, Virtual DOM, built-in routing, global state, plugin system, and zero external dependencies.

Get Started
npx create-exter-app my-app
live-demo.tsx

const [count, setCount] = createSignal(0);

// ↑ Fine-grained reactivity — no re-render needed

0
~4KB
Bundle Size
gzipped
0
Zero Dependencies
external deps
100%
TypeScript
type coverage
10+
Features
built-in
Core Features

Everything you need, built-in

No more cobbling together dozens of libraries. Exter ships with a complete toolkit for building modern web applications.

Signal-Based Reactivity

Fine-grained reactive signals with auto-tracking dependencies. Only the exact DOM nodes that depend on changed data are updated — no full re-renders.

Virtual DOM + Diffing

Lightweight Virtual DOM with an efficient recursive diff algorithm and batched patch operations for optimal rendering performance.

Component Hooks

Familiar hooks API — useState, useEffect, useMemo — backed by signals for fine-grained updates instead of full component re-renders.

SPA Router

Built-in client-side router with dynamic parameters, nested routes, navigation guards, and history API integration.

Global State Store

Reactive global state management integrated with the signal system. No Redux, no Zustand — just createStore() and you're done.

Plugin System

Extensible plugin architecture with lifecycle hooks, middleware pipeline, and dependency injection for community extensions.

Data Fetching

Built-in useFetch with response caching, TTL, abort controllers, and automatic loading/error state management.

Scoped CSS

Component-level style isolation using auto-generated data attributes. No CSS-in-JS runtime overhead, no class name collisions.

Dev / Prod Modes

Development mode with verbose logging, performance tracing, and warnings. Production mode strips all debug code for minimal overhead.

Reactivity System

Signal-Based Reactivity

Auto-tracking dependency graph

Virtual DOM

Virtual DOM Diffing

Efficient tree reconciliation

Plugin System

Plugin Ecosystem

Extensible middleware architecture

Code Examples

Clean, intuitive API

Familiar patterns, modern implementation. If you know React, you already know Exter.

TYPESCRIPT 
import { createSignal, createEffect } from 'exter';

// Create a reactive signal
const [count, setCount] = createSignal(0);

// Auto-tracking effect — re-runs when count changes
createEffect(() => {
  document.title = `Count: ${count()}`;
});

// Only the effect above re-runs, nothing else!
setCount(1);  // title → "Count: 1"
setCount(2);  // title → "Count: 2"
TYPESCRIPT 
import { h, createApp, useState } from 'exter';

function Counter() {
  const [count, setCount] = useState(0);

  return h('div', { className: 'counter' },
    h('h2', null, `Count: ${count}`),
    h('button', {
      onClick: () => setCount(c => c + 1)
    }, 'Increment')
  );
}

createApp(Counter, document.getElementById('root'));
TYPESCRIPT 
import { createRouter } from 'exter';

const router = createRouter({
  routes: [
    { path: '/',          component: HomePage },
    { path: '/about',     component: AboutPage },
    { path: '/user/:id',  component: UserProfile },
    { path: '/blog/*',    component: BlogCatchAll },
  ],
  beforeEach: (to, from) => {
    console.log(`${from?.path} → ${to.path}`);
    return true; // allow navigation
  },
});

router.push('/user/42');
TYPESCRIPT 
import { createStore, createEffect } from 'exter';

// Global reactive store — no Redux needed!
const [state, setState] = createStore({
  user: null,
  theme: 'dark',
  notifications: [],
});

// Reactive — auto-tracks 'theme' dependency
createEffect(() => {
  document.body.className = state().theme;
});

// Partial updates
setState({ theme: 'light' });
setState(prev => ({
  ...prev,
  notifications: [...prev.notifications, 'Hello!'],
}));
TYPESCRIPT 
import { pluginManager, devtools } from 'exter';

// Create a custom plugin
const analyticsPlugin = {
  name: 'analytics',
  install(ctx) {
    ctx.useMiddleware((context, next) => {
      const start = performance.now();
      next();
      ctx.devtools.log('analytics',
        `Action took ${performance.now() - start}ms`
      );
    });
  },
  onMount() {
    console.log('📊 Analytics ready');
  },
};

pluginManager.use(analyticsPlugin);
devtools.setMode('development');
TYPESCRIPT 
import { useFetch } from 'exter';

function UserList() {
  const { data, loading, error, refetch } = useFetch(
    'https://api.example.com/users',
    { cacheTTL: 60000 } // Cache 1 min
  );

  if (loading()) return h('div', null, 'Loading...');
  if (error())   return h('div', null, error().message);

  return h('ul', null,
    ...data().map(user =>
      h('li', { key: user.id }, user.name)
    ),
    h('button', { onClick: refetch }, '↻ Refresh')
  );
}
Performance

Blazing fast by design

Signal-based reactivity means Exter skips the expensive parts. No virtual DOM diff for simple state changes. No wasted renders. Just surgical DOM updates exactly where needed.

Benchmark: 10K row update
Exter (Signals) 12ms
SolidJS 15ms
Svelte 5 22ms
Vue 3 45ms
React 19 85ms
Angular 18 120ms

* Conceptual benchmark illustration. Lower is better.

Architecture

Clean, modular design

FOLDER STRUCTURE 
exter/
├── core/
│   ├── vdom.ts          # Virtual DOM engine (h, diff, patch, mount)
│   ├── reactivity.ts    # Signals, effects, memo, batch
│   ├── runtime.ts       # Components, hooks, scoped CSS
│   ├── router.ts        # SPA routing, dynamic params
│   └── plugins.ts       # Plugin system, useFetch, devtools
├── index.ts             # Public API exports
└── cli/
    └── create-exter-app # Project scaffolding CLI
Core
VDOM + Reactivity
Runtime
Components + Hooks
Extensions
Router + Plugins

Ready to build with Exter?

Start building modern, performant web applications with a framework designed for the future.

Read the Docs View Source