Infinite View

An experimental infinite-canvas editor built with React, Moveable, Infinite Viewer, and Zustand.

The project separates a stateful EditorEngine from the React rendering and interaction layer so viewport behavior, element operations, history, and business UI can evolve independently.

Highlights

• Infinite pan and zoom workspace.
• Rectangle, text, image, and frame elements.
• Selection, multi-selection, move, resize, and interaction guidelines.
• Element, viewport, interaction, history, and font managers.
• Keyboard shortcuts and creation gestures.
• Floating toolbars for different element types.
• Command-style EditorAPI for business integrations.
• Selection export to image.
• UI extension points through editor slots.

Architecture

Business page
    │
    ▼
CoreEditor (React integration)
    │
    ├── rendering and interaction managers
    ├── toolbars and keyboard shortcuts
    └── EditorAPI
            │
            ▼
       EditorEngine
            │
            ├── elements
            ├── viewport
            ├── history
            └── interaction state

The engine and React integration live under src/core; EngineEditorPage demonstrates how a product can inject its own controls while using the shared editor.

Run locally

npm install
npm run dev

Useful commands:

npm run build
npm run lint
npm run preview

Basic integration

import { useRef } from "react";
import { CoreEditor, EditorProvider, type EditorAPI } from "./core";

export function Editor() {
  const apiRef = useRef<EditorAPI | null>(null);

  return (
    <EditorProvider>
      <CoreEditor apiRef={apiRef} />
    </EditorProvider>
  );
}

Status

Infinite View is an editor-engine experiment rather than a published package. The public API and element model may change as interaction and product requirements are explored.