# Typed

> A TypeScript toolkit built on Effect for reactive applications, accessible UI, and composable libraries.

## Learn
- [Cooperative by design](https://tylors.github.io/typed-smol/explore/cooperative-by-design/): Effectful web applications that respect a person's work: explicit lifetimes, meaningful state, portable templates, and inclusive interactions.
- [Application developers](https://tylors.github.io/typed-smol/explore/application-developers/): Build a working order editor, share its state between views, and choose the next lesson from the feature you need to ship.
- [Library developers](https://tylors.github.io/typed-smol/explore/library-developers/): Design a reusable account picker by separating state, interaction, output, and the lifetime each caller controls.
- [Learn the UI primitives](https://tylors.github.io/typed-smol/explore/ui/): Build interfaces by understanding their state, keyboard behavior, native hosts, and accessibility contracts.
- [Fx: work arrives](https://tylors.github.io/typed-smol/explore/fx-push-reactivity/): Build and run producer-driven work with Effect values, errors, services, and cleanup.
- [Mounting DOM output](https://tylors.github.io/typed-smol/explore/mounting-dom-output/): Render a live RenderEvent Fx into one real browser root with an explicit lifetime.
- [RenderEvent: any UI can participate](https://tylors.github.io/typed-smol/explore/render-event-substrate/): Choose the output boundary that matches the renderer you already have.
- [Render your first template](https://tylors.github.io/typed-smol/explore/render-your-first-template/): Write a static template, add one live value, and mount it in the browser.
- [Attributes, properties, and boolean state](https://tylors.github.io/typed-smol/explore/template-element-bindings/): Choose the exact browser field a scalar interpolation owns, including sparse attributes and boolean presence.
- [Building Fx values](https://tylors.github.io/typed-smol/explore/building-fx/): Start with the smallest constructor that matches your producer, then add typed failure, services, and cleanup where they actually exist.
- [Choose an Fx producer dynamically](https://tylors.github.io/typed-smol/explore/fx-dynamic-producers/): Build a workspace feed whose configuration, connection, and cleanup are resolved when it is observed.
- [Sink: write Fx values somewhere useful](https://tylors.github.io/typed-smol/explore/sink-writing-effects/): Give an Fx a typed consumer without coupling the producer to logging, storage, transport, or UI.
- [Subject: publish events to many consumers](https://tylors.github.io/typed-smol/explore/subject-event-publications/): Connect independently owned producers and consumers through one scoped, typed publication boundary.
- [Transforming Fx](https://tylors.github.io/typed-smol/explore/transforming-fx/): Turn pushed values into useful domain data without hiding failures, services, or timing.
- [Derive transitions and bounded batches](https://tylors.github.io/typed-smol/explore/fx-stateful-transforms/): Carry only the local history a transform needs, then expose transitions, changes, and groups explicitly.
- [Flatten Fx with an explicit policy](https://tylors.github.io/typed-smol/explore/fx-higher-order-and-concurrency/): Choose whether inner Fx overlap, wait, replace one another, or are ignored.
- [Composing Fx](https://tylors.github.io/typed-smol/explore/composing-fx/): Coordinate independent producers, then recognize when a value starts work of its own.
- [Select values and bound cardinality](https://tylors.github.io/typed-smol/explore/fx-selection-and-cardinality/): Keep, omit, gate, and stop pushed values without confusing selection with cancellation policy.
- [Model time, repetition, and rate](https://tylors.github.io/typed-smol/explore/fx-time-and-rate/): Put clocks, quiet periods, rate windows, and retries in the Fx graph with explicit cancellation.
- [Recover typed failures without losing causes](https://tylors.github.io/typed-smol/explore/fx-errors-and-recovery/): Translate expected errors, retry subscriptions, and materialize complete outcomes deliberately.
- [Provide services and own subscriptions](https://tylors.github.io/typed-smol/explore/fx-services-and-lifetime/): Keep Effect requirements explicit while giving each Fx run a clear Layer, Scope, and shutdown boundary.
- [Consuming Fx](https://tylors.github.io/typed-smol/explore/consuming-fx/): Choose the runner that matches what your application needs from a producer.
- [The Fx marble atlas](https://tylors.github.io/typed-smol/explore/fx-operator-atlas/): Trace values, errors, completion and cancellation through every public Fx operation.
- [Authoring Typed templates](https://tylors.github.io/typed-smol/explore/authoring-typed-templates/): Build a reusable search field by separating its fixed markup, live values, native events, and component lifetime.
- [Using DomRenderEvent](https://tylors.github.io/typed-smol/explore/dom-render-event/): Carry exact Nodes, DocumentFragments, Wires, and nested rendered values through a Typed dynamic range without cloning them.
- [RefSubject: build the model before the view](https://tylors.github.io/typed-smol/explore/refsubject-renderer-independent-state/): Develop a review-queue selection model with named commands, derived queries, typed consumers, and a lifetime that matches the feature.
- [Rendering HTML on the server](https://tylors.github.io/typed-smol/explore/rendering-html-on-the-server/): Serialize a template to HTML chunks or one string without coupling it to HTTP transport.
- [Spread props and data records](https://tylors.github.io/typed-smol/explore/template-spreads-data/): Combine native attributes, DOM properties, dataset values, and event handlers without losing their individual semantics.
- [Hydrate RefSubject state through Template](https://tylors.github.io/typed-smol/explore/refsubject-template-hydration/): Carry Schema-checked RefSubject state from Typed HTML into the adopted browser DOM.
- [RefSubject inputs, equality, and lifetime](https://tylors.github.io/typed-smol/explore/refsubject-sources-equality-and-lifetime/): Use one constructor for values, Effects, Streams, and Fx while knowing when each source starts and stops.
- [Compose state around the invariant](https://tylors.github.io/typed-smol/explore/composing-refsubject-state/): Build a workspace review model whose writable state, derived selection, and public capabilities agree.
- [Derived, conditional, and accumulated state](https://tylors.github.io/typed-smol/explore/derived-conditional-and-accumulated-state/): Turn a queue model into live queries while preserving absence, service requirements, and the distinction between state and event history.
- [Choose specialized state from the questions it answers](https://tylors.github.io/typed-smol/explore/specialized-refsubject-state/): Model a review queue's ordered rows, keyed lookup, optional focus, field edits, and settled outcomes with the appropriate RefSubject operations.
- [Working with Versioned state](https://tylors.github.io/typed-smol/explore/versioned-state/): Keep a current read, update stream, and invalidation token together when a value comes from an independently owned source.
- [State transactions and bidirectional views](https://tylors.github.io/typed-smol/explore/state-transactions-and-bidirectional-views/): Keep a reservation decision coherent, separate remote work from local commits, and choose when a writable representation is safe.
- [Share a reactive capability through Context](https://tylors.github.io/typed-smol/explore/shared-state-contracts/): Give independently built routes, commands, and views one selection model without exposing unnecessary write authority.
- [Async data without loading flags](https://tylors.github.io/typed-smol/explore/async-data/): Represent loading, refreshes, failure, and optimistic edits as values that work in any renderer.
- [Build an asynchronous issue search](https://tylors.github.io/typed-smol/explore/async-data-requests-and-cache/): Connect a decoded request, replacement policy, resource identity, AsyncData, and a working template in one scoped feature.
- [AsyncData optimistic edits and reconciliation](https://tylors.github.io/typed-smol/explore/async-data-optimistic-edits/): Publish provisional values, preserve rollback history, and decide which server response may commit when edits overlap.
- [Using HtmlRenderEvent](https://tylors.github.io/typed-smol/explore/html-render-event/): Carry ordered, trusted renderer-owned HTML chunks through Typed SSR while keeping completion and the trust boundary explicit.
- [IDs with explicit time and entropy](https://tylors.github.io/typed-smol/explore/id/): Generate branded identifiers, retain identity across renders, and replace generation deterministically in tests.
- [Class names without className replacement](https://tylors.github.io/typed-smol/explore/dom-class-names/): Understand the local token ledger that lets Typed update its classes while preserving classes added by other code.
- [Hydrating Typed HTML](https://tylors.github.io/typed-smol/explore/hydrating-typed-html/): Adopt compatible Typed SSR output below one DOM host, or construct fresh output when the adoption contract does not match.
- [What a template can render](https://tylors.github.io/typed-smol/explore/renderable-normalization/): See how ordinary values, Effect values, streams, arrays, and renderer output become one template part without losing errors or requirements.
- [Preserve multi-node DOM output](https://tylors.github.io/typed-smol/explore/wire-and-rendered-dom-output/): Hand existing DOM output across a renderer boundary, including a stable multi-node range when one is genuinely needed.
- [Build a save control with a complete interaction policy](https://tylors.github.io/typed-smol/explore/building-ui-components/): Start with a normal template, add local state when needed, and test the same save behavior the button runs.
- [Change a keyed template collection](https://tylors.github.io/typed-smol/explore/keyed-template-collections/): Keep one rendered range per stable key so insertions, removals, and moves preserve the browser state that belongs to an item.
- [Handle native events with Effect](https://tylors.github.io/typed-smol/explore/native-events-with-effect/): Attach real browser listeners whose work is an Effect, while keeping listener options, errors, services, and lifetime explicit.
- [Server rendering and hydration](https://tylors.github.io/typed-smol/explore/server-rendering-and-hydration/): Send buffered or streamed Typed HTML from Effect HTTP, then adopt that same inner template in the browser.
- [The template compilation pipeline](https://tylors.github.io/typed-smol/explore/template-compilation-pipeline/): Build a renderer or framework target on the public Template, HtmlChunk, and RenderEvent contracts.
- [Choosing Typed UI components](https://tylors.github.io/typed-smol/explore/choosing-ui-components/): Develop a report screen by assigning each interaction to the browser, a Typed family, or application state.
- [UI collections, focus, and keyboard behavior](https://tylors.github.io/typed-smol/explore/ui-collections-and-focus/): Build a changing editor toolbar and trace the relationship between command identity, DOM registration, browser focus, and application state.
- [Selection, autocomplete, and command surfaces](https://tylors.github.io/typed-smol/explore/selection-autocomplete-and-command-surfaces/): Build a project switcher from a compact known-value choice to searchable input, then attach commands to the project actually selected.
- [Direct updates, local reconciliation](https://tylors.github.io/typed-smol/explore/dom-updates-and-reconciliation/): What the DOM renderer creates, mounts, hydrates, and reconciles—and the local size each cost depends on.
- [Implement a RenderTemplate target](https://tylors.github.io/typed-smol/explore/implementing-render-template/): Build or decorate a renderer at the public RenderTemplate boundary while keeping parsing, output ownership, and platform policy inside the target.
- [Reference the native element](https://tylors.github.io/typed-smol/explore/template-references-and-element-access/): Use ref for the small set of browser integrations that need the exact element, with an Effect-owned lifetime and explicit hydration behavior.
- [Guards that can parse and ask for services](https://tylors.github.io/typed-smol/explore/guard/): Separate a normal non-match from an operation that failed while selecting or transforming input.
- [DOM scalar parts and attributes](https://tylors.github.io/typed-smol/explore/dom-parts-and-attributes/): See which exact DOM location each scalar template interpolation owns and what one push changes.
- [Delegate browser events from a renderer](https://tylors.github.io/typed-smol/explore/event-source-delegation/): Use EventSource when a renderer needs scoped, native delegation across the concrete elements it produced.
- [Namespace-aware platform markup](https://tylors.github.io/typed-smol/explore/template-namespaces-and-platform-markup/): Author SVG and MathML directly; Typed builds the native namespace transitions and attributes the platform expects.
- [Routes, Matchers, and Navigation](https://tylors.github.io/typed-smol/explore/routing-routes-matchers-and-navigation/): Build a small linked review app, then trace which contract owns URL input, history, selected work, and page readiness.
- [Route: make the URL an input contract](https://tylors.github.io/typed-smol/explore/route-typed-url-inputs/): Design shareable queue filters and issue links, decode domain parameters once, and distinguish malformed URLs from missing pages.
- [Matcher: keep the selected page live](https://tylors.github.io/typed-smol/explore/router-navigation-live-selection/): Follow issue URLs through typed selection, cancellable loading, route-local services, retained layouts, and scoped recovery.
- [Navigation: history and unsaved-work decisions](https://tylors.github.io/typed-smol/explore/navigation-as-an-effect-service/): Design a queue's Back behavior, observe committed versus pending destinations, and coordinate an editor's leave confirmation through Effect.
- [Schedule DOM rendering](https://tylors.github.io/typed-smol/explore/render-scheduling/): Change when local DOM work runs without changing what a template owns or how a dynamic part is updated.
- [Interpolate into text-only elements](https://tylors.github.io/typed-smol/explore/template-text-only-contexts/): Keep textarea, title, script, and style content in the context the browser gives it, with explicit limits around escaping, closing tags, and trust.
- [Testing Typed systems](https://tylors.github.io/typed-smol/explore/testing-typed-systems/): Turn state, request ordering, DOM identity, and cleanup promises into tests that can actually disprove them.
- [Serve a Matcher through Effect HTTP](https://tylors.github.io/typed-smol/explore/integrating-matcher-with-effect-http/): Run typed issue pages as request-local GET HTML routes, choose buffered or streaming responses, and test the real HTTP boundary.
- [Meter: communicate a measurement in a known range](https://tylors.github.io/typed-smol/explore/ui-meter/): Explain bounded measurements, threshold semantics, native rendering, and the difference from progress or input.
- [Alert: urgent messages without moving focus](https://tylors.github.io/typed-smol/explore/ui-alert/): Use assertive live-region semantics deliberately and distinguish announcements from interactive recovery.
- [Heading: document hierarchy independent of visual size](https://tylors.github.io/typed-smol/explore/ui-heading/): Use explicit heading levels while keeping outline semantics and design-system typography separate.
- [Group: make related controls understandable together](https://tylors.github.io/typed-smol/explore/ui-group/): Name a semantic group explicitly without inventing fieldset behavior or implicit label relationships.
- [Separator: a division without an interaction](https://tylors.github.io/typed-smol/explore/ui-separator/): Choose semantic separation, orientation, and styling without implying a draggable splitter.
- [VisuallyHidden: retain meaning without visual layout](https://tylors.github.io/typed-smol/explore/ui-visually-hidden/): Provide accessible text with clipping while distinguishing visual hiding, semantic hiding, and focus visibility.
- [Button: actions with native activation](https://tylors.github.io/typed-smol/explore/ui-button/): Choose button types, connect Effect handlers, and preserve browser activation through styling and custom hosts.
- [Link: navigation that still behaves like a link](https://tylors.github.io/typed-smol/explore/ui-link/): Understand which clicks enter Typed Navigation and which remain browser-owned anchor behavior.
- [Checkbox: boolean choices and mixed summaries](https://tylors.github.io/typed-smol/explore/ui-checkbox/): Connect native checked and indeterminate properties to one hydrated state without confusing mixed presentation with submitted data.
- [Switch: a stable name for an on/off setting](https://tylors.github.io/typed-smol/explore/ui-switch/): Model a binary setting with native button activation and explicit persistence and form participation.
- [RadioGroup: one choice and one native group](https://tylors.github.io/typed-smol/explore/ui-radio-group/): Combine native radio inputs, named form values, and optional collection-based focus movement.
- [Select: a popover-backed list of choices](https://tylors.github.io/typed-smol/explore/ui-select/): Assemble trigger, content, and options while making keyboard collection and native form differences explicit.
- [Slider: continuous native range input](https://tylors.github.io/typed-smol/explore/ui-slider/): Connect input-time numeric updates to an accessible range control and an explicit domain value.
- [SpinButton: numeric entry at the change boundary](https://tylors.github.io/typed-smol/explore/ui-spin-button/): Use native number entry while keeping empty drafts, finite state, bounds, and commit timing explicit.
- [Form: schema-bound controls and submission state](https://tylors.github.io/typed-smol/explore/ui-form/): Understand decoded values, field codecs, form context, validation, metadata, and the native submit boundary.
- [Forms as a browser contract](https://tylors.github.io/typed-smol/explore/forms-as-a-browser-contract/): Build a trial-request editor by connecting native controls, decoded schema values, accessible errors, and an explicit submission preview.
- [Combobox: editable queries and committed suggestions](https://tylors.github.io/typed-smol/explore/ui-combobox/): Keep input focus stable while navigating filtered suggestions and distinguish text from a validated choice.
- [Listbox: visible choices with selection following focus](https://tylors.github.io/typed-smol/explore/ui-listbox/): Build a persistent single-choice list and understand when navigation commits the value.
- [Menu: commands, checked items, and nested popups](https://tylors.github.io/typed-smol/explore/ui-menu/): Compose native popover command menus without confusing active focus with application state.
- [Menubar: a persistent command row with popup menus](https://tylors.github.io/typed-smol/explore/ui-menubar/): Connect horizontal command focus to independently owned submenu popovers.
- [Tabs: panel visibility and deliberate activation](https://tylors.github.io/typed-smol/explore/ui-tabs/): Choose automatic or manual activation and keep tab identity separate from panel lifetime.
- [Tab: the singular module and reusable tab instances](https://tylors.github.io/typed-smol/explore/ui-tab/): Use the Tab re-export correctly and design instance-safe local panel switches.
- [Toolbar: one keyboard surface for related commands](https://tylors.github.io/typed-smol/explore/ui-toolbar/): Compose a roving command group while keeping command state and focus state independent.
- [Tree: hierarchical focus and expansion](https://tylors.github.io/typed-smol/explore/ui-tree/): Model parent identities and visible descendants without mistaking focus for file selection.
- [Grid: spatial navigation with active-descendant focus](https://tylors.github.io/typed-smol/explore/ui-grid/): Build a two-dimensional keyboard surface and distinguish it from an editable spreadsheet.
- [TreeGrid: hierarchical rows and spatial cell focus](https://tylors.github.io/typed-smol/explore/ui-tree-grid/): Keep row expansion identities separate from cell focus identities in a hierarchical grid.
- [Carousel: slide identity, controls, and rotation policy](https://tylors.github.io/typed-smol/explore/ui-carousel/): Build a manual slide sequence and understand the state required before adding automatic motion.
- [WindowSplitter: accessible range state for resizable panes](https://tylors.github.io/typed-smol/explore/ui-window-splitter/): Connect native pointer dragging and keyboard resizing to the same bounded pane layout.
- [Overlays, disclosure, and transient UI](https://tylors.github.io/typed-smol/explore/overlays-disclosure-and-transient-ui/): Develop a report's explanation, legend, and archive decision with distinct native visibility and dismissal contracts.
- [Dialog: a named task with a native lifecycle](https://tylors.github.io/typed-smol/explore/ui-dialog/): Separate opening, cancel requests, accepted actions, and native modal behavior.
- [NativeDialog: synchronize an existing dialog](https://tylors.github.io/typed-smol/explore/ui-native-dialog/): Connect open state to show, showModal, and close without adopting compound parts.
- [Popover: supporting content in the top layer](https://tylors.github.io/typed-smol/explore/ui-popover/): Build a manual popover with explicit dismissal and honest focus expectations.
- [NativePopover: observe open state on a real element](https://tylors.github.io/typed-smol/explore/ui-native-popover/): Own markup and reverse toggle synchronization while reusing the native observer.
- [Disclosure: reveal content without leaving the page](https://tylors.github.io/typed-smol/explore/ui-disclosure/): Compose native details and summary with hydrated state and predictable structure.
- [NativeDetails: connect details.open to application state](https://tylors.github.io/typed-smol/explore/ui-native-details/): Use a one-way ref with an explicit browser-to-state toggle path.
- [Tooltip: a description that survives pointer and keyboard use](https://tylors.github.io/typed-smol/explore/ui-tooltip/): Connect a stable description ID, focusable anchor, delays, and manual popover content.
- [Hovercard: keep interactive previews reachable](https://tylors.github.io/typed-smol/explore/ui-hovercard/): Preserve pointer and focus transfer into a named non-modal preview.
- [Component: generators that return renderable values](https://tylors.github.io/typed-smol/explore/ui-component/): Understand zero-argument values, parameterized components, pipeline arguments, and E/R inference.
- [Focusable: an explicit keyboard entry point](https://tylors.github.io/typed-smol/explore/ui-focusable/): Use tabindex deliberately without mistaking focusability for an interaction pattern.
- [Collection: mounted item identity and order](https://tylors.github.io/typed-smol/explore/ui-collection/): Register runtime element handles with scope cleanup and explicit navigation metadata.
- [Composite: active identity, movement, and focus](https://tylors.github.io/typed-smol/explore/ui-composite/): Build keyboard movement from a collection while choosing roving or virtual focus explicitly.
- [Role: semantic output without invented behavior](https://tylors.github.io/typed-smol/explore/ui-role/): Use an explicit role while preserving naming, structure, and native interactions.
- [Dom: types, events, props, refs, and host rendering](https://tylors.github.io/typed-smol/explore/ui-dom/): Preserve a component contract while extending its real DOM host.
- [Storybook: mount a story with an owned render scope](https://tylors.github.io/typed-smol/explore/ui-storybook/): Supply application services, await visible output, and dispose every mounted story.
- [HttpRouter: serve Typed routes through Effect HTTP](https://tylors.github.io/typed-smol/explore/ui-http-router/): Understand GET registration, decoding, request services, and buffered versus streaming HTML.

## API reference
- [@typed/astro](https://tylors.github.io/typed-smol/reference/packages/@typed/astro/): 9 unique exports
- [@typed/async-data](https://tylors.github.io/typed-smol/reference/packages/@typed/async-data/): 31 unique exports
- [@typed/fx](https://tylors.github.io/typed-smol/reference/packages/@typed/fx/): 773 unique exports
- [@typed/guard](https://tylors.github.io/typed-smol/reference/packages/@typed/guard/): 32 unique exports
- [@typed/id](https://tylors.github.io/typed-smol/reference/packages/@typed/id/): 38 unique exports
- [@typed/navigation](https://tylors.github.io/typed-smol/reference/packages/@typed/navigation/): 28 unique exports
- [@typed/router](https://tylors.github.io/typed-smol/reference/packages/@typed/router/): 170 unique exports
- [@typed/template](https://tylors.github.io/typed-smol/reference/packages/@typed/template/): 129 unique exports
- [@typed/tsconfig](https://tylors.github.io/typed-smol/reference/packages/@typed/tsconfig/): 4 unique exports
- [@typed/ui](https://tylors.github.io/typed-smol/reference/packages/@typed/ui/): 533 unique exports

- [Reference manifest](https://tylors.github.io/typed-smol/docs-manifest.json): exhaustive page, Markdown, and JSON routes
- [Full reference Markdown](https://tylors.github.io/typed-smol/docs/reference/llms-full.txt)
- [Effect v4](https://effect.website/docs/v4/): underlying runtime, errors, services, and resources