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.
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 });@askrjs/askr exports the core runtime primitives: state(), derive(),
selector(), defineScope(), readScope(), getSignal(), and the JSX
runtime exports.
Public APIs prefer functions and closures over classes. Lexical ownership uses
defineScope() and readScope(); there are no compatibility aliases for the
clean-break vocabulary.
App startup, routing, async resources, data helpers, and error boundaries live on their own subpaths.
State is read through getter functions and updated through setter functions.
const [count, setCount] = state(0);
console.log(count());
setCount(1);Startup belongs in @askrjs/askr/boot. Routing helpers live in
@askrjs/askr/router.
import { createSPA } from '@askrjs/askr/boot';
import { createRouteRegistry, route } from '@askrjs/askr/router';
const registry = createRouteRegistry(() => {
route('/', Home);
route('/about', About);
});
createSPA({
root: document.body,
registry,
});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.
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 Index
- Installation
- Quick Start
- State Guide
- Router Guide
- Resources Guide
- SSG Guide
- Runtime Enforcement
- Determinism
- API Reference
The published package is versioned with the repository package.json.
Release workflows validate the version tag before publishing.
npm install @askrjs/askrApache 2.0