Code Field - Vextro Docs

The code field renders a CodeMirror-based code editor with syntax highlighting in the admin UI and stores the content as a plain string. Use this field for code snippets, configuration files, templates, or any content that benefits from syntax-aware editing.

The underlying Convex validator is v.string(), wrapped in v.optional() unless marked as required.

Config options

Option	Type	Default	Description
`required`	`boolean`	`false`	Makes the field required in the schema and admin UI
`readOnly`	`boolean`	`false`	Renders the editor as non-editable
`placeholder`	`string`		Placeholder text shown when the editor is empty
`label`	`string \| function`	Field name	Custom label for the admin UI
`description`	`string`		Help text displayed below the field label
`language`	`CodeLanguage \| "auto"`	`"plaintext"`	Programming language for syntax highlighting
`lineNumbers`	`boolean`	`true`	Show line numbers in the gutter
`height`	`number`	`200`	Editor height in pixels
`wordWrap`	`boolean`	`false`	Enable word wrapping for long lines
`tabSize`	`number`	`2`	Number of spaces per tab
`copyButton`	`boolean`	`false`	Show a copy-to-clipboard button on hover
`condition`	`FieldCondition`		Condition for showing or hiding this field
`sidebar`	`boolean`	`false`	Place this field in the document sidebar

Supported languages

The language option accepts any of the following values:

javascript, typescript, json, html, css, scss, markdown, yaml, xml, sql, graphql, python, ruby, go, rust, java, php, c, cpp, csharp, shell, plaintext

Set language to "auto" to attempt automatic language detection from the content.

Example usage

import { f, defineVextroCollection } from "vextro";

export const snippets = defineVextroCollection({
  slug: "snippets",
  label: "Code Snippets",
  collectionType: "content",
  tableName: "snippets",
  fields: {
    title: f.text({ required: true }),
    language: f.select({
      options: ["typescript", "javascript", "python", "go", "rust"],
      required: true,
    }),
    code: f.code({
      required: true,
      language: "typescript",
      lineNumbers: true,
      height: 400,
      tabSize: 2,
      description: "Paste or write your code snippet here",
    }),
    embedCode: f.code({
      language: "html",
      height: 150,
      wordWrap: true,
      label: "Embed HTML",
    }),
    config: f.code({
      language: "yaml",
      lineNumbers: false,
      height: 200,
      label: "YAML Config",
    }),
  },
});

Admin options

The editor adapts its syntax highlighting and auto-completion behavior based on the configured language. The height option controls the initial editor height in pixels; editors are scrollable when content exceeds this height. Line numbers are enabled by default and can be hidden with lineNumbers: false for compact display.

Conditional display

customCss: f.code({
  language: "css",
  label: "Custom CSS",
  condition: { field: "enableCustomStyles", equals: true },
  height: 300,
})