Visual Editor

Main drag-and-drop interface for building AI prompts visually

Overview

The Visual Editor is the core component of the vibecode framework, providing an intuitive drag-and-drop interface for creating structured AI prompts. It combines block-based editing with real-time preview and export functionality.

Drag & Drop

Intuitive block manipulation with visual feedback

Block System

Modular prompt components with type safety

Real-time Preview

Live XML generation and formatting

Usage Example

Basic Implementation

import { VisualEditor } from '@vibecode/core';
import { useEditorEvents } from '@vibecode/hooks';
import { templateRegistry } from '@vibecode/templates';

function App() {
  const editorEvents = useEditorEvents();
  
  return (
    <div className="h-screen flex">
      <VisualEditor
        blocks={editorEvents.blocks}
        focusedBlockId={editorEvents.focusedBlockId}
        onAddBlock={editorEvents.onAddBlock}
        onUpdateBlock={editorEvents.onUpdateBlock}
        onDeleteBlock={editorEvents.onDeleteBlock}
        onMoveBlock={editorEvents.onMoveBlock}
        onReorderBlocks={editorEvents.onReorderBlocks}
        onSetFocusedBlock={editorEvents.onSetFocusedBlock}
        templates={templateRegistry.getAll()}
      />
    </div>
  );
}