@ribcreative/visual-edits

Internal RIB package that powers Visual Edits in generated projects.

What it provides

• @ribcreative/visual-edits/vite: Vite plugin that auto-tags JSX host elements with data-rib-* metadata and injects the bridge at build/serve time.
• @ribcreative/visual-edits/bridge: runtime bridge installer for parent/iframe messaging, selection mode, pending styles, and preview height reporting.
• @ribcreative/visual-edits/envelope: envelope V1 protocol utilities.
• @ribcreative/visual-edits/tagger: JSX tag transform utilities.
• @ribcreative/visual-edits/origin: trusted-origin resolution helpers.

Template usage (Vite)

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { ribVisualEdits } from "@ribcreative/visual-edits/vite";

const enabled = process.env.RIB_VISUAL_EDITS === "1";

export default defineConfig({
  plugins: [react(), enabled ? ribVisualEdits() : undefined].filter(Boolean)
});

Runtime usage

import { installVisualEditsBridge } from "@ribcreative/visual-edits/bridge";

installVisualEditsBridge();