JSON Colorize Clerk

JSON Colorize Clerk (JSON 色付け係) is a simple tool to visualize JSON data so that those who are not familiar with JSON can understand it easily.

Features

• Pretty print JSON data
• Labeling JSON keys with JSON Schema
• Compatible API with React JSON Schema Form

JSON 色付け係

What is JSON 色付け係? JSON 色付け係 is a joke among Japanese front-end engineers. It is a self-deprecatory joke that frontend engineers are often only in charge of presenting data sent from the backend as JSON format, and rarely have the opportunity to work with the core domain logic, while the backend engineers are responsible for that and it seems to be more important.

Usage

Install

npm install @aokiapp/colorize-clerk

Use

import { ColorizeClerk } from 'colorize-clerk';
import "colorize-clerk/dist/index.css";

render(
  <ColorizeClerk
    schema={{
      type: "object",
      properties: {
        name: { type: "string", title: "名前" },
        age: { type: "number", title: "年齢" },
        isAdult: { type: "boolean", title: "成人ですか?" },
        hobbies: {
          type: "array",
          items: {
            type: "string"
            oneOf: [
              { const: "reading", title: "読書" },
              { const: "swimming", title: "水泳" },
              { const: "running", title: "ランニング" },
            ]
          },
        },
      },
    }}
    formData={{
      name: "John Doe",
      age: 30,
      isAdult: true,
      hobbies: ["reading", "swimming"],
    }}
  />
)

License

MIT