JSON

Raw JSON editor with syntax validation. Use for structured metadata, configuration objects, FAQ schemas, and any data that doesn't fit other field types.

Usage#

typescript
metadata: { label: 'Metadata', format: 'json' },

Options#

The editor shows a monospace textarea with real-time valid/invalid JSON feedback. Inputs must parse with JSON.parse.

Example: FAQ page with structured data#

Schema — a page with structured FAQ data for both rendering and JSON-LD↗:

typescript
// cms/octocms.config.ts
faqPage: {
  label: 'FAQ Page',
  fields: {
    title: { label: 'Title', format: 'string', entryTitle: true, required: true },
    questions: {
      label: 'FAQ Items',
      format: 'json',
      required: true,
      hint: 'Array of { "question": "...", "answer": "..." } objects.',
    },
  },
},

Content editors enter:

json
[
  { "question": "What is OctoCMS?", "answer": "A file-based CMS for Next.js." },
  { "question": "Do I need a database?", "answer": "No — content is stored as JSON files." }
]

Query + render with JSON-LD:

tsx
// src/app/faq/page.tsx
import { query } from 'cms/__generated__/query';

interface FaqItem { question: string; answer: string }

export default async function FaqPage() {
  const page = await query('faqPage').first();
  if (!page) return null;

  const items = page.fields.questions as FaqItem[];

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: items.map((item) => ({
      '@type': 'Question',
      name: item.question,
      acceptedAnswer: { '@type': 'Answer', text: item.answer },
    })),
  };

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <h1>{page.fields.title}</h1>
      <dl>
        {items.map((item, i) => (
          <div key={i}>
            <dt>{item.question}</dt>
            <dd>{item.answer}</dd>
          </div>
        ))}
      </dl>
    </>
  );
}

Storage#

Native JSON value (object, array, or primitive) in the entry file. Optional empty fields store null.

json
{ "questions": [{ "question": "...", "answer": "..." }] }

Query result#

Returned as the parsed JSON value. Cast to your expected type in code:

typescript
const items = page.fields.questions as FaqItem[];