Editor

Compose a codegloss block — edit the code, click tokens to annotate, then draw connections. Preview updates live on the right.

Token pickerClick any token to annotate it
Loading highlight…
Annotations
No annotations yet.
Connections
Add at least two annotations to create a connection.

Preview

{
  "code": "function greet(name) {\n  const message = \"Hello, \" + name;\n  console.log(message);\n  return message;\n}",
  "lang": "js",
  "filename": "greet.js"
}

Import

Paste JSON, MDX (codegloss + annotations), or a <CodeGloss/> element

Settings

Theme
Arcs
Callouts

Preview

codegloss.config.ts
import { defineConfig } from 'codegloss/config';

export default defineConfig({
	// use codegloss defaults
});