temp-builder

React components for adding the Template Builder editor and viewer to Next.js and React apps. The editor is hosted at https://editor.manne.work.

Installation

npm install temp-builder react react-dom

Quick start (Next.js)

'use client'

import { TemplateEditor } from 'temp-builder'

export default function TemplatePage() {
  return (
    <TemplateEditor
      onSave={(data) => {
        if (data.success) {
          fetch('/api/templates', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              content_ast: data.content_ast,
              html_snapshot: data.html_snapshot,
            }),
          })
        }
      }}
    />
  )
}

TemplateEditor props

| Prop | Type | Description | |------|------|-------------| | templateId | string | Template ID for context | | authToken | string | Auth token | | tenantId | string | Tenant ID | | labId | string | Lab ID | | fieldCatalog | unknown[] | Field catalog | | assetUploadUrl | string | Custom upload URL | | initialContentAst | object | Pre-load content (ProseMirror JSON) | | initialHtmlContent | string | Pre-load content (HTML) | | onSave | (data: SaveResponsePayload) => void | Called when user saves | | onReady | () => void | Called when editor is ready | | onPreviewRequest | (html: string) => void | Called when user clicks Preview | | onContentChange | (data: ContentResponsePayload) => void | Called from getContent | | height | string \| number | Component height (default: '600px') | | style | CSSProperties | Inline styles | | className | string | CSS class |

SaveResponsePayload

interface SaveResponsePayload {
  success: boolean
  content_ast: object  // ProseMirror JSON – store for editing
  html_snapshot: string // HTML – for display/export
  nonce: string
}

Imperative API (ref)

const editorRef = useRef<TemplateEditorRef>(null)

<TemplateEditor ref={editorRef} ... />

// Then:
editorRef.current?.loadTemplate({ content_ast: {...} })
editorRef.current?.saveRequest()
editorRef.current?.getContent()
editorRef.current?.insertPlaceholder('field_code', 'Label', 'text')
editorRef.current?.setReadonly(true)

TemplateViewer props

| Prop | Type | Description | |------|------|-------------| | html | string | HTML content to display | | pdf | string | PDF URL | | title | string | Document title | | meta | { label: string; content: string }[] | Metadata | | onReady | () => void | Called when viewer is ready | | onClose | () => void | Called when user closes | | onEditRequest | () => void | Called when user requests edit | | height | string \| number | Component height (default: '600px') |

URLs

• Editor: https://editor.manne.work/
• Viewer: https://editor.manne.work/?mode=viewer
• Docs: https://editor.manne.work/docs