Embed VexaScript editors in your own pages

Drop editors into any lesson page.

<div id="lesson-editor"></div>
<script src="/assets/generated/vexa-embed.js"></script>
<script>
  VexaScriptEmbeds.createSimpleEditor("#lesson-editor", {
    content: "fun add(a: int, b: int): int { return a + b }",
    inlayHints: false
  })
</script>

VexaScriptEmbeds.createWorkspaceEditor("#workspace", {
  activePath: "/main.vx",
  files: [
    { path: "/main.vx", content: "import { greet } from './greeter.vx'\nconsole.log(greet('VexaScript'))" },
    { path: "/greeter.vx", content: "export fun greet(name: string): string { return $\"Hello {name}\" }" }
  ]
})

VexaScriptEmbeds.createWorkbenchEditor("#workbench", {
  activePath: "/src/main.vx",
  allowWorkspaceWrites: true,
  inlayHints: true,
  files: [
    { path: "/src/main.vx", content: "import { greet } from './greeter.vx'\nconsole.log(greet('VexaScript'))" },
    { path: "/src/greeter.vx", content: "export fun greet(name: string): string => $\"Hello {name}\"" }
  ]
})

Embedded Monaco

Use the compiler and editor directly in lessons.

The website bundle exposes three helpers: a simple single-file editor, a multi-tab editor, and a full workbench editor with a workspace tree, toolbar, formatting, and save controls.

Embeds also support an inlayHints flag so each host can turn hints on or off, while workbench embeds additionally support allowWorkspaceWrites to enable or disable editing, saving, and workspace mutations plus a reset button that restores the original embedded files.