Code Editor

A powerful code editing component with syntax highlighting, multiple language support, and AI-assisted code generation. Perfect for documentation, tutorials, and collaborative coding.

Installation

hax init
hax add artifact code-editor

Component Setup

import { HAXCodeEditor, useCodeEditorAction } from "@/hax/artifacts/code-editor";

export function DocumentationPage() {
  const [artifacts, setArtifacts] = useState([]);

  useCodeEditorAction({
    addOrUpdateArtifact: (type, data) => {
      // Handle code editor updates
    }
  });

  return (
    <HAXCodeEditor
      language="javascript"
      value={codeContent}
    />
  );
}