SBBy Dominik Angerer · 4 November 2026 · 3 min read

A real code editor for Storyblok, built for my own blog

Code, language, file name and highlighted lines in one field, instead of a textarea and a dropdown

TL;DR A Storyblok field with a CodeMirror editor, language picker, file name, highlighted lines and fullscreen. Copy the prompt and build it yourself.

Code in a textarea is painful. No highlighting, Tab jumps out of the field, and the language lives in a second field that editors forget to set. This field puts a real code editor into Storyblok, with the language, a file name and highlighted lines in the same value.

Try it yourself

Paste this into Claude Code or Cursor:

Open in Claude CLI

Fetch and follow the Storyblok field plugin instructions at https://raw.githubusercontent.com/DominikAngerer/storyblok-field-wizard/main/generator/PROMPT.md and build this field:
A code block field for a blog using CodeMirror 6: syntax highlighting, line numbers, bracket matching, undo, Tab / Shift+Tab indentation with spaces, and a soft-wrap toggle that is display-only and not stored. A toolbar has a language dropdown (TypeScript, TSX, JavaScript, JSX, JSON, HTML, CSS, Bash / Shell, Python, Markdown, YAML, Plain text), a line and character count, Wrap and Fullscreen; below the editor are a file name input and a highlight input. It stores { "code", "language", "filename", "highlight" }: code exactly as typed (never trimmed, "" when empty), language as one of typescript, tsx, javascript, jsx, json, html, css, bash, python, markdown, yaml, plaintext, filename trimmed to one line of max 200 characters or null, and highlight as 1-based lines and ranges normalised (sorted, merged, no spaces, so "3, 1-2,2" becomes "1-3") or null; highlighted lines are marked yellow in the editor, and an invalid entry like "2-x" shows an inline error and keeps the last valid value. Read old values without throwing: a plain string becomes { code, language: defaultLanguage, filename: null, highlight: null }, language aliases (ts, js, sh, zsh, md, yml, py, scss, xml, text, language-ts …) are resolved, unknown languages fall back to defaultLanguage, and anything else is an empty block; don't write on open. Options: defaultLanguage (default plaintext, aliases allowed, must be in allowedLanguages or the first allowed one is used), allowedLanguages (comma-separated, in that order, unknown entries skipped, a stored language outside the list is still shown as "not in allowed list"), tabSize (default 2, 1–8), maxLines (default 20, 6–200; the inline editor grows from 6 lines up to this and then scrolls), placeholder (default "Paste or type code…"). Save 300 ms after typing stops, and immediately on blur, on language change and when switching to or from fullscreen. Fullscreen opens a large editor in the portal modal with a visible Close button, toggled with Ctrl/⌘+Shift+Enter from anywhere; Esc then Tab leaves the editor. The field-plugin library closes the modal on any Escape that reaches document, so stop Escape inside CodeMirror (Esc closes the modal only when the editor isn't focused) and flush pending edits before the modal closes. The toolbar wraps at a narrow width.

Already have the Claude Code plugin? Run:

Open in Claude CLI

/storyblok-field:storyblok-field "A CodeMirror code block field with a language picker, file name, highlighted lines and a fullscreen editor, storing { code, language, filename, highlight }"

It takes a few minutes and needs Node 22+. You only need a Storyblok personal access token if you want to deploy.

What it's for

This is the first of these fields that I built for myself. My blog, d12r.io, has a code_block component, and until now that was a plain textarea plus a separate language field. Every post with code meant typing in a box that eats your indentation. I asked the same session that had written the generation guide that night to build it, and it handed the job to a sub-agent working from that guide. My only instruction on the design: let's not restrict ourselves, breaking the old shape is fine. The new value bundles everything a blog code block renders: { code, language, filename, highlight }. The field still reads the old plain strings, so existing posts keep working, and the migration happens on the next edit.

Inside, it's CodeMirror 6: highlighting for twelve languages, line numbers, bracket matching, undo and a wrap toggle. The editor grows with the code up to maxLines and then scrolls. For anything longer, there's a fullscreen view in Storyblok's modal.

What you get

The inline editor with TypeScript highlighting, file name src/greet.ts and lines 1 and 3 highlighted in yellow

The fullscreen editor in Storyblok's modal with a Close button, toolbar, large editor and keyboard help

The field at about 330 px: the toolbar wraps onto two rows

The stored value:

json

{
  "code": "export function greet(name: string): string {\n  return `Hello, ${name}!`\n}",
  "language": "typescript",
  "filename": "src/greet.ts",
  "highlight": "1,3"
}

Option	Default	What it does
`defaultLanguage`	`plaintext`	Language for new blocks and old plain strings. Aliases like `ts` work.
`allowedLanguages`	all	Comma-separated languages offered, in this order.
`tabSize`	`2`	Spaces per indent level (1–8).
`maxLines`	`20`	Inline height in lines before it scrolls (6–200).
`placeholder`	`Paste or type code…`	Placeholder of the empty editor.

Using it in the frontend

typescript

import { codeToHtml } from 'shiki'

const block = readCodeBlock(blok.code) // accepts the object or an old plain string
const lines = highlightedLines(block.highlight) // "1,3-5" → Set {1, 3, 4, 5}
const html = await codeToHtml(block.code, {
  lang: block.language,
  theme: 'github-light',
  transformers: [{ line(node, line) { if (lines.has(line)) this.addClassToHast(node, 'highlighted') } }],
})

The language ids are valid Shiki, Prism and highlight.js names. Both helpers are in the plugin's PLUGIN.md.

What I learned building it

A real editor has a real price. The bundle is 534 kB raw, 174 kB gzipped, about 3.4× the other fields, mostly CodeMirror. Good to know: field plugins deploy as one CommonJS file, so everything loads up front, with no lazy loading. For a field I use in every technical post, that's a trade-off I accept.
Escape is a shared key. The browser test caught it: pressing Escape inside the fullscreen editor closed the modal. The @storyblok/field-plugin library closes the modal, without saving, on any Escape that reaches document. The editor now stops Escape inside CodeMirror and saves pending edits before the modal closes.
Debounce, then flush. Edits are saved 300 ms after typing stops, but also right away on blur, on a language change and when switching to or from fullscreen. The browser test types a line and hits Close within the debounce window, and the line is still stored.
Keyboard users need a way out. Tab indents, so it can't also move focus. CodeMirror's answer is Esc, then Tab, to leave the editor. Ctrl/⌘+Shift+Enter opens and closes fullscreen from anywhere.
Good to know: field type names are global. Deploying code-editor returned DUPLICATED_NAME: another Storyblok user already had that name. It went live as d12r-code-editor, and the deploy script now takes --name. Tip: prefix your field names.

It has 23 unit tests and a browser walkthrough that passed 16 of 16 steps. The full story is in the article about the original experiment. The other fields: brand color picker, product picker, author picker, recipe picker.