# Typed

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

## Learn
- [Cooperative by design](https://tylors.github.io/typed/explore/cooperative-by-design/): Build Effectful web applications from pieces that preserve each other's contracts, ownership, timing, and semantics.
- [Share one model between two views](https://tylors.github.io/typed/explore/application-developers/): Give an editor and summary the same state instance, then test their shared quantity rule.
- [Library developers](https://tylors.github.io/typed/explore/library-developers/): Choose a reusable capability, preserve its error and service channels, and let the caller own its lifetime.
- [Learn the UI primitives](https://tylors.github.io/typed/explore/ui/): Choose a practical UI task, then follow its worked interaction and the module reference when you need exact contracts.
- [Fx: work arrives](https://tylors.github.io/typed/explore/fx-push-reactivity/): Compose work declaratively over time, with Effect fibers, interruption, and scoped cleanup.
- [Mounting DOM output](https://tylors.github.io/typed/explore/mounting-dom-output/): Embed a live view at one owned browser root with a single explicit lifetime.
- [RenderEvent: any UI can participate](https://tylors.github.io/typed/explore/render-event-substrate/): Choose DomRenderEvent or HtmlRenderEvent for output a foreign renderer already owns.
- [Render your first template](https://tylors.github.io/typed/explore/render-your-first-template/): Extend Quick Start with one live search field and verify its editing loop.
- [Attributes, properties, and boolean state](https://tylors.github.io/typed/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/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/explore/fx-dynamic-producers/): Choose a producer during observation and keep setup resources alive until it ends.
- [Sink: write Fx values somewhere useful](https://tylors.github.io/typed/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/explore/subject-event-publications/): Connect independently owned producers and consumers through one scoped, typed publication boundary.
- [Transforming Fx](https://tylors.github.io/typed/explore/transforming-fx/): Turn pushed values into useful domain data without hiding failures, services, or timing.
- [Carry local state through Fx](https://tylors.github.io/typed/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/explore/fx-higher-order-and-concurrency/): Declare how inner work runs over time: overlap, wait, replace, or ignore new arrivals.
- [Composing Fx](https://tylors.github.io/typed/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/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/explore/fx-time-and-rate/): Choose a clock boundary deliberately, then test it with the clock the feature owns.
- [Recover typed failures without losing causes](https://tylors.github.io/typed/explore/fx-errors-and-recovery/): Recover a failed job while keeping later input connected, then choose retry and fallback boundaries.
- [Provide services and own subscriptions](https://tylors.github.io/typed/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/explore/consuming-fx/): Choose the runner that matches what your application needs from a producer.
- [The Fx marble atlas](https://tylors.github.io/typed/explore/fx-operator-atlas/): Trace values, errors, completion and cancellation through every public Fx operation.
- [Authoring Typed templates](https://tylors.github.io/typed/explore/authoring-typed-templates/): Extract the completed search field into reusable markup while keeping its state with the page.
- [Using DomRenderEvent](https://tylors.github.io/typed/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/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/explore/rendering-html-on-the-server/): Choose Typed HTML serialization without duplicating HTTP transport and hydration policy.
- [Spread props and data records](https://tylors.github.io/typed/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/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/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/explore/composing-refsubject-state/): Build a workspace review model whose writable state, derived selection, and public capabilities agree.
- [Derived values and optional state](https://tylors.github.io/typed/explore/derived-conditional-and-accumulated-state/): Derive read-only values and make loss of selection observable with Computed and Filtered.
- [RefSubject specializations: complete directory](https://tylors.github.io/typed/explore/specialized-refsubject-state/): Find every public RefSubject specialization by the value it manages, with API links and focused examples.
- [Working with Versioned state](https://tylors.github.io/typed/explore/versioned-state/): Keep a current read, update stream, and invalidation token together when a value comes from an independently owned source.
- [Return results from serialized state updates](https://tylors.github.io/typed/explore/state-transactions-and-bidirectional-views/): Decide and commit from one current value with RefSubject.modify, and know when transaction-local operations are needed.
- [Share a reactive capability through Context](https://tylors.github.io/typed/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/explore/async-data/): Represent no data, loading, success, failure, and optimistic display as one state model.
- [Build an asynchronous issue search](https://tylors.github.io/typed/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/explore/async-data-optimistic-edits/): Keep a draft, a pending optimistic value, and stale acknowledgement rules explicit.
- [Using HtmlRenderEvent](https://tylors.github.io/typed/explore/html-render-event/): Carry ordered, trusted renderer-owned HTML chunks through Typed SSR while keeping completion and the trust boundary explicit.
- [@typed/id: generate and validate identifiers](https://tylors.github.io/typed/explore/id/): Create branded IDs through Effect, validate them at boundaries, and make generation deterministic in tests.
- [Class names without className replacement](https://tylors.github.io/typed/explore/dom-class-names/): Understand the local token ledger that lets Typed update its classes while preserving classes added by other code.
- [What a template can render](https://tylors.github.io/typed/explore/renderable-normalization/): Look up how a template position interprets values, arrays, and producers while retaining their errors and requirements.
- [Build a save control with a complete interaction policy](https://tylors.github.io/typed/explore/building-ui-components/): Build a save control with an explicit pending, failure, retry, and focused test policy.
- [Change a keyed template collection](https://tylors.github.io/typed/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/explore/native-events-with-effect/): Use a direct Effect for a known action, or read native event data with EventHandler.make.
- [Server rendering and hydration](https://tylors.github.io/typed/explore/server-rendering-and-hydration/): Extend a shared counter through an explicit server-to-browser handoff.
- [The template compilation pipeline](https://tylors.github.io/typed/explore/template-compilation-pipeline/): Follow an authored literal through the parser, target interpretation, and RenderEvent output.
- [Streaming SSR across framework boundaries](https://tylors.github.io/typed/explore/streaming-framework-integrations/): Keep React and Vue output streaming inside Typed, and identify the boundaries that buffer a component body.
- [UI collections, focus, and keyboard behavior](https://tylors.github.io/typed/explore/ui-collections-and-focus/): Build a changing toolbar and prove identity, registration, focus, and removal behavior.
- [Selection, autocomplete, and command surfaces](https://tylors.github.io/typed/explore/selection-autocomplete-and-command-surfaces/): Keep editable search, active suggestions, committed values, and command targets separate.
- [Direct updates, local reconciliation](https://tylors.github.io/typed/explore/dom-updates-and-reconciliation/): What the DOM renderer creates, mounts, hydrates, and reconciles—and the local size each cost depends on.
- [Decorate a RenderTemplate target](https://tylors.github.io/typed/explore/implementing-render-template/): Capture the existing RenderTemplate service and observe its output without changing application templates.
- [Reference the native element](https://tylors.github.io/typed/explore/template-references-and-element-access/): Use ref for the small set of browser integrations that need the exact element, with cleanup tied to the ref lifetime.
- [Guards that can parse and ask for services](https://tylors.github.io/typed/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/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/explore/event-source-delegation/): Use EventSource when a renderer needs scoped, native delegation across the concrete elements it produced.
- [Routes, Matchers, and Navigation](https://tylors.github.io/typed/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/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/explore/router-navigation-live-selection/): Keep a selected page and its loader up to date by observing live, decoded route parameters.
- [Navigation: history and unsaved-work decisions](https://tylors.github.io/typed/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.
- [Testing Typed systems](https://tylors.github.io/typed/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/explore/integrating-matcher-with-effect-http/): Serve a renderable Matcher as GET HTML routes through Effect HTTP, with request-local state and buffered or streaming responses.
- [Namespace-aware platform markup](https://tylors.github.io/typed/explore/template-namespaces-and-platform-markup/): Author SVG and MathML directly; Typed builds the native namespace transitions and attributes the platform expects.
- [Interpolate into text-only elements](https://tylors.github.io/typed/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.
- [Hydrating Typed HTML](https://tylors.github.io/typed/explore/hydrating-typed-html/): Adopt compatible Typed SSR output below one DOM host, or construct fresh output when the adoption contract does not match.
- [Schedule DOM rendering](https://tylors.github.io/typed/explore/render-scheduling/): Change when local DOM work runs without changing what a template owns or how a dynamic part is updated.
- [Preserve multi-node DOM output](https://tylors.github.io/typed/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.
- [Meter: communicate a measurement in a known range](https://tylors.github.io/typed/explore/ui-meter/): Reference bounded measurements: units, limits, thresholds, and the difference from progress or input.
- [Alert: urgent messages without moving focus](https://tylors.github.io/typed/explore/ui-alert/): Announce an urgent text change from an already mounted live region.
- [Heading: document hierarchy independent of visual size](https://tylors.github.io/typed/explore/ui-heading/): Reference contextual heading levels and the default role-based host.
- [Group: make related controls understandable together](https://tylors.github.io/typed/explore/ui-group/): Reference explicit group naming and the distinction between Group and a native fieldset.
- [Separator: a division without an interaction](https://tylors.github.io/typed/explore/ui-separator/): Reference static semantic separation, orientation, and the boundary with a draggable splitter.
- [VisuallyHidden: retain meaning without visual layout](https://tylors.github.io/typed/explore/ui-visually-hidden/): Reference clipped accessible text and the limitation for focusable content.
- [UI guide destinations](https://tylors.github.io/typed/explore/choosing-ui-components/): Use the UI task chooser to select a worked interaction, then consult module references for exact contracts.
- [Button: actions with native activation](https://tylors.github.io/typed/explore/ui-button/): Reference native action activation, button types, disabled behavior, and Effect handlers.
- [Link: navigation that still behaves like a link](https://tylors.github.io/typed/explore/ui-link/): Reference intercepted navigation clicks, browser-owned anchors, and scheme policy.
- [Checkbox: boolean choices and mixed summaries](https://tylors.github.io/typed/explore/ui-checkbox/): Reference checked and mixed state, native form omission, and hydrated input state.
- [Switch: a stable name for an on/off setting](https://tylors.github.io/typed/explore/ui-switch/): Reference a stable setting name, binary switch state, and its non-form-control semantics.
- [RadioGroup: one choice and one native group](https://tylors.github.io/typed/explore/ui-radio-group/): Reference native radio name/value identity and collection-backed keyboard movement.
- [Select: a popover-backed list of choices](https://tylors.github.io/typed/explore/ui-select/): Compare custom Select focus and commit behavior with native Form.Select.
- [Slider: continuous native range input](https://tylors.github.io/typed/explore/ui-slider/): Reference range input timing and the distinction between user changes and programmatic bounds.
- [SpinButton: numeric entry at the change boundary](https://tylors.github.io/typed/explore/ui-spin-button/): Reference numeric input timing, bounds, and invalid draft limitations.
- [Form: schema-bound controls and submission state](https://tylors.github.io/typed/explore/ui-form/): Canonical reference for decoded values, errors, reset, submit, and native form limitations.
- [Forms as a browser contract](https://tylors.github.io/typed/explore/forms-as-a-browser-contract/): Build one trial-request path with native controls, decoded values, errors, reset, and submit.
- [Combobox: editable queries and committed suggestions](https://tylors.github.io/typed/explore/ui-combobox/): Compare query text, active suggestion, and accepted record; use the project picker for the worked flow.
- [Listbox: visible choices with selection following focus](https://tylors.github.io/typed/explore/ui-listbox/): Reference persistent single-choice lists and the decision to commit on focus.
- [Menu: commands, checked items, and nested popups](https://tylors.github.io/typed/explore/ui-menu/): Reference command menus, disabled traversal, submenu ownership, and explicit focus state.
- [Menubar: a persistent command row with popup menus](https://tylors.github.io/typed/explore/ui-menubar/): Connect horizontal command focus to independently owned submenu popovers.
- [Tabs: panel visibility and deliberate activation](https://tylors.github.io/typed/explore/ui-tabs/): Choose automatic or manual activation and keep tab identity separate from panel lifetime.
- [Tab: the Tabs compatibility entry point](https://tylors.github.io/typed/explore/ui-tab/): Use the singular Tab import as an alias for Tabs; activation, panels, and limitations are documented there.
- [Toolbar: one keyboard surface for related commands](https://tylors.github.io/typed/explore/ui-toolbar/): Reference toolbar focus and pressed state; follow collections and focus for the worked scenario.
- [Tree: hierarchical focus and expansion](https://tylors.github.io/typed/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/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/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/explore/ui-carousel/): Build a manual slide sequence; rotation and pause require a separately scoped product policy.
- [WindowSplitter: accessible range state for resizable panes](https://tylors.github.io/typed/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/explore/overlays-disclosure-and-transient-ui/): Choose document-flow disclosure, supporting popovers, or a focused dialog task from the behavior the feature needs.
- [Dialog: a named task with a native lifecycle](https://tylors.github.io/typed/explore/ui-dialog/): Separate opening, cancel requests, accepted actions, and native modal behavior.
- [NativeDialog: synchronize an existing dialog](https://tylors.github.io/typed/explore/ui-native-dialog/): Reference the low-level dialog state bridge and the explicit reverse close-event path.
- [Popover: supporting content in the top layer](https://tylors.github.io/typed/explore/ui-popover/): Reference manual popover visibility, dismissal, and focus expectations.
- [NativePopover: observe open state on a real element](https://tylors.github.io/typed/explore/ui-native-popover/): Reference an application-owned popover bridge, connection wait, and reverse toggle synchronization.
- [Disclosure: reveal content without leaving the page](https://tylors.github.io/typed/explore/ui-disclosure/): Reference named disclosure parts and native details synchronization.
- [NativeDetails: connect details.open to application state](https://tylors.github.io/typed/explore/ui-native-details/): Reference the one-way details bridge and the explicit browser-to-state toggle path.
- [Tooltip: a description that survives pointer and keyboard use](https://tylors.github.io/typed/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/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/explore/ui-component/): Create a component value or function whose setup and output share one instance lifetime.
- [Focusable: an explicit keyboard entry point](https://tylors.github.io/typed/explore/ui-focusable/): Reference deliberate tab stops: zero versus minus one, and the element that actually receives focus.
- [Collection: mounted item identity and order](https://tylors.github.io/typed/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/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/explore/ui-role/): Reference an explicit role host while preserving native interactions and naming.
- [Dom: preserve behavior when authoring a host](https://tylors.github.io/typed/explore/ui-dom/): Keep props, event cancellation, and refs attached to the element that owns the interaction.
- [Storybook: mount a story with an owned render scope](https://tylors.github.io/typed/explore/ui-storybook/): Mount and dispose Typed output in a component explorer or browser fixture.

## API reference
- [@typed/astro](https://tylors.github.io/typed/reference/packages/@typed/astro/): 9 unique exports
- [@typed/async-data](https://tylors.github.io/typed/reference/packages/@typed/async-data/): 31 unique exports
- [@typed/fx](https://tylors.github.io/typed/reference/packages/@typed/fx/): 773 unique exports
- [@typed/guard](https://tylors.github.io/typed/reference/packages/@typed/guard/): 32 unique exports
- [@typed/id](https://tylors.github.io/typed/reference/packages/@typed/id/): 38 unique exports
- [@typed/navigation](https://tylors.github.io/typed/reference/packages/@typed/navigation/): 28 unique exports
- [@typed/react](https://tylors.github.io/typed/reference/packages/@typed/react/): 39 unique exports
- [@typed/router](https://tylors.github.io/typed/reference/packages/@typed/router/): 170 unique exports
- [@typed/svelte](https://tylors.github.io/typed/reference/packages/@typed/svelte/): 38 unique exports
- [@typed/template](https://tylors.github.io/typed/reference/packages/@typed/template/): 149 unique exports
- [@typed/tsconfig](https://tylors.github.io/typed/reference/packages/@typed/tsconfig/): 4 unique exports
- [@typed/ui](https://tylors.github.io/typed/reference/packages/@typed/ui/): 531 unique exports
- [@typed/vue](https://tylors.github.io/typed/reference/packages/@typed/vue/): 41 unique exports

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