Documentation

Everything you need to integrate and use the Custom Editor SDK in your projects.

Version0.1.0

Node.js>=18.0.0

React>=17.0.0

📦 Introduction

Custom Editor is a powerful, client-side image design editor SDK built with React and Konva. It provides a complete set of tools for creating and editing designs with text, images, shapes, and freehand drawing.

💡

Key Features: Canvas editing, text & images, shapes, layers panel, undo/redo, export to PNG/JPG/PDF, JSON persistence.

⚡ Installation

Install the package using your preferred package manager:

npm

npm install @lokasketch/core

pnpm

pnpm add @lokasketch/core

yarn

yarn add @lokasketch/core

⚠️

Peer Dependencies: React >=17.0.0 and React DOM >=17.0.0 are required.

ℹ️

Package Structure: The SDK contains the following packages:

@lokasketch/core - Main editor component

🚀 Quick Start

Here's a minimal example to get the editor running:

App.tsx

import { CustomEditor } from "@lokasketch/core";

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

export default App;

🔐 API Configuration

The editor requires a config prop for API features like fonts, stock photos, and templates.

EditorConfig Type (from @lokasketch/core)

import type { EditorConfig } from "@lokasketch/core";

interface EditorConfig {
  apiKey: string;   // API key sent in x-api-key header
}

Usage Example

<CustomEditor
  config={{
    apiKey: process.env.NEXT_PUBLIC_EDITOR_API_KEY,
  }}
/>

⚛️ React Integration

For standard React projects (Create React App, custom setups):

React with State

import { CustomEditor } from "@lokasketch/core";
import { useState, useCallback } from "react";

const config = {
  apiKey: "your-api-key",
};

function App() {
  const [design, setDesign] = useState(null);

  const handleDesignChange = useCallback((json) => {
    setDesign(json);
    localStorage.setItem("my-design", JSON.stringify(json));
  }, []);

  const handleExport = useCallback((blob, format) => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `design.${format}`;
    link.click();
    URL.revokeObjectURL(url);
  }, []);

  return (
    <CustomEditor
      width={800}
      height={600}
      config={config}
      initialDesign={design}
      onDesignChange={handleDesignChange}
      onExport={handleExport}
    />
  );
}

▲ Next.js App Router

For Next.js 13+ with App Router, use the ClientOnly wrapper or dynamic imports to handle SSR:

app/editor/page.tsx (Dynamic Import - Recommended)

"use client";

import dynamic from "next/dynamic";

const CustomEditor = dynamic(
  () => import("@lokasketch/core").then((mod) => mod.CustomEditor),
  { ssr: false, loading: () => <div>Loading...</div> }
);

const config = {
  apiKey: process.env.NEXT_PUBLIC_EDITOR_API_KEY || "demo-key",
};

export default function EditorPage() {
  return <CustomEditor width={800} height={600} config={config} />;
}

📄 Next.js Pages Router

For Next.js with Pages Router, use dynamic imports:

pages/editor.tsx

import dynamic from "next/dynamic";
import { useState } from "react";

const CustomEditor = dynamic(
  () => import("@lokasketch/core").then((mod) => mod.CustomEditor),
  { ssr: false, loading: () => <div>Loading editor...</div> }
);

const config = {
  apiKey: process.env.NEXT_PUBLIC_EDITOR_API_KEY || "demo-key",
};

export default function EditorPage() {
  const [design, setDesign] = useState(null);

  return (
    <div style={{ padding: 20 }}>
      <h1>Design Editor</h1>
      <CustomEditor
        width={800}
        height={600}
        config={config}
        initialDesign={design}
        onDesignChange={setDesign}
      />
    </div>
  );
}

⚡ Vite + React

Vite works out of the box with no special configuration:

Terminal

# Create new Vite project
npm create vite@latest my-editor -- --template react-ts
cd my-editor

# Install Custom Editor
npm install @lokasketch/core

src/App.tsx

import { CustomEditor } from "@lokasketch/core";

const config = {
  apiKey: import.meta.env.VITE_EDITOR_API_KEY || "demo-key",
};

function App() {
  return (
    <div className="app">
      <CustomEditor
        width={1080}
        height={1080}
        config={config}
        onDesignChange={(json) => console.log(json)}
      />
    </div>
  );
}

export default App;

📚 API Reference

Main exports from @lokasketch/core:

Export	Type	Description
CustomEditor	Component	Main editor component with full UI

⚙️ CustomEditor Props

Prop	Type	Required	Description
config	EditorConfig	✅ Yes	API configuration (EditorConfig from @lokasketch/core)
width	number	No	Canvas width in pixels (default: 800)
height	number	No	Canvas height in pixels (default: 600)
initialDesign	EditorJSON \| null	No	Initial design to load (EditorJSON from @lokasketch/core)
onDesignChange	(json) => void	No	Called when design changes
onExport	(blob, format) => void	No	Called when exporting

⌨️ Keyboard Shortcuts

Copy

CtrlC

Paste

CtrlV

Duplicate

CtrlD

Undo

CtrlZ

Redo

CtrlShiftZ

Delete

Delete

Deselect

Escape

Pan Canvas

SpaceDrag

Zoom

AltScroll