{} strapi-plugin-json-schema-validation

Provide JSON Schema validation custom field and utilities

Overview

This plugin provides a custom field for JSON Schema validation in Strapi. It allows you to define a JSON Schema for a field and validates the content of that field against the defined schema.

Powered by Monaco Editor and AJV, the plugin provides a user-friendly interface for defining JSON Schemas and validating JSON data.

Installation

npm install strapi-plugin-json-schema-validation

Set up

This plugin require whitelisting strapi::security as for script-src and worker-src as follows:

// <your-strapi-project>/config/middlewares.ts
import type { Core } from '@strapi/strapi';

const config: Core.Config.Middlewares = [
  'strapi::logger',
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'script-src': [
            'cdn.jsdelivr.net', // Allow monaco editor from jsdelivr CDN
          ],
          'worker-src': ["'self'", 'blob:'], // Allow workers from the same origin and eval for Web Workers for monaco editor
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

export default config;

Screenshots

Options in content type builder

Editing monaco editor

Validation error display

What's next!

Editor & Usability

• Monaco Editor with type hints for JSON Schema
  • Base JSON Schema version: Draft 2020-12
  • Validate or Beautify button with AJV against user defined field JSON Schema

Basic Options

• Plain JSON Schema Input
• Theme selector

Advanced Options

• Schema URL: allow users to provide a URL to fetch the JSON Schema from, in addition to the plain JSON Schema input
• Required field: allow users to specify if the field is required or not, and enforce this requirement during validation

DX

• Expose plugin validation services
• Validate on create/save - server side lifecycle hook

UI

• Theme to match Strapi design system colors

Support me here

LinkStack