Puck Components

OberonCMS uses Puck’s component model. Puck components are defined in the client-safe config at oberon/client.config.tsx and rendered by the visual editor.

create-oberon-app scaffolds starter apps with a minimal Text component as a starting point:

oberon/client.config.tsx


import { type OberonClientConfig } from "@oberoncms/core"
 
export const clientConfig: OberonClientConfig = {
  version: 1,
  components: {
    Text: {
      fields: {
        text: { type: "text" },
      },
      defaultProps: {
        text: "Welcome to OberonCMS",
      },
      render: ({ text }) => <div className="prose dark:prose-invert lg:prose-lg">{text}</div>,
    },
  },
}

Creating Custom Components

Components implement the OberonComponent interface, which wraps the Puck ComponentConfig type. Define your fields and render function:


import type { OberonComponent } from "@oberoncms/core"
 
export const MyCustomBlock = {
  fields: {
    title: { type: "text" },
    description: { type: "textarea" },
  },
  render: ({ title, description }) => (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  ),
} satisfies OberonComponent

Then register it in your Oberon client config:

oberon/client.config.tsx


import { MyCustomBlock } from "@/components/blocks"
import { type OberonClientConfig } from "@oberoncms/core"
 
export const clientConfig: OberonClientConfig = {
  version: 1,
  components: {
    MyCustomBlock,
  },
}

OberonCMS uses the Puck editor API for all component configuration — fields, drop zones, categorisation, and the root component. Refer to the Puck documentation for the full reference.