@opncanvas/react-editor

Full React editor UI components for design schemas with drag & drop support.

Installation

npm install @opncanvas/react-editor @opncanvas/schema @opncanvas/engine @opncanvas/react-renderer @opncanvas/exporter react react-dom

Quick Start

import { Editor } from '@opncanvas/react-editor'
import { emailCaptureTemplate } from '@opncanvas/templates'

function App() {
  return (
    <Editor
      initialSchema={emailCaptureTemplate}
      onSchemaChange={(newSchema) => {
        console.log('Schema changed:', newSchema)
        // Save to localStorage, database, etc.
      }}
      onAction={(node) => {
        console.log('Action triggered:', node)
      }}
    />
  )
}

Components

Editor

Main editor component with panels, canvas, and export functionality.

Props:

• initialSchema - Initial schema to load
• onSchemaChange? - Callback when schema changes
• onAction? - Callback when an action is triggered

<Editor
  initialSchema={mySchema}
  onSchemaChange={(schema) => saveSchema(schema)}
  onAction={(node) => handleAction(node)}
/>

Canvas

Preview canvas with drag & drop support using dnd-kit.

Props:

• schema - Current schema
• setSchema - Schema updater function
• selectedBlockId - Currently selected block ID
• setSelectedBlockId - Function to set selected block
• onAction? - Action handler

<Canvas
  schema={schema}
  setSchema={setSchema}
  selectedBlockId={selectedId}
  setSelectedBlockId={setSelectedId}
/>

Editor Panels

Individual editor panels for different node types:

• ButtonEditorPanel - Edit button properties
• TextEditorPanel - Edit text properties (header, subtext, legal)
• InputEditorPanel - Edit input properties (email, phone)
• BackgroundEditorPanel - Edit background/container properties

Editor Controls

Reusable form inputs:

• TextInput - Text input field
• NumberInput - Number input field
• ColorInput - Color picker
• SelectInput - Dropdown select
• createPropertyHandler - Helper for property change handlers

Features

Drag & Drop

The editor includes built-in drag & drop support for reordering elements. Users can click and drag elements to reorder them in the canvas.

Property Editing

Click any element in the canvas to edit its properties in the side panel:

• Text content
• Colors (background, text, border)
• Sizing (width, height, padding, margins)
• Typography (font family, size, weight, alignment)
• Borders and shadows

Export

Click the "Export" button to generate production-ready HTML/CSS/JS code.

Styling

The editor uses CSS classes that you can style:

.editor-container {
  display: flex;
  gap: 20px;
}

.editor-panel {
  width: 300px;
  padding: 20px;
  background: #f5f5f5;
}

.renderer-panel {
  flex: 1;
  padding: 20px;
}

.renderer-canvas {
  background: #fff;
  min-height: 500px;
  padding: 40px;
}

.form-container {
  margin: 0 auto;
}

.selected {
  outline: 2px solid #0066ff;
}

.export-controls {
  padding: 20px;
}

Advanced Usage

Custom Actions

import { Editor } from '@opncanvas/react-editor'
import { ActionRegistry } from '@opncanvas/plugin-api'

const registry = new ActionRegistry()

registry.register({
  id: 'custom_submit',
  handler: async (data) => {
    await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(data)
    })
  }
})

function App() {
  return (
    <Editor
      initialSchema={mySchema}
      onAction={(node) => {
        if (node.type === 'button') {
          registry.execute(node.action)
        }
      }}
    />
  )
}

Save/Load Schemas

import { useState, useEffect } from 'react'
import { Editor } from '@opncanvas/react-editor'

function App() {
  const [schema, setSchema] = useState(() => {
    const saved = localStorage.getItem('my-schema')
    return saved ? JSON.parse(saved) : defaultSchema
  })

  return (
    <Editor
      initialSchema={schema}
      onSchemaChange={(newSchema) => {
        setSchema(newSchema)
        localStorage.setItem('my-schema', JSON.stringify(newSchema))
      }}
    />
  )
}

With History (Undo/Redo)

import { Editor } from '@opncanvas/react-editor'
import { useHistory } from '@opncanvas/history'

function App() {
  const { schema, setSchema, undo, redo, canUndo, canRedo } = useHistory(initialSchema)

  return (
    <div>
      <div className="toolbar">
        <button onClick={undo} disabled={!canUndo}>Undo</button>
        <button onClick={redo} disabled={!canRedo}>Redo</button>
      </div>
      <Editor
        initialSchema={schema}
        onSchemaChange={(newSchema) => {
          setSchema(() => newSchema, 'Update schema')
        }}
      />
    </div>
  )
}

License

Apache 2.0