TypeScript throughout
Typed contracts for pages, services and state keep your application explicit.
A composable TypeScript framework 1.0.0-rc.1 ↗
Build full-stack
Build full-stack
TypeScript apps with
one cohesive framework.
UDIOT by Tagna brings web pages, reactive state, middleware and application services into one TypeScript toolkit. Compose the pieces you need, from your first route to your next AI workflow.
npm install @tagna/udiot@1.0.0-rc.1import { defineWebApp }
from '@tagna/udiot/web';
export const app = defineWebApp({
site: { name: 'My UDIOT app' },
seo: {
sitemap: true,
robots: true
}
});import { definePage }
from '@tagna/udiot/web';
export const page = definePage({
route: '/',
render: 'ssg',
loader: async () => ({
props: { message: 'Hello, UDIOT.' }
})
});import { Container, Injectable }
from '@tagna/udiot';
class GreetingService {
hello() { return 'Hello, UDIOT.'; }
}
Injectable()(GreetingService);
const root = new Container();
root.registerClass('greeting',
GreetingService, 'scoped');BuildConnectCompose
WebPages · Routes
MiddlewarePipelines · Validation
ServicesProviders · Scopes
StateStores · Actions
Composable by design
Connect middleware, scoped services and stores around your application.
Your choice of rendering
Use typed pages for server rendering, static sites and hybrid web apps.
Clear support boundaries
Evaluate the pinned RC with documented stable-candidate and experimental APIs.
How it works
Explicit contracts. Connected application layers.
Pages & renderingTyped routes, loaders, SSR and SSGReactive stateStores, subscriptions and time travelApplication servicesProviders, containers and service scopesMiddlewareValidation and reusable execution stepsData adaptersRepositories and database integrationsEvents & integrationsEvent bus, jobs and agent workflows
Choose the modules you need. See a composition recipe →
Developer experience
Real APIs. Readable code. Observable state.
store.mjs@tagna/udiot/browser
import { createStore }
from '@tagna/udiot/browser';
const store = createStore(
{ count: 0 },
(state, action) => ({
count: state.count + action.payload
})
);
await store.dispatch({
type: 'ADD', payload: 1
});
store.getState(); // { count: 1 }
store.undo();Typed contracts
Know the shape of your application.
Replaceable services
Choose explicit providers and scopes.
Observable updates
Subscribe to each state transition.
Time travel
Inspect history and undo a change.
Web & routing
Pages, loaders, rendering
Reactive state
Stores and time travel
Middleware
Compose execution steps
Dependency injection
Containers and scopes
Caching
Providers and invalidation
Event bus
Publish and subscribe
Background jobs
Queues and providers
Telemetry
Logs, metrics and tracing
ExperimentalDatabase adapters
Validate your integration
ExperimentalAI & agents
Tools and run workflows
ExperimentalEvaluating 1.0.0-rc.1? Review the support matrix for stable-candidate and experimental surfaces.
What will you build?
Start with UDIOT’s documented application patterns.