CodeEditor

Minimal code editor with line numbers gutter, language label, copy button, language-aware comment toggle.

Inspired by VS Code / Monaco gutter, CodeMirror 6 minimalism.

Preview

What it looks like.

Click a language to switch buffers. Type to edit; Tab indents; Shift+Tab dedents.

typescript

// Type-first agent loop.
import { agent, llm } from '@locara/sdk'

export async function summarise(corpus: string[]) {
  const a = agent({
    model: 'qwen-2.5-coder-7b',
    tools: { search: { args: { q: 'string' } } },
  })
  return a.run(`Summarise: ${corpus.join('\n')}`)
}

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { CodeEditor } from '@locara/components'

<CodeEditor
  value={code}
  onChange={setCode}
  language="typescript"
  lineNumbers={true}
  showCopy={true}
  tabSize={2}
/>

Or copy the source into your repo: locara add code-editor

Design notes

Why it works this way.

Built for snippets, not full IDEs. Cmd+/ toggles language-aware line comments (//, #, --, ; etc.). Tab/Shift+Tab indents single or multi-line selections. Enter preserves the previous line's indentation. For LSP / heavy languages, reach for CodeMirror 6 directly.