Changelog

New Code control

The Code control adds a full-featured code editor to the Makeswift builder, giving content teams a professional editing experience for source code snippets.

• Monaco-powered editor — Opens an editor in a dialog using the same engine that powers VS Code, with syntax highlighting, line numbers, and familiar keyboard shortcuts
• Automatic language detection — The editor detects the language from content automatically, covering JavaScript, TypeScript, HTML, CSS, JSON, YAML, Python, Go, Rust, SQL, shell, and many others
• Standard control interface — Follows the same pattern as other controls with label, description, and defaultValue options

Use cases

The Code control is ideal for components that need to display or process source code:

• Code snippet displays and syntax highlighters
• Custom script injection blocks
• Configuration or schema editors
• Embed code components

Example

1
import { Code, Style } from "@makeswift/runtime/controls";
2
3
runtime.registerComponent(CodeBlock, {
4
  type: "code-block",
5
  label: "Code Block",
6
  props: {
7
    className: Style(),
8
    snippet: Code({
9
      label: "Snippet",
10
      defaultValue: 'console.log("Hello, world!");',
11
    }),
12
  },
13
});

The control passes { value: string } to your component. If no value is set and no defaultValue is provided, your component receives undefined.

For full documentation, see the Code control reference.