Skip to content

Signy js

Modern Reactive JavaScript Framework

Signals, classes and plain HTML templates.
Only what changed updates. No virtual DOM, no build step.

CDN
<script src="https://cdn.jsdelivr.net/npm/signy@1/dist/signy.global.min.js"></script>
npm
npm install signy
yarn
yarn add signy
pnpm
pnpm add signy
Source
git clone https://github.com/alopia/signy.git
cd signy
npm install
npm run build:all
  • Signals
  • No virtual DOM
  • TypeScript
  • MIT License

Built for the Modern Web

Signy was written from scratch in 2026. No legacy APIs to keep alive, no compatibility layers, just modern JavaScript that runs in the browser as it is.

  • Native ES modules with entry points per feature, such as signy/core and signy/router
  • Tree shaking friendly, with no side effects on import
  • A global build for a plain <script> tag
  • ES2017 and ES5 builds when you need older browsers

Fine Grained by Design

A component renders once. After that, a signal write updates only the text nodes and attributes that read it. There is no virtual DOM to diff and no component to render again.

How Signy works

  • Signals track who reads them, so there are no dependency arrays
  • Computed values are cached until a signal they read changes
  • Writes are batched and applied in one microtask
  • Keyed lists move existing rows instead of building new ones

No Build Step Required

The html tagged template turns markup into DOM nodes right in the browser. Load one script and write a component. Add JSX and a bundler later, if you ever want them.

  • Templates are standard JavaScript, with no compiler and no custom syntax
  • Bind a function and it updates: ${() => count.value}
  • Events are attributes: onClick, onInput, onSubmit
  • JSX through the same compiler Solid uses, when you have a build

A live Signy component. Click it.

Best of Classes and Functions

Components are classes, with state as fields and behavior as methods. Every primitive also has a factory function, so you can pick the style that reads best and mix both.

// Classes
const count = new Signal(0);
const double = new Computed(() => count.value * 2);

// Or factory functions
const name = signal('Ada');
const upper = computed(() => name.value.toUpperCase());

TypeScript First

Signy is written in strict TypeScript. Signals infer their type from the first value, and a component declares its props once, as a type parameter.

interface GreetingProps {
  name: string;
}

class Greeting extends Component<GreetingProps> {
  protected render() {
    return html`<p>Hello ${this.props.name}</p>`;
  }
}

Batteries Included

The parts most apps need ship in the same package, built on the same signals. Import only the entry points you use.

  • A router with nested routes, guards, loaders and lazy routes
  • A deep reactive store for nested state
  • Resources for async data, with loading and error state
  • Context to share values down the component tree
  • Show, For, Switch, Portal, Suspense and ErrorBoundary

Built for AI Workflows

Signy ships with rules for AI assistants, so they write Signy components instead of guessing React hooks.

Set up your assistant

  • A rules file with the patterns to use and the mistakes to avoid
  • llms.txt and llms-full.txt for tools that look them up
  • A Markdown copy of every docs page
  • Consistent names and patterns across the whole API

Ready to write your first component?

Load one script, extend Component and render some HTML.

Read the docs