@magfur-alam/editor

The Elementor-style visual editor UI: canvas, sidebar element palette, inspector (content + style panels), navigator, toolbar, and drag & drop (via dnd-kit). Sits on top of @magfur-alam/core (state/history/tree) and @magfur-alam/react (reuses its <NodeRenderer> for read-only previews).

Part of the Next.js Database-Backed Visual Page Builder monorepo — see the root README for the full architecture.

Install

npm install @magfur-alam/editor @magfur-alam/core @magfur-alam/react

Usage

The package self-marks "use client", so <PageBuilderEditor> can be imported directly into a Server Component's JSX — no hand-rolled client wrapper required:

// app/builder/[slug]/page.tsx — a Server Component
import { PageBuilderEditor } from "@magfur-alam/editor";

export default async function BuilderPage({ params }: { params: { slug: string } }) {
  const page = await getPage(params.slug); // your own server-side fetch
  return (
    <PageBuilderEditor
      initialDocument={page.document}
      autosave={{ onSave: (doc) => savePage(params.slug, doc) }}
    />
  );
}

Performance notes

Every rendered node subscribes to only the derived boolean it actually needs (selectedNodeId === node.id, not the raw shared selectedNodeId), and NodeEditor/NavigatorNode are wrapped in React.memo — combined with @magfur-alam/core's Immer-backed structural sharing, editing one node doesn't re-render its siblings, even at hundreds of nodes. If you fork this package and add something that reads React Context (directly, or indirectly through a hook like dnd-kit's useDraggable), keep whatever value you pass into that context's provider referentially stable across renders — an unstable context value re-renders every consumer regardless of memo (this bit us once; see PLAN.md's Phase 7 notes for the real bug it caused).