fancy-code
@particle-academy/fancy-code
Lightweight embedded code editor — custom engine, no Monaco / CodeMirror / Shiki.
$
npm install @particle-academy/fancy-codeAuthoring surface
Humans compose it
Controlled value + onChange, JSON-friendly props, terse defaults — so people (and agents) build it fast.
Inhabited surface
Agents drive it over MCP
A bridge in @particle-academy/agent-integrations exposes typed tools — agents read and mutate state through stable handles, never DOM scraping.
code_readcode_writecode_replace
Why
Monaco is 5MB and CodeMirror v6's ramp-up is steep; most embedded code surfaces don't need an IDE's complexity. Teams rebuild the same lightweight editor chrome (syntax highlight, line numbers, word wrap, language toggle, copy button) repeatedly, bundling framework dependencies they didn't choose and fighting DOM scanner hostility.
fancy-code is zero third-party dependency: custom fast tokenizer, controlled surface, and stable selectors for agents to read and mutate code via MCP bridges.What
CodeEditor is a compound code editor exposing value + onChange, language registry, theme registry, and a useCodeEditor hook for toolbar actions (get/set text, toggle word wrap, copy, focus). Render sub-components <CodeEditor.Toolbar />, <CodeEditor.Panel />, and <CodeEditor.StatusBar /> independently or omit for minimal use. Built-in languages: JavaScript, TypeScript, HTML, PHP, Python, Go. Built-in themes: light, dark, auto (follows prefers-color-scheme). Ship data-fancy-code-* attributes on every interactive element and the textareaRef via context so agents can read code, inject edits, and integrate with react-fancy's <InputTag /> via useCodeEditorInputTagAdapter.How
Install:
npm install @particle-academy/fancy-code @particle-academy/react-fancy react react-dom. Import styles in your Tailwind CSS file: @import "@particle-academy/fancy-code/styles.css". Then render: <CodeEditor value={code} onChange={setCode} language="javascript"><CodeEditor.Toolbar /><CodeEditor.Panel /></CodeEditor>. Pair registerLanguage() and registerTheme() calls at startup to extend both registries. In Inertia apps, wrap with <FancyClientOnly> from @particle-academy/fancy-inertia.Components
3 components · click any tile for a full demo, source, and install snippet.
CodeEditorOpen →
app.ts
1
2
3
4
5
import { run } from "./engine"
const cfg = {
retries: 3,
}
await run(cfg)▌
Editor surface — controlled value, language + theme registries, and a diffBase gutter with live change marks (added / modified / deleted).