Askr

Askr is an actor-backed UI runtime for TypeScript applications. It provides explicit reactivity, routed application startup, server-side rendering, and static-site generation entrypoints.

Quick Start

import { state } from '@askrjs/askr';
import { createIsland } from '@askrjs/askr/boot';

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

  return <button onClick={() => setCount((value) => value + 1)}>{count()}</button>;
}

createIsland({ root: document.body, component: Counter });

What It Provides

Runtime

@askrjs/askr exports the core runtime primitives: state(), derive(), selector(), defineContext(), readContext(), getSignal(), and the JSX runtime exports.

App startup, routing, async resources, data helpers, and error boundaries live on their own subpaths.

Explicit reactivity

State is read through getter functions and updated through setter functions.

const [count, setCount] = state(0);
console.log(count());
setCount(1);

Routing and app startup

Startup belongs in @askrjs/askr/boot. Routing helpers live in @askrjs/askr/router.

import { createSPA } from '@askrjs/askr/boot';
import { getManifest, registerRoutes, route } from '@askrjs/askr/router';

registerRoutes(() => {
  route('/', () => <Home />);
  route('/about', () => <About />);
});

createSPA({
  root: document.body,
  manifest: getManifest(),
});

Async resources

resource() manages async work with cancellation support.

import { resource } from '@askrjs/askr/resources';

function Data({ id }: { id: string }) {
  const data = resource(async ({ signal }) => {
    const response = await fetch(`/api/${id}`, { signal });
    return response.json();
  }, [id]);

  if (data.pending) return <div>Loading...</div>;
  if (data.error) return <div>Failed to load</div>;
return <div>{data.value.name}</div>;
}

Query and mutation helpers live in @askrjs/askr/data.

Developer error boundaries

ErrorBoundary is the opt-in boundary primitive for render-time failures. It renders a visible fallback in development, still logs the underlying error, and can reset when your app state changes.

import { ErrorBoundary } from '@askrjs/askr/components';

function App() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong</div>}>
      <FlakyView />
    </ErrorBoundary>
  );
}

Documentation

• Documentation Index
• Installation
• Quick Start
• State Guide
• Router Guide
• Resources Guide
• SSG Guide
• Runtime Enforcement
• Determinism
• API Reference

Release Notes

The published package is versioned with the repository package.json. Release workflows validate the version tag before publishing.

Install

npm install @askrjs/askr

License

Apache 2.0