Embedding VexaScript in your own pages

Use the following snippets to embed a single-file editor, a multi-tab editor, or a full workbench with a workspace tree and toolbar directly into tutorials, docs, and demos.

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.

<div id="lesson-editor"></div>
<script src="https://vexa.soywiz.com/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>

<div id="lesson-editor"></div>
<script src="https://vexa.soywiz.com/assets/generated/vexa-embed.js"></script>
<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}\" }" }
  ]
})
</script>

<div id="lesson-editor"></div>
<script src="https://vexa.soywiz.com/assets/generated/vexa-embed.js"></script>
<script>
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}\"" }
  ]
})
</script>