@bazex/studio-runtime

In-iframe runtime for the Bazex visual editor.

Mount inside your tenant web app and any DOM node you tag with data-block-id / data-field-key becomes editable from the admin at admin.bazex.co/content. Inline text edits, image uploads, undo/redo, draft/publish — wired through a postMessage bridge to the admin parent.

Install

pnpm add @bazex/studio-runtime
# peer deps you almost certainly already have:
# react ^18 || ^19
# react-dom ^18 || ^19
# @tanstack/react-query ^5

Mount

Place once near the root of your app — the runtime self-gates on ?_studio=1 so public visitors never load the click bridge, CSS, or listener suite.

import { StudioRuntime } from '@bazex/studio-runtime';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <StudioRuntime
          adminOrigin={process.env.NEXT_PUBLIC_ADMIN_ORIGIN /* e.g. https://admin.bazex.co */}
          manifestKey="aydaeda-hub" // optional — see Phase M section below
        />
      </body>
    </html>
  );
}

adminOrigin is critical: every outbound postMessage uses it as targetOrigin, and inbound messages from any other origin are dropped. Leave it unset only in local dev; setting '*' in production lets a malicious parent intercept editor clicks.

Tag your DOM

The runtime walks tagged elements via these data attributes:

| Attribute | Purpose | |---|---| | data-block-id="<id>" | Required. Identifies the editable block; click-to-focus targets the closest ancestor. | | data-instance-id="<id>" | Optional. The specific PageSection instance — required for click-to-select to anchor the inspector to the right row. | | data-field-key="<key>" | Optional. Lets the parent scroll its inspector to a specific field row when the editor clicks one. | | data-studio-passthrough | Opt-out. Click on an element with this attribute fires normally; useful for inner UI (modals, popovers) inside a tagged block. |

Inline text editing

Wrap text content with <EditableText> for contenteditable inline edits. Locked while autosave is in flight; remounted with a fresh key when a save lands so cursor state resets to the saved value.

import { EditableText } from '@bazex/studio-runtime';

<EditableText
  as="h1"
  value={title}
  fieldKey="title"
  fieldLabel="Заголовок"
  maxLength={80}
/>

Cross-origin discipline

The runtime + parent admin live on different origins (your tenant domain vs admin.bazex.co). All wire traffic is postMessage. The parent never reaches into the iframe's DOM; the iframe never reads the parent's storage. Both sides honour targetOrigin strictly when adminOrigin is configured.

Phase M — manifest awareness

manifestKey (optional) tells the admin which EditableManifestSet the iframe was rendered against. Today (v0.1) the prop is stored but not yet broadcast; M.4 adds the announce wire shape so the admin can auto-route the inspector when a partner app mounts multiple manifest sets per route.

SDK status

• v0.1.0 — public preview. API stable for the documented surface; internal helpers (getStudioConfig, configureStudio, isStudioMode, StructuralAffordances) may evolve before 1.0.
• Cross-tab manifest invalidation: deferred. Open admin tabs may show stale field lists until manually refreshed after a manifest meta-editor save. Resolved in M.4.

License

MIT — see LICENSE.