🔬 Interactive Developer Sandbox

Field Inspector & Schema Playground

Click or focus on any form field to activate its live contextual inspector and view real-time validation AST.

PARSED SUCCESSFULLY (VALID)

⚡ Test Presets: Inject test payloads into the form

Interactive Developer Form

Focus field to inspect 🔍

🔍

Username path: "username"

Zod Schema Rule:

z.string().trim().min(3).max(20).regex(/^[a-z0-9_]+$/)

Lowercase alphanumeric username between 3 and 20 characters with optional underscores.

Live Input Value

"ada_lovelace"

Field Status

✓ Passing

✓ Valid Example

john_doe99

✗ Invalid Example

John Doe! (has spaces and capitals, <3 chars)

💡 Why Zod here?

Combines trim, min/max length, and regex into one readable chain without nested if statements.

Live safeParse() Output

{
  "success": true,
  "data": {
    "username": "ada_lovelace",
    "email": "ada@computing.org",
    "age": 36,
    "website": "https://en.wikipedia.org/wiki/Ada_Lovelace",
    "role": "developer",
    "bio": "First computer programmer and mathematician.",
    "tags": [
      "algorithms",
      "math",
      "svelte"
    ],
    "preferences": {
      "newsletter": true,
      "theme": "dark",
      "notifyOnReply": true
    }
  }
}