| title |
aliases |
tags |
sources |
created |
updated |
| Code Field |
| payload-code-field |
| code-field-payloadcms |
|
| payloadcms |
| fields |
| admin |
| monaco |
|
|
2026-05-15 |
2026-05-15 |
Overview
The Code Field stores a plain string in the database but renders a Monaco editor (VS Code's editor) in the Admin Panel — with syntax highlighting, line numbers, and language support.
import type { Field } from 'payload'
export const MyCodeField: Field = {
name: 'trackingCode',
type: 'code',
required: true,
admin: {
language: 'javascript',
},
}
Config Options
| Option |
Description |
name * |
Property name in DB |
label |
Field label in Admin Panel |
unique |
DB-level unique index |
index |
Build DB index for faster queries |
minLength / maxLength |
String length validation |
validate |
Custom validation function (client + server) |
saveToJWT |
Include in user JWT if top-level auth field |
hooks |
Field-level hooks |
access |
Field-level access control |
hidden |
Hide from API and Admin; still saved to DB |
defaultValue |
Default string value |
localized |
Enable localization (requires base config) |
required |
Field must have a value |
virtual |
Disable DB column or link to relationship |
typescriptSchema |
Override generated TS type with JSON schema |
custom |
Extension point for plugins |
Admin Options
Extends the base wiki/payloadcms/fields-basic with:
| Option |
Description |
language |
Monaco language ID (e.g. 'javascript', 'css', 'html') — full list at microsoft/monaco-editor basic-languages |
editorOptions |
Monaco IDiffEditorConstructionOptions — theme, fontSize, minimap, etc. |
Custom Components
Field Component
// Server
import { CodeField } from '@payloadcms/ui'
import type { CodeFieldServerComponent } from 'payload'
export const CustomCodeFieldServer: CodeFieldServerComponent = ({
clientField, path, schemaPath, permissions,
}) => <CodeField field={clientField} path={path} schemaPath={schemaPath} permissions={permissions} />
// Client
'use client'
import type { CodeFieldClientComponent } from 'payload'
export const CustomCodeFieldClient: CodeFieldClientComponent = (props) => <CodeField {...props} />
Label Component
// Server
import { FieldLabel } from '@payloadcms/ui'
import type { CodeFieldLabelServerComponent } from 'payload'
export const CustomCodeFieldLabelServer: CodeFieldLabelServerComponent = ({ clientField, path }) => (
<FieldLabel label={clientField?.label || clientField?.name} path={path} required={clientField?.required} />
)
Key Takeaways
- Stored as string — no special DB type;
varchar/text column depending on adapter
- Monaco editor in Admin Panel — same engine as VS Code, supports 50+ languages
- Set
admin.language to get syntax highlighting — default is plain text
editorOptions gives full Monaco control (themes, keybindings, minimap, etc.)- Supports
minLength/maxLength validation like any text field
hidden: true keeps data in DB but removes it from all API responses — useful for sensitive scriptssaveToJWT: true embeds the code string into the user token — use sparingly (JWT size)
Related
Sources
