Visual Editor

The visual editor (daff-ai-editor) is an AI-driven content editing interface that allows users to create and modify content schemas through natural language prompts and visual editing. It combines schema editing, real-time UI preview, and AI assistance in a split-pane interface.

Overview

The visual editor provides an interface that you can use to enable:

• AI-Powered Content Generation: Create and modify schemas using natural language
• Real-Time Preview: See changes immediately in desktop, tablet, and mobile viewports
• Chat Interface: Conversational AI assistance for iterative content development
• Schema Editing: Direct schema manipulation with Monaco editor
• Component Browser: View available components for use in schemas
• Responsive Testing: Preview content across different device sizes

Installation

npm install @daffodil/content monaco-editor --save

See Also

• Content Schema - Learn about schema structure
• Usage Guide - Render schemas in your app

Prebuilt Integrations

We have pre-built some integrations so that you don't have to integrate the visual editor yourself.

• Magento Integration - Use with Magento backend