Code Block Components

Display formatted code with syntax highlighting, copy buttons, and side-by-side comparisons.

Variant: default

Simple code block with language label and copy button.

javascript

function greet(name) {
  console.log(`Hello, ${name}!`);
  return { success: true };
}

greet('PageJSON');

{
  "component": "code-block",
  "variant": "default",
  "data": {
    "language": "javascript",
    "code": "function greet(name) {\n  console.log(`Hello, ${name}!`);\n  return { success: true };\n}\n\ngreet('PageJSON');",
    "bg": "dark"
  }
}

<div class="code-block-wrapper code-theme-dark rounded-3 overflow-hidden">
  <!-- header + <pre><code class="language-javascript">...</code></pre> -->
</div>

Variant: titled

Code block with a filename header and macOS-style window dots.

page.json

{
  "seo": {
    "title": "My Page | My Site",
    "description": "A page built with PageJSON"
  },
  "sections": [
    {
      "component": "hero",
      "variant": "simple",
      "data": {
        "heading": "Hello World"
      }
    }
  ]
}

{
  "component": "code-block",
  "variant": "titled",
  "data": {
    "title": "page.json",
    "language": "json",
    "code": "{\n  \"seo\": {\n    \"title\": \"My Page | My Site\",\n    \"description\": \"A page built with PageJSON\"\n  },\n  \"sections\": [\n    {\n      \"component\": \"hero\",\n      \"variant\": \"simple\",\n      \"data\": {\n        \"heading\": \"Hello World\"\n      }\n    }\n  ]\n}",
    "bg": "dark"
  }
}

<div class="code-block-wrapper code-theme-dark rounded-3 overflow-hidden">
  <!-- titled header with dots + <pre><code class="language-json">...</code></pre> -->
</div>

Explore More Components

View All Components