New

Visual Editor

PreviousNext

A wrapper around a self-hosted visual email editor bundle that exposes window.EmailBuilder.

Radix UIBase UI
Radix UI
"use client"

import * as React from "react"

Installation

pnpm dlx openteam-ui@latest add visual-editor

Usage

import * as React from "react"
 
import {
  VisualEditor,
  type VisualEditorHandle,
} from "@/components/ui/visual-editor"
 
export function CampaignBuilder() {
  const editorRef = React.useRef<VisualEditorHandle>(null)
  const [source, setSource] = React.useState<string | null>(null)
 
  return (
    <VisualEditor
      ref={editorRef}
      scriptSrc="/email-builder/email-builder.umd.js"
      source={source}
      onChange={({ source }) => setSource(source)}
      onMediaRequest={() => {
        editorRef.current?.insertMedia("https://example.com/image.png")
      }}
    />
  )
}

Notes

  • scriptSrc must point to a same-origin bundle. Self-host the editor asset under your app domain instead of loading a third-party CDN URL.
  • The component forwards a ref with insertMedia, reload, and resetDocument.
  • Use onMediaRequest to open your own asset picker, then call insertMedia(url) with the chosen file.