Editor & Code

npm install @sugar-high/react react

<Code />

Present code with optional line numbers and marked lines.

Taffy

example.ts

1import { Code } from '@sugar-high/react'2import { taffy } from '@sugar-high/react/themes'34export default function CodePreview({ source }: { source: string }) {5  return (6    <section>7      <Code8        title="example.js"9        lang="javascript"10        theme={taffy}11        controls12        lineNumbers13        highlightLines={[1, [5, 6]]}14      >15        {source}16      </Code>17    </section>18  )19}

Themes

Import a JavaScript theme or pass your own token colors.

Taffy

import { Editor } from '@sugar-high/react'import { taffy } from '@sugar-high/react/themes'<Editor theme={taffy} value={source} onChange={setSource} />

All themes

Taffy, Gruvbox, Minimal, Monokai, Nord Light, One Dark Pro, Soft Minimal, Tokyo Night, Vercel, VS Code.

<Editor />

A controlled, highlighted editor with optional line numbers.

Taffy

editor-example.tsx

1import { useState } from 'react'2import { Editor } from '@sugar-high/react'34const defaultText = 'console.log("hello world")'56export default function Page() {7  const [code, setCode] = useState(defaultText)8  const [title, setTitle] = useState('index.js')910  return (11    <Editor12      value={code}13      title={title}14      onChange={(text) => setCode(text)}15      onChangeTitle={(title) => setTitle(title)}16    />17  )18}
import { useState } from 'react'
import { Editor } from '@sugar-high/react'

const defaultText = 'console.log("hello world")'

export default function Page() {
  const [code, setCode] = useState(defaultText)
  const [title, setTitle] = useState('index.js')

  return (
    <Editor
      value={code}
      title={title}
      onChange={(text) => setCode(text)}
      onChangeTitle={(title) => setTitle(title)}
    />
  )
}

line numbers

18 lines · 422 characters

<FileTree />

Compose with Editor to edit files, or Code for read-only viewing.

Taffy

src/index.tsx

src

components

button.tsx

index.tsx

styles.css

package.json

1import { Button } from './components/button'2import './styles.css'34export default function App() {5  return <Button>Say hello</Button>6}
import { Button } from './components/button'
import './styles.css'

export default function App() {
  return <Button>Say hello</Button>
}

read onlyline numbers

6 lines · 137 characters

API details

Props at a glance. All three components also accept standard div attributes.

<Code />

Prop	Type / default	Purpose
`children`	`string · required`	Source or generated markup to render.
`lang`	`LanguageName`	Canonical language; overrides the title.
`theme`	`Theme`	JavaScript token and component colors.
`title`	`string`	Filename shown in the header and used as a language hint.
`extension`	`string`	Legacy language hint when no lang is set.
`controls`	`boolean · false`	Shows header controls.
`lineNumbers`	`boolean · false`	Shows one-based line numbers.
`highlightLines`	`(number \| [number, number])[]`	Highlights lines and inclusive ranges.
`cx`	`HighlightOptions['cx']`	Maps token types to classes.
`mark`	`HighlightOptions['mark']`	Mutates generated token properties.
`markLine`	`HighlightOptions['markLine']`	Mutates generated line properties.
`preformatted`	`boolean · true`	Uses a pre and code wrapper.
`asMarkup`	`boolean · false`	Treats children as highlighted HTML.
`lineNumbersWidth`	`string`	Sets the line-number gutter width.
`padding`	`string`	Sets code content padding.
`fontSize`	`string \| number`	Sets the code font size.

<Editor />

Prop	Type / default	Purpose
`value`	`string · ''`	Controlled source text.
`onChange`	`(code) => void`	Runs when the source changes.
`title`	`string \| null`	Editable filename and language hint.
`onChangeTitle`	`(title) => void`	Makes the title editable.
`lang`	`LanguageName`	Canonical language; overrides the title.
`theme`	`Theme`	JavaScript token and component colors.
`extension`	`string`	Legacy language hint when no lang is set.
`controls`	`boolean · true`	Shows the header controls.
`lineNumbers`	`boolean · true`	Shows one-based line numbers.
`lineNumbersWidth`	`string`	Sets the line-number gutter width.
`cx`	`HighlightOptions['cx']`	Maps token types to classes.
`mark`	`HighlightOptions['mark']`	Mutates generated token properties.
`padding`	`string`	Sets editor content padding.
`fontSize`	`string \| number`	Sets the editor font size.
`fontFamily`	`string`	Sets the editor font family.
`textareaRef`	`Ref<HTMLTextAreaElement>`	Accesses the underlying textarea.
`ref`	`Ref<HTMLDivElement>`	Accesses the editor root.

<FileTree />

Prop	Type / default	Purpose
`paths`	`readonly string[] · required`	Relative file paths. Folders are inferred and initially expanded.
`activeFile`	`string \| null · required`	Selected file path, or null for no selection.
`onActiveFileChange`	`(path: string) => void · required`	Runs when a file is selected. Use the path to update Editor or Code.
`theme`	`Theme · optional`	Pass the same theme as the adjacent Editor or Code.
`aria-label`	`string · 'Files'`	Accessible name for the tree.

The tree manages folder expansion and keyboard focus. Your component owns the files and selected path.

CSS variables

Variable	Scope / default	Purpose
`--sh-editor-text-color`	Editor `transparent`	Textarea text; transparent over highlighted code.
`--sh-editor-background-color`	Editor `transparent`	Textarea background.
`--sh-caret-color`	Both `CanvasText`	Editor and editable-title caret.
`--sh-font-family`	Both `Editor monospace; Code inherited`	Code, textarea, and title font.
`--sh-font-size`	Both `inherit`	Code and textarea font size.
`--sh-padding`	Both `1rem`	Content and header spacing.
`--sh-line-number-width`	Both `2.5rem / auto`	Line-number gutter width.
`--sh-control-color`	Both `unset`	Header control-dot color.
`--sh-title-color`	Both `unset`	Header filename color.
`--sh-line-number-color`	Both `unset`	Line-number color.
`--sh-line-highlight-color`	Both `unset`	Highlighted-line background.

A single palette stays consistent in every color scheme. Paired themes inherit the standard CSS color-scheme. Set it to light dark for the system preference, or light / dark on an ancestor to force a mode. The variables above remain available as low-level overrides.

Read the full React API on GitHub ↗

WebGPU experimental

Language-agnostic highlighting for large code blocks and editors.

npm install @sugar-high/react react gpu-lexer

Taffy

gpu-editor.tsx

1import { Editor } from '@sugar-high/react/gpu'23export function LargeEditor({ source }) {4  return (5    <Editor6      value={source}7      onChange={saveSource}8      lineNumbers9    />10  )11}
import { Editor } from '@sugar-high/react/gpu'

export function LargeEditor({ source }) {
  return (
    <Editor
      value={source}
      onChange={saveSource}
      lineNumbers
    />
  )
}

11 lines · 192 charactersWebGPU · language agnostic