Code

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

Params

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

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