@nexus-cms/react

The Nexus CMS React runtime and in-context overlay editor.

import { CmsProvider, NexusLayer, createHttpAdapter } from "@nexus-cms/react";
import schema from "../.nexus/cms-schema.json";

const adapter = createHttpAdapter({
  baseUrl: process.env.NEXT_PUBLIC_NEXUS_API_URL!,
  token, // from the edit-mode handshake
});

export function Providers({ children, editMode }) {
  return (
    <CmsProvider schema={schema} adapter={adapter} page="/" editMode={editMode}>
      {children}
      <NexusLayer />
    </CmsProvider>
  );
}

How it works

• CmsProvider holds the override draft, undo/redo history, locale, feature flags (resolved against the license) and talks to a StorageAdapter.
• CmsRuntime patches overrides onto the DOM elements the compiler tagged with data-cms-id — no wrapper components, so styles never break.
• NexusEditor renders the overlay in a shadow root (full style isolation) and builds its own measured hit-targets, so even an image behind text is clickable (no z-index dead-zones). Includes click-to-edit text, image drop zones, link editing, visibility toggles, collection reorder/hide, undo/redo, original/diff preview, SEO panel, version rollback and a locale switcher.

NexusLayer combines the runtime and (in edit mode) the editor.