'use client'; import { StarterKit } from '@react-email/editor/extensions'; import { EmailTheming } from '@react-email/editor/plugins'; import { Inspector } from '@react-email/editor/ui'; import { EditorContent, EditorContext, useEditor } from '@tiptap/react'; import { ExampleShell } from '../example-shell'; const extensions = [StarterKit, EmailTheming]; const content = `

Custom Inspector

This inspector is built entirely from scratch — no pre-built sections or primitives. Just render-props data and plain HTML inputs.

Click me

`; export function InspectorCustom() { const editor = useEditor({ extensions, content, immediatelyRender: false, }); if (!editor) return null; return (

{({ findStyleValue, setGlobalStyle }) => (

Document setGlobalStyle('body', 'backgroundColor', v) } /> setGlobalStyle('container', 'width', v) } unit="px" /> setGlobalStyle('container', 'borderRadius', v) } unit="px" />

)} {({ nodeType, getStyle, setStyle, getAttr, setAttr }) => (

{nodeType} setStyle('backgroundColor', v)} /> setStyle('paddingTop', v)} unit="px" /> {nodeType === 'image' && ( <> setAttr('width', v)} unit="px" /> setAttr('alt', e.target.value)} className="w-full text-xs bg-transparent border border-(--re-border) rounded px-1.5 py-1" /> )} {nodeType === 'button' && ( setAttr('href', e.target.value)} className="w-full text-xs bg-transparent border border-(--re-border) rounded px-1.5 py-1" /> )}

)} {({ marks, toggleMark, alignment, setAlignment, linkColor, setLinkColor, isLinkActive, getStyle, setStyle, }) => (

Text toggleMark('bold')} className="font-bold" /> toggleMark('italic')} className="italic" /> toggleMark('underline')} className="underline" /> toggleMark('strike')} className="line-through" /> {(['left', 'center', 'right'] as const).map((a) => ( setAlignment(a)} /> ))} setStyle('color', v)} /> setStyle('fontSize', v)} unit="px" /> {isLinkActive && ( )}

)}

); } function Row({ label, children, }: { label: string; children: React.ReactNode; }) { return (

{label} {children}

); } function ColorPicker({ value, onChange, }: { value: string; onChange: (v: string) => void; }) { const normalized = normalizeHex(value); return ( onChange(e.target.value)} className="w-5 h-5 border-0 p-0 cursor-pointer" /> onChange(e.target.value)} className="w-16 text-xs bg-transparent border border-(--re-border) rounded px-1 py-0.5" /> ); } function NumberField({ value, onChange, unit, }: { value: string | number | undefined; onChange: (v: number | '') => void; unit?: string; }) { return ( { const raw = e.target.value; onChange(raw === '' ? '' : Number.parseFloat(raw)); }} className="w-14 text-xs bg-transparent border border-(--re-border) rounded px-1 py-0.5" /> {unit && {unit}} ); } function MarkButton({ label, active, onClick, className = '', }: { label: string; active: boolean; onClick: () => void; className?: string; }) { return ( ); } function normalizeHex(value: string): string { if (!value) return '#000000'; const v = value.trim(); const shortHex = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(v); if (shortHex) { return `#${shortHex[1]}${shortHex[1]}${shortHex[2]}${shortHex[2]}${shortHex[3]}${shortHex[3]}`; } if (/^#[0-9a-f]{6}$/i.test(v)) return v; return '#000000'; }

Inspector

Fully custom