@lokasketch/core

A powerful, client-side image design editor SDK built with React and Konva.

Installation

npm install @lokasketch/core

Quick Start

import { CustomEditor } from '@lokasketch/core'
import '@lokasketch/core/styles.css'

function MyApp() {
  return (
    <CustomEditor
      width={800}
      height={600}
      config={{
        apiKey: 'your-api-key',
      }}
      onDesignChange={(json) => {
        console.log('Design changed:', json)
      }}
    />
  )
}

Features

• 🎨 Canvas Editor - Drag, resize, rotate elements
• 📝 Text Elements - Customizable fonts, colors, alignment
• 🔷 Shapes - SVG-based shapes with fill/stroke
• ✏️ Freehand Drawing - Draw with customizable brush
• 🖼️ Images - Upload, resize, flip, borders
• 📚 Layers Panel - Visual layer management
• 🔄 Undo/Redo - Full history management
• 📤 Export - PNG, JPG, PDF, SVG formats
• 💾 JSON Persistence - Save and load designs

Documentation

See the main Custom Editor documentation for complete API reference, examples, and configuration options.

Dependencies

• react (>=17.0.0) - React library
• react-dom (>=17.0.0) - React DOM
• konva - 2D canvas library
• react-konva - React bindings for Konva
• zustand - State management
• immer - Immutable state updates
• @lokasketch/types - Type definitions
• @lokasketch/utils - Utility functions

License

MIT