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

Installation
Schema & Prompt Control
Conversation
Instructions
# Initialize HAX in your projecthax init# Add the componenthax add artifact code-editor
The code editor component integrates with AI agents through CopilotKit. Users interact with AI agents through natural language, and the agents automatically create and populate code editors.
Setup
import { HAXCodeEditor, useCodeEditorAction } from "@/hax/artifacts/code-editor";export function DocumentationPage() {const [artifacts, setArtifacts] = useState([]);// Register code editor actions for AI agentsuseCodeEditorAction({addOrUpdateArtifact: (type, data) => {// Handle code editor updates}});return (<HAXCodeEditorlanguage="javascript"value={codeContent}/>);}
© 2025 Outshift. All Rights Reserved.
A powerful code editing component with syntax highlighting, multiple language support, and AI-assisted code generation. Perfect for documentation, tutorials, and collaborative coding environments.

Installation
Schema & Prompt Control
Conversation
Instructions
# Initialize HAX in your projecthax init# Add the componenthax add artifact code-editor
The code editor component integrates with AI agents through CopilotKit. Users interact with AI agents through natural language, and the agents automatically create and populate code editors.
Setup
import { HAXCodeEditor, useCodeEditorAction } from "@/hax/artifacts/code-editor";export function DocumentationPage() {const [artifacts, setArtifacts] = useState([]);// Register code editor actions for AI agentsuseCodeEditorAction({addOrUpdateArtifact: (type, data) => {// Handle code editor updates}});return (<HAXCodeEditorlanguage="javascript"value={codeContent}/>);}
© 2025 Outshift. All Rights Reserved.