[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_164":165,"_166":167},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":49,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",13,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","ef46f606-26cd-11f0-9439-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport { printNode, zodToTs } from \"https://esm.sh/zod-to-ts\";\nimport * as z from \"https://esm.sh/zod@3.21.4\";\n\nfunction Modal({ isOpen, onClose, children }) {\n if (!isOpen) return null;\n\n return (\n

e.stopPropagation()}>\n {children}\n \n

\n );\n}\n\nfunction App() {\n const [zodSchema, setZodSchema] = useState(`return z.object({\n username: z.string().min(3).max(20),\n email: z.string().email(),\n age: z.number().int().positive().optional(),\n isActive: z.boolean().default(true),\n roles: z.array(z.enum(['admin', 'user', 'guest'])),\n})`);\n const [tsTypes, setTsTypes] = useState(\"\");\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n useEffect(() => {\n try {\n // Wrap the schema in a function to allow for local variables\n const schemaFunc = new Function(\"z\", zodSchema);\n const schema = schemaFunc(z);\n const { node } = zodToTs(schema);\n setTsTypes(printNode(node));\n } catch (error) {\n console.error(\"Error parsing schema:\", error);\n setTsTypes(\n `Error: ${error.message}\\n\\nMake sure you return the schema at the end of the statement.`,\n );\n }\n }, [zodSchema]);\n\n return (\n

Zod Schema Playground

\n \n setIsModalOpen(false)}>\n

Instructions

\n Use any zod function from the `z` object to write your schema. At the end of the input, add a `return`\n statement of the schema you want to see rendered as a Typescript type.\n

\n \n

Zod Schema

\n setZodSchema(e.target.value)}\n placeholder=\"Enter your Zod schema here...\"\n />\n

TypeScript Types

{tsTypes}

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default function server(request: Request): Response {\n return new Response(\n `\n \n \n \n \n \n Zod Schema Playground\n \n \n \n

e.stopPropagation()}>\n {children}\n \n

Zod Schema Playground

\n \n setIsModalOpen(false)}>\n

Instructions

\n Use any zod function from the z object to write your schema. At the end of the input, add a{\" \"}\n return\n statement of the schema you want to see rendered as a Typescript type.\n

\n \n

Zod Schema

\n setZodSchema(e.target.value)}\n placeholder=\"Enter your Zod schema here...\"\n />\n

TypeScript Types

{tsTypes}

\n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\n.playground {\n display: flex;\n height: 70vh;\n background-color: white;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.column {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 20px;\n}\n\nh2 {\n margin-top: 0;\n color: #444;\n}\n\ntextarea, pre {\n flex: 1;\n font-family: 'Courier New', Courier, monospace;\n font-size: 14px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n resize: none;\n}\n\npre {\n background-color: #f8f8f8;\n overflow: auto;\n white-space: pre-wrap;\n word-break: break-all;\n}\n\n.separator {\n width: 1px;\n background-color: #ccc;\n}\n\nfooter {\n margin-top: 20px;\n text-align: center;\n}\n\nfooter a {\n color: #666;\n text-decoration: none;\n}\n\nfooter a:hover {\n text-decoration: underline;\n}\n\n.info-button {\n display: block;\n margin: 10px auto;\n padding: 5px 10px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.modal-content {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n max-width: 500px;\n width: 90%;\n}\n\n.modal-close {\n display: block;\n margin-top: 10px;\n padding: 5px 10px;\n background-color: #dc3545;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n`;","createdAt",["D",1733030608808],"branchVersion","branchId","ef44338a-26cd-11f0-9439-569c3dd06744","id","ef43d192-26cd-11f0-9439-569c3dd06744","zodSchemaPlayground",["D",1746132637281],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","12dc2dbc-b67f-44e1-a015-e97495f6121a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","eda87447-ba5f-475f-884b-57629968d6c5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",20,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","feb","handle","displayName","avatar","https://secure.gravatar.com/avatar/76d4e67d2ae663b1e5b5ca20ed36eb17&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":160,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":161,"_79":162,"_81":163,"_83":25},"tree",[151,152],"files",[151,152],"counts",{"_141":61,"_142":137,"_143":61,"_144":145,"_146":147},"contents",[125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":134,"_32":135,"_30":136,"_128":-5,"_41":42,"_40":137,"_129":49,"_38":138,"_13":61,"_33":20,"_35":139,"_24":25,"_132":-5,"_27":140},{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":130,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_27":133},"ef8bdde8-26cd-11f0-9439-569c3dd06744","parentId","latest",["D",1733030608808],12,"label",[28],"ef4710a0-26cd-11f0-9439-569c3dd06744","README.md","ef471140-26cd-11f0-9439-569c3dd06744",1,["D",1733029665384],"# Zod Schema to Typescript Playground\n\nA simple site to convert [zod](https://zod.dev/) schema to typescript type definitions.\n\nThe type getting converted will be the one returned in the body of the input, so make sure that you return the schema at the very end.",[135],"pulls","branches","forks","envVars",{"_148":61,"_150":61},"connections",{"_148":61,"_149":61},"count","unfilledCount","emptyCount",{"_43":134,"_32":135,"_30":136,"_128":-5,"_41":42,"_40":137,"_129":49,"_38":157,"_13":61,"_33":20,"_35":139,"_24":25,"_132":-5,"_154":158,"_27":159},{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":153,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_154":155,"_27":156},["D",1733030608808],"children",[],[28],["D",1733029665384],[],[135],["D",1746132637281],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":197,"_198":199,"_200":201,"_202":25,"_203":25,"_204":25,"_205":49,"_206":-5,"_207":-7,"_208":-7,"_209":61,"_210":25,"_211":25,"_212":-5,"_213":25,"_214":25,"_215":25,"_216":-5},"ENV",{"_168":169,"_170":171,"_172":85,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v13