Zap Studio

Zap Studio provides small, standalone, framework-agnostic TypeScript packages. Each package can be used independently or composed together.

The @zap-studio/env package provides several key capabilities for managing environment variables:

• Full type safety: The parsed environment object is automatically inferred from your schemas.
• Standard Schema support: Compatible with Zod, Valibot, ArkType, and other Standard Schema-compliant libraries.
• server/client/shared split: Enforces access boundaries. Use clientPrefix to define which keys are safe for the client.
• Schema composition via extends: Allows merging schemas with reference-equality conflict detection (throws if keys conflict with different schemas).
• Platform presets: Built-in support for common hosting providers including Cloudflare Workers and Deno Deploy.
• .env.example generation: Automatically build a .env.example file from your schema using generateEnvironmentExample().
• Structured errors: Provides specific error types: EnvironmentError, EnvironmentValidationError, and EnvironmentAccessError.
• OpenTelemetry support: Includes a zero-cost env.validate span for observability.
• Tree-shakeable: Designed as plain functions and objects for minimal bundle size.

The @zap-studio/webhooks package provides several key capabilities for webhook management:

• Web API Native: Uses standard Request and Response objects, making it compatible with Bun, Deno, Cloudflare Workers, Next.js, and Hono.
• Type-safe Routing: Handler payload types are automatically inferred from the route schema.
• Standard Schema Validation: Supports any library compatible with the Standard Schema specification, such as Zod, Valibot, or ArkType.
• Signature Verification: Includes a built-in HMAC verifier using the Web Crypto API (globalThis.crypto.subtle) with constant-time comparison to prevent timing attacks. You can also provide a custom verify function.
• Lifecycle Hooks: Provides before, after, and onError hooks for cross-cutting concerns.
• Observability: Supports optional logging via @zap-studio/logger and native OpenTelemetry integration (providing SERVER and handler dispatch spans).
• Tree-shakeable: Designed to allow bundlers to drop unused validation and hook-running internals.

The @zap-studio/fetch package provides several modes and utilities for handling HTTP requests:

• Validated fetch mode: Use $fetch(input, schema, options) to parse and validate the JSON response against a schema.
• Raw fetch mode: Use $fetch(input, options) to behave like the native fetch API, returning a Response object.
• HTTP method helpers: Use api.get, api.post, api.put, api.patch, and api.delete for common verbs.
• Configured clients: Use createFetch(...) to create a client with shared baseURL, headers, query params, and error defaults.
• JSON convenience: Use the json option to automatically serialize the request body and set the Content-Type header.
• Structured errors:
  • FetchError: Thrown on bad HTTP status codes.
  • ValidationError: Thrown when the response body fails schema validation.
• Validator-agnostic: Works with any library implementing the Standard Schema (e.g., Zod, Valibot).
• Observability: Supports optional logging via createFetch({ logger }) and native OpenTelemetry for distributed tracing.

The @zap-studio/react-hooks package provides a comprehensive collection of React hooks categorized by their functional domain. Every hook is also importable from its own category subpath (e.g., import { useMediaQuery } from '@zap-studio/react-hooks/sensors').

Categories and Hook Groups

Sensors (sensors/)

Used for detecting environmental and device states (e.g., useMediaQuery, useIsMobile, useColorScheme, useOnlineStatus, useWindowSize, useGeolocation, useDeviceOrientation). Many experimental sensors are available for Chromium-only environments.

DOM / Element Interaction (dom/)

Used for interacting with the DOM and elements (e.g., useClickOutside, useHover, useIntersectionObserver, useResizeObserver, useEventListener, useLockBodyScroll, useFullscreen).

Input (input/)

Used for handling user input events (e.g., useKeyPress, useHotkeys, useIdle, useGamepad, usePointerLock).

Media (media/)

Used for audio, video, and speech APIs (e.g., useUserMedia, useCamera, useScreenCapture, useMediaRecorder, useSpeechSynthesis, usePictureInPicture).

History & Navigation (navigation/)

Used for managing browser history and navigation (e.g., usePopState, useNavigationType, useNavigation, useNavigationBlocker).

Network (network/)

Used for real-time communication protocols (e.g., useWebSocket, useEventSource, useWebTransport).

PWA (pwa/)

Used for Progressive Web App features (e.g., useInstallPrompt, useServiceWorker, useAppBadge, useStandaloneMode).

Commerce (commerce/)

Used for payment integrations (e.g., usePaymentRequest).

Lifecycle (lifecycle/)

Used for managing component and asynchronous lifecycles (e.g., useMount, useUnmount, useUpdateEffect, useAsync, useTimeout, useInterval, useWorker).

State (state/)

Used for managing application state and synchronization (e.g., useToggle, useDebounce, useLocalStorage, useIndexedDB, useSearchParams, useHistoryState, useBroadcastChannel).

Debug / Observability (debug/)

Used for profiling and debugging React components (e.g., useRenderCount, useWhyDidYouUpdate, useIsFirstRender, useRenderDuration).

Every Zap Studio package is designed around four core guarantees to ensure predictability and reliability across different environments:

1. Type safety: Types are derived from your schema via Standard Schema rather than manual annotations. This eliminates the need for as type casts when handling responses.
2. Framework-agnostic: Packages are built using standard runtime APIs such as fetch, Request/Response, AbortSignal, and crypto.subtle. They do not require framework adapters, plugin systems, or global setup.
3. Composable: Packages are designed to work together by accepting others as plain values. For example, you can wrap a fetch call in a retry policy, validate the payload with a validation package, and pass a logger through the chain.
4. Tree-shakeable: Packages consist of standalone functions with no shared state and use one subpath per feature. Only the code you explicitly import will be included in your bundle.

Because of these principles, Zap Studio packages do not include a custom runtime (no effect system, scheduler, or DI container), do not maintain hidden global state, do not require logging/tracing (they are optional parameters), and do not support CommonJS (ESM only).