CodeEditor

A syntax-highlighted code editor powered by Shiki. It supports line numbers, tab indentation, save shortcuts, and a dirty-state indicator.

Import

import { CodeEditor } from "@run0/jiki-ui";

Props

Features

• Syntax highlighting via a lazy-loaded Shiki singleton (github-dark theme)
• Line numbers with synchronized scrolling
• Tab inserts two spaces
• Ctrl+S / Cmd+S triggers onSave
• Amber dot indicator when the buffer has unsaved changes
• Tab bar showing the current filename and detected language label
• Status bar showing the total line count

Usage

function Editor() {
  const [file, setFile] = useState({ path: "index.js", content: "" });

  return (
    <CodeEditor
      filename={file.path}
      content={file.content}
      onSave={(path, content) => container.writeFile(path, content)}
      accentColor="blue"
    />
  );
}

Demo

import { useState } from "react";
import { CodeEditor } from "@run0/jiki-ui";

const INITIAL_CONTENT = `function greet(name) {
return \`Hello, \${name}!\`;
}

console.log(greet("jiki"));
`;

export default function CodeEditorDemo() {
const [content, setContent] = useState(INITIAL_CONTENT);

return (
  <div style={{ height: 300 }}>
    <CodeEditor
      filename="index.js"
      content={content}
      onSave={(path, code) => {
        setContent(code);
        console.log("Saved", path);
      }}
    />
  </div>
);
}