Engine Overview

The block-based core engine powering Editx.

What is the Engine?

@editx/engine is the headless core that powers the Editx Image Editor. It provides:

  • Block system — everything is a block (pages, graphics, text, images)
  • Command pattern — command-backed document edits are undoable/redoable
  • Konva renderer — GPU-accelerated canvas rendering
  • EventAPI — observable state changes
  • Creative primitives — groups, SVG paths, gradients, rich text, and image fills

The engine has zero React dependency and can be used standalone.

Installation

pnpm add @editx/engine konva

Architecture

Scene
├── Page (block)
│   ├── Graphic (block) — Shape + Fill + Effects sub-blocks
│   ├── Text (block)
│   ├── Image (block)
│   └── Group (block)
│       ├── Graphic (block)
│       └── Text (block)

Next Steps

  • Blocks — the block type system
  • Commands — undo, redo, batching, and mutation boundaries
  • Engine API — history, batching, events, export
  • Block API — create, query, and mutate blocks
  • Graphics API — shapes, paths, fills, and strokes
  • Text API — rich text, gradients, curves, and backgrounds
  • Groups API — hierarchy, membership, and group context
  • Editor API — viewport, zoom, edit modes
  • Scene & Events — scene management and event subscriptions