@lokasketch/core

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

Installation

Install the package along with its peer dependencies:

# For React 18 projects
npm install @lokasketch/core react react-dom konva react-konva@^18.2.14

# For React 19 projects
npm install @lokasketch/core react react-dom konva react-konva@^19.2.1

Note: The package supports React 17, 18, and 19. Install the react-konva version that matches your React version:

• React 17/18: react-konva@^18.2.14
• React 19: react-konva@^19.2.1

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.

Peer Dependencies

The following packages must be installed in your project:

• react (>=17.0.0 || ^18.0.0 || ^19.0.0) - React library
• react-dom (>=17.0.0 || ^18.0.0 || ^19.0.0) - React DOM
• konva (^9.2.0) - 2D canvas library
• react-konva (^18.2.14 || ^19.0.0) - React bindings for Konva (version must match your React version)

Internal Dependencies

These are bundled with the package:

• zustand - State management
• immer - Immutable state updates
• react-konva-utils - Utilities for react-konva
• react-icons - Icon library
• jspdf - PDF export functionality

License

MIT