@elasticdeck/designer

A powerful React component for creating and editing slide decks with drag-and-drop functionality, multi-select capabilities, rich text editing, and data source integration.

Features

• 🎨 Drag & Drop - Intuitive element positioning with visual feedback
• 📝 Rich Text Editing - Full-featured text editor with fonts, colors, and formatting
• 🖼️ Multiple Element Types - Text, images, tables, and charts
• 🎯 Multi-Select - Select and manipulate multiple elements at once
• 🔄 Undo/Redo - Full history management for all actions
• 📊 Data Sources - Integrate CSV, database, API, and custom data sources
• 🎭 Resizable Elements - 8-point resize handles with proportional scaling
• 🎨 Property Editor - Real-time property editing panel
• 🤖 AI Integration - Built-in AI assistant for slide generation
• 📱 Responsive - Works on desktop and tablet devices

Installation

npm install @elasticdeck/designer

or

yarn add @elasticdeck/designer

or

pnpm add @elasticdeck/designer

Quick Start

import { Designer } from '@elasticdeck/designer';
import '@elasticdeck/designer/styles';

function App() {
  return (
    <Designer
      dataSources={[]}
      backendUrl="http://localhost:3000"
      onDataSourcesChanged={(dataSources) => {
        console.log('Data sources updated:', dataSources);
      }}
      onPagesChanged={(pages) => {
        console.log('Pages updated:', pages);
      }}
      onElementsChanged={(elements) => {
        console.log('Elements updated:', elements);
      }}
    />
  );
}

export default App;

TypeScript Support

The package includes full TypeScript definitions:

import type {
  Designer,
  DesignerProps,
  Page,
  SlideElement,
  DataSource,
  DataSourceAPI,
} from '@elasticdeck/designer';

Data Sources

CSV Example

const csvSource: DataSource = {
  id: 'sales_data',
  type: 'csv',
  schema: { month: 'string', revenue: 'number' },
  config: { delimiter: ',', hasHeader: true },
  data: async () => [
    { month: 'Jan', revenue: 10000 },
    { month: 'Feb', revenue: 12000 }
  ]
};

API Example

const apiSource: DataSource = {
  id: 'todos',
  type: 'api',
  schema: { id: 'number', title: 'string', completed: 'boolean' },
  config: { endpoint: 'https://api.example.com/todos', method: 'GET' },
  data: async () => {
    const response = await fetch('https://api.example.com/todos');
    return await response.json();
  }
};

Documentation

For full documentation, visit DATASOURCE_API.md

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Run linter
npm run lint

License

MIT

Support

• 🐛 Issues: GitHub Issues
• 📚 Documentation: Full Documentation