> This page is for Developer.

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

# Code

> Adds a Code editor in the Makeswift builder to visually edit a string of source code, with syntax highlighting.

Adds a Code editor in the Makeswift builder to visually edit a string of source code, with syntax highlighting.

![](/_fern-img/721bfae4a51c824c9deea35759d108e3cb5fa174cb3d82751d004b67b7f82422.webp)

## Params

**`label`** `string` — default: Code

Text for the panel label in the Makeswift builder.

---

**`description`** `string`

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).

---

**`defaultValue`** `string`

The value passed to your component when nothing is set in the Makeswift
builder.

---

## Prop type

The Code control passes an object of shape `{ value: string }` to your component, where `value` contains the source code as a string. If you don't set a `defaultValue` and no value is set in the builder, your component receives `undefined`.

## Editor

The Code panel opens a full-screen editor powered by [Monaco](https://microsoft.github.io/monaco-editor/) (the editor used in VS Code). Syntax highlighting is applied automatically — the editor detects the language from the content rather than exposing a language picker. Detection covers common languages including JavaScript, TypeScript, HTML, CSS, JSON, YAML, Markdown, Python, Ruby, Go, Rust, Java, PHP, SQL, shell, and others. When the language can't be confidently detected, the editor falls back to plaintext.

## Example

The following example adds a Code control to the `snippet` prop of a CodeBlock component.

**`CodeBlock.makeswift.ts`**

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

import { runtime } from "@/makeswift/runtime";

import { CodeBlock } from "./CodeBlock";

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

**`CodeBlock.tsx`**

```tsx CodeBlock.tsx
interface Props {
  className?: string;
  snippet?: { value: string };
}

export function CodeBlock({ className, snippet }: Props) {
  return (
    <pre className={className}>
      <code>{snippet?.value ?? ""}</code>
    </pre>
  );
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).