next-safe-actionplayground
Overview
  • Home
Core
  • Core Actions
  • Validation Errors
  • Middleware
Hooks
  • React Hooks
  • Optimistic Updates
  • Coordinating Mutations
  • Pending Changes
Integrations
  • Form Integration
  • React Hook Form
  • TanStack Query
Framework
  • Navigation & Framework
  • Offline Support
  • GitHub

Playground

Interactive examples showcasing every feature of the next-safe-action library.

Core Actions
Direct calls, async schemas, auth context, output schemas
Validation Errors
Formatted, flattened, nested, custom error shapes
Middleware
Logging, auth chains, standalone middleware, rate limiting
React Hooks
useAction, callbacks, stateless forms, state updates
Optimistic Updates
useOptimisticAction with instant UI updates and revalidation
Coordinating Mutations
useOptimisticStateAction queues overlapping writes
Pending Changes
A shared pending list folded over server data by sibling components
Form Integration
Stateful forms, file uploads, bind arguments
React Hook Form
Adapter hooks for react-hook-form integration
TanStack Query
mutationOptions adapter for type-safe TanStack Query mutations
Navigation & Framework
Redirects, notFound, forbidden, unauthorized
Offline Support
Automatic retry for actions and prefetched navigation