API Reference

Complete documentation for all What Framework APIs across 14 modules.

Reactivity

The core primitives for building reactive applications.

Function	Description
`signal(value)`	Create a reactive value. Returns getter function with `.set()`, `.peek()`, `.subscribe()`
`computed(fn)`	Create a derived value that auto-updates when dependencies change
`effect(fn)`	Run a side effect when dependencies change. Returns dispose function
`batch(fn)`	Batch multiple signal writes — effects run once after batch completes
`untrack(fn)`	Read signals without creating subscriptions
`flushSync()`	Force all pending effects to run synchronously

Rendering

Functions for creating and mounting elements.

Function	Description
`h(tag, props, ...children)`	Create an element (advanced/internal). JSX is compiled by the optimizer into direct DOM operations
`mount(element, container)`	Render an element tree into the DOM. Returns unmount function
`Fragment({ children })`	Group children without a wrapper element
html`...`	Tagged template literal for HTML. No build step required

Control Flow Components

Component	Description
`<Show when fallback>`	Conditionally render children based on a condition
`<For each fallback>`	Efficiently render a list with auto-keying
`<Switch> / <Match when>`	Render one of multiple conditions
`<Portal target>`	Render children into a different DOM container
`<ErrorBoundary fallback onError>`	Catch errors in child components
`<Suspense fallback>`	Show fallback while lazy components load
`memo(Component, areEqual)`	Skip re-render when props haven't changed
`lazy(loader)`	Code-split a component. Works with Suspense
`<Island component mode>`	Deferred hydration: load, idle, visible, interaction, media

Hooks

React-compatible hooks backed by signals.

Hook	Description
`useState(initial)`	Returns [value, setter]. Setter triggers component update
`useSignal(initial)`	Returns the raw signal for direct signal() and signal.set() access
`useComputed(fn)`	Returns a computed signal (read-only derived value)
`useEffect(fn, deps)`	Side effect after render. Returns cleanup function
`useMemo(fn, deps)`	Memoized computation based on dependencies
`useCallback(fn, deps)`	Memoized callback function
`useRef(initial)`	Mutable ref that doesn't trigger re-renders. Returns { current }
`useReducer(reducer, init)`	State with reducer function. Returns [state, dispatch]

Lifecycle

Function	Description
`onMount(fn)`	Run code once after component mounts to the DOM
`onCleanup(fn)`	Register cleanup function for component unmount
`createResource(fetcher, opts)`	Reactive data fetching. Returns [data, { loading, error, refetch, mutate }]

Context

Function	Description
`createContext(default)`	Create a context with .Provider component
`useContext(Context)`	Access the nearest context value

Data Fetching

SWR, query, and cache management primitives. Learn more →

Function	Description
`useFetch(url, options)`	Simple fetch wrapper. Returns data(), error(), isLoading(), refetch()
`useSWR(key, fetcher, opts)`	Stale-while-revalidate with caching, dedup, revalidation on focus/reconnect
`useQuery(options)`	Full query management: retry, staleTime, cacheTime, refetchInterval, select
`useInfiniteQuery(options)`	Infinite scroll/pagination with getNextPageParam, fetchNextPage
`invalidateQueries(key, opts)`	Trigger refetch. `{ hard: true }` clears data immediately
`prefetchQuery(key, fetcher)`	Pre-fill cache before component mounts
`setQueryData(key, updater)`	Manually set cache data
`getQueryData(key)`	Read cached data
`clearCache()`	Clear all cached data

Forms & Validation

Form state management and validation. Learn more →

Function	Description
`useForm(options)`	Complete form management: register, handleSubmit, validate, formState
`useField(name, opts)`	Individual field control: value(), error(), inputProps()
`zodResolver(schema)`	Zod validation schema adapter
`yupResolver(schema)`	Yup validation schema adapter
`rules.required()`	Built-in: required, minLength, maxLength, min, max, pattern, email, url, match, custom
`Input / Textarea / Select`	Pre-built controlled form components
`Checkbox / Radio`	Pre-built controlled toggle components
`ErrorMessage({ name })`	Display field validation errors

Stores

Global state management. Learn more →

Function	Description
`createStore(definition)`	Create reactive store with state, computed, and actions
`derived(fn)`	Mark a function as computed inside createStore

Animation

Physics and time-based animation primitives. Learn more →

Function	Description
`spring(initial, opts)`	Physics-based spring. Options: stiffness, damping, mass, precision
`tween(from, to, opts)`	Time-based easing. Options: duration, easing, onUpdate, onComplete
`easings`	Built-in: linear, easeInQuad, easeOutQuad, easeInOutCubic, easeOutBounce, etc.
`useTransition(opts)`	Animate state transitions: isTransitioning(), progress(), start()
`useGesture(el, handlers)`	Multi-touch: onDrag, onPinch, onSwipe, onTap, onLongPress
`useAnimatedValue(initial)`	React Native-like: spring(), timing(), interpolate()
`createTransitionClasses(name)`	CSS transition class name generator

Accessibility

Focus management, ARIA helpers, and keyboard navigation. Learn more →

Function	Description
`useFocus()`	Track focused element: current(), focus(el), blur()
`useFocusRestore()`	Capture and restore focus from trigger elements
`useFocusTrap(ref)`	Trap focus in container: activate(), deactivate()
`FocusTrap({ active })`	Component wrapper that traps focus
`announce(msg, opts)`	Screen reader announcement: priority, timeout
`useAriaExpanded()`	Toggle expanded state: buttonProps(), panelProps()
`useAriaSelected()`	Selection state: itemProps(value)
`useAriaChecked()`	Checkbox state: checkboxProps()
`useRovingTabIndex(count)`	Keyboard navigation: getItemProps(i), containerProps()
`SkipLink / VisuallyHidden`	Skip navigation and screen-reader-only content
`useId() / useDescribedBy()`	Unique IDs and ARIA attribute linking
`Keys / onKey() / onKeys()`	Keyboard event constants and handlers

DOM Scheduling

Function	Description
`scheduleRead(fn)`	Queue DOM read. Reads run before writes. Returns cancel function
`scheduleWrite(fn)`	Queue DOM write. Returns cancel function
`measure(fn)`	Promise-based read: `await measure(() => el.offsetHeight)`
`mutate(fn)`	Promise-based write: `await mutate(() => { el.style.height = '100px' })`
`nextFrame()`	Promise resolving on next animation frame
`onResize(el, cb)`	ResizeObserver helper. Returns unobserve function
`onIntersect(el, cb, opts)`	IntersectionObserver helper. Returns disconnect function
`smoothScrollTo(el, opts)`	Smooth scroll with easing

Head Management

Function	Description
`<Head title meta link>`	Set document head tags from any component. Auto-deduplicates
`clearHead()`	Remove all What-managed head tags

Helpers & Utilities

Function	Description
`cls(...args)`	Conditional class builder: `cls('btn', { active: true })`
`style(obj)`	Convert style object to CSS string (for SSR)
`debounce(fn, ms)`	Debounce function calls
`throttle(fn, ms)`	Throttle function calls
`useMediaQuery(query)`	Reactive media query matching. Returns signal
`useLocalStorage(key, init)`	Synced localStorage signal
`useClickOutside(ref, handler)`	Detect clicks outside element

Server-Side Rendering

Learn more →

Function	Description
`renderToString(element)`	Synchronous render to HTML string
`renderToStream(element)`	Async generator for streaming SSR
`definePage(config)`	Page config: mode (static/server/client/hybrid), title, meta, islands
`server(Component)`	Mark component as server-only (no JS shipped)

Server Actions

Function	Description
`action(fn, options)`	Define server action callable from client via fetch
`formAction(actionFn, opts)`	Form submission wrapper with FormData handling
`useAction(actionFn)`	Action state: trigger(), isPending(), error(), data()
`useMutation(mutationFn, opts)`	Simple mutation: mutate(), isPending(), error()
`useOptimistic(initial, reducer)`	Optimistic updates: value(), addOptimistic(), rollback()
`generateCsrfToken()`	Generate CSRF token for server actions

Router

From what-framework/router.

Function	Description
`Router({ routes, fallback })`	Main router component with route config array
`Link({ href, activeClass })`	Navigation link with automatic active class
`navigate(to, opts)`	Programmatic navigation. Options: replace, state, transition
`useRoute()`	Reactive route state: path(), params(), query(), hash()
`guard(check, fallback)`	Route guard HOC for auth/permissions
`defineRoutes(config)`	Convert route config object to route array
`Redirect({ to })`	Redirect component
`enableScrollRestoration()`	Restore scroll position on navigation

Quick Reference

All Imports

// Core — what-framework
import {
  signal, computed, effect, batch, untrack, flushSync,
  h, mount, Fragment, html,
  Show, For, Switch, Match, Portal, ErrorBoundary, Suspense,
  memo, lazy, Island,
  useState, useSignal, useComputed, useEffect, useMemo,
  useCallback, useRef, useReducer,
  onMount, onCleanup, createResource,
  createContext, useContext,
  createStore, derived,
  Head, clearHead,
  cls, style, debounce, throttle,
  useMediaQuery, useLocalStorage, useClickOutside,
} from 'what-framework';

// Data fetching
import {
  useFetch, useSWR, useQuery, useInfiniteQuery,
  invalidateQueries, prefetchQuery, setQueryData,
  getQueryData, clearCache,
} from 'what-framework';

// Forms
import {
  useForm, useField, rules,
  zodResolver, yupResolver, simpleResolver,
  Input, Textarea, Select, Checkbox, Radio, ErrorMessage,
} from 'what-framework';

// Animation
import {
  spring, tween, easings,
  useTransition, useGesture, useAnimatedValue,
} from 'what-framework';

// Accessibility
import {
  useFocus, useFocusRestore, useFocusTrap, FocusTrap,
  announce, announceAssertive, LiveRegion,
  useAriaExpanded, useAriaSelected, useAriaChecked,
  useRovingTabIndex, SkipLink, VisuallyHidden,
  useId, useDescribedBy, useLabelledBy,
  Keys, onKey, onKeys,
} from 'what-framework';

// Router
import {
  Router, Link, navigate, useRoute,
  guard, defineRoutes, Redirect,
} from 'what-framework/router';

// Server
import {
  renderToString, renderToStream,
  definePage, server,
  action, useAction, useMutation, useOptimistic,
} from 'what-framework/server';