> This page is for Changelog.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

## 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

```tsx
import { Code, Style } from "@makeswift/runtime/controls";

runtime.registerComponent(CodeBlock, {
  type: "code-block",
  label: "Code Block",
  props: {
    className: Style(),
    snippet: Code({
      label: "Snippet",
      defaultValue: 'console.log("Hello, world!");',
    }),
  },
});
```

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](/developer/docs/reference/controls/code).