@ohhwells/bridge
v0.1.13
Published
The OhhWells canvas editor bridge — a standalone npm package that enables inline text and image editing for any site deployed on the OhhWells platform.
Readme
@ohhwells/bridge
The OhhWells canvas editor bridge — a standalone npm package that enables inline text and image editing for any site deployed on the OhhWells platform.
What it does
When a studio owner opens their site in the OhhWells dashboard canvas editor, the bridge:
- Connects the iframe (the live site) to the parent canvas editor via
postMessage - Enables click-to-edit for text, images, and background images
- Handles draft saving and content hydration
- Provides state toggle UI for editing hidden content (hover states, form success/error views)
- Injects scoped styles that never leak into the host template
Installation
npm install @ohhwells/bridgeImport the styles once in your template's root layout:
import '@ohhwells/bridge/styles'Usage
Add OhhwellsBridge to your template's root layout:
import { OhhwellsBridge } from '@ohhwells/bridge'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<OhhwellsBridge />
</body>
</html>
)
}The bridge activates automatically when the page is loaded inside the OhhWells canvas editor. It has no effect in production (live site) mode.
Template attributes
Mark elements as editable using data-ohw-* attributes. See VIBECODER.md for the full authoring guide.
| Attribute | Value | Description |
|---|---|---|
| data-ohw-key | unique string | Identifier for storing/hydrating content |
| data-ohw-editable | text | plain | image | bg-image | Edit mode |
| data-ohw-editable-state | "hover,focus" etc. | Declares available states on a container |
| data-ohw-state-view | "default" | "success" | "error" | "hover" | Wraps each state's content |
Design tokens
The package ships with the full OhhWells design token set, scoped to [data-ohw-bridge] so styles never leak into the host template.
Semantic colors
All colors are defined as CSS variables on [data-ohw-bridge-root] and override-able per host:
| Token | Light | Dark |
|---|---|---|
| background | #ffffff | #020617 |
| foreground | #020617 | #f8fafc |
| primary | #0f172a | #f8fafc |
| primary-foreground | #f8fafc | #0f172a |
| secondary | #f1f5f9 | #1e293b |
| muted | #f1f5f9 | #1e293b |
| muted-foreground | #64748b | #94a3b8 |
| accent | #f1f5f9 | #1e293b |
| border | #e2e8f0 | #334155 |
| destructive | #dc2626 | #7f1d1d |
| success | #16a34a | #22c55e |
Typography
Standard Tailwind scale with Figma-specified tracking:
| Class | Size | Line height | Tracking |
|---|---|---|---|
| text-9xl | 128px | 1 | -0.025em |
| text-8xl | 96px | 1 | -0.025em |
| text-7xl | 72px | 1 | -0.025em |
| text-6xl | 60px | 1 | -0.025em |
| text-5xl | 48px | 1 | -0.025em |
| text-4xl | 36px | 40px | -0.025em |
| text-3xl | 30px | 36px | -0.025em |
| text-2xl | 24px | 32px | -0.025em |
| text-xl | 20px | 28px | -0.025em |
| text-lg | 18px | 28px | 0 |
| text-base | 16px | 24px | 0 |
| text-sm | 14px | 20px | 0 |
| text-xs | 12px | 16px | 0 |
Brand palette
Re:Bound brand colors are available as named tokens: bone, ivory, sand, linen, stone, clay, umber, umber-deep, espresso, clove, ink, ash, carbon.
Dark mode
Add the dark class to [data-ohw-bridge-root] to activate dark token overrides:
<div data-ohw-bridge-root class="dark">...</div>Development
# Install dependencies
npm install
# Build (TypeScript + CSS)
npm run build
# Watch mode
npm run devOutput is written to dist/:
dist/index.js— CJSdist/index.mjs— ESMdist/index.d.ts— TypeScript declarationsdist/styles.css— Scoped Tailwind CSS
Publishing
npm run build
npm publish --access publicLicense
MIT