11ty Type Validation Schema

Adding a data schema for type validation to eleventy using zod.

Zod is a TypeScript-first validation library. Using Zod, you can define schemas you can use to validate data, from a simple string to a complex nested object.

intro - Zod

Eleventy DataSchema #

Eleventy has the ability to add validation using eleventyDataSchema.

Use the special eleventyDataSchema data property to validate data in your Data Cascade.

Validate Data - Eleventy

Applying to Posts #

I only wanted the schema to apply to posts so added checking to the relevant data file (src/posts/posts.11tydata.js).

const postSchema = z.object({
  title: z.string(),
  date: z
    .string()
    .or(z.date())
    .transform((val) => new Date(val)),
  author: z.string().optional(),
  draft: z.boolean().nullish(),
  tags: z.array(z.string()).default([]),
  image: z.string().nullish(),
  imgAuthor: z.string().nullish(),
  imgAuthorURL: z.string().nullish(),
  mastodonPostId: z.string().nullish(),
  blueskyPostId: z.string().nullish(),
  excerpt: z.string().nullish(),
})

This added some time (+430ms) to builds.

Build without data schema

[11ty] Copied 275 Wrote 239 files in 5.25 seconds (21.9ms each, v3.1.2)

Build with data schema

[11ty] Copied 275 Wrote 239 files in 5.68 seconds (23.8ms each, v3.1.2)

Testing Validation #

To test validation is working I set draft in schema to expect string instead of boolean.

Here is the output when trying to build the site.

[11ty] Wrote 0 files in 2.12 seconds (v3.1.2)
[11ty] Eleventy Fatal Error (CLI):
[11ty] 1. Error in the data schema for: ./src/posts/2011-08-03-netgear-dg823g-modem.md (via `eleventyDataSchema`) (via EleventyDataSchemaError)
[11ty] 2. [
[11ty]   {
[11ty]     "expected": "string",
[11ty]     "code": "invalid_type",
[11ty]     "path": [
[11ty]       "draft"
[11ty]     ],
[11ty]     "message": "Invalid input: expected string, received boolean"
[11ty]   }
[11ty] ] (via ZodError)

Standalone Script #

• use fast-glob to get .md files in posts
• read all files
• get frontmatter from posts
• check each file using zod with the schema
• give error feedback using ZodError
• track time taken

Running this script took around 100ms.

    Starting Schema Check
-
    ./src/posts/2010-10-12-save-chromium-profile-to-ramdisk.md
    ./src/posts/2011-08-03-netgear-dg823g-modem.md
    -- snip --
    ./src/posts/2026-01-19-Screenshots in Sway.md
-
    Schema Check Complete
    137 files checked in 97ms

Standalone vs Eleventy #

Eleventy shows an increase in builds of around 430ms.
In comparison the standalone script only takes 100ms.

This isn't a huge difference but my site only has 137 posts.

Pull Request #

The pull request for these changes is available on github.

Add data schema for type validation pull request on github

Changes #

• add new devDependencies for type checking schema
• add new schema to posts data using zod for basic type checking
• add new schema script for checking types in posts
• add colors to cli output of schema script
• add schema checking script to package.json