Code Editor

Highlighted code editing with line numbers, smart indent and auto-closing pairs.

@kineticui/ui

save.tsxLn 1, tsx

import { Button, toast } from "@kineticui/ui";

export function Save() {
  return (
    <Button onClick={() => toast.success("Saved")}>
      Save changes
    </Button>
  );
}

Installation

Copies the source into your project so you can edit every line.

$ npx @kineticui/cli add code-editor

Also installs: code-block

Exports

CodeEditor

Source: packages/ui/src/components/code-editor.tsx