SealRenderer

SealRenderer is the low-level component used by SealCanvas. It accepts a complete SealTemplateConfig and a values object, giving you full control over layout, fields, and rendering.

Import

import { SealRenderer, type SealRendererProps, type SealRendererRef } from '@luohuax/seal-kit'

Props

Prop	Type	Description
config	SealTemplateConfig	Full template configuration: shape, fields, layout, style, effects, export, compliance.
values	SealFieldValues	Field values keyed by field name.
previewScale	number	On-screen preview scale.
textDirection	"horizontal" | "vertical"	Override text direction.
singleFieldAutoGrid	boolean	Auto-compute grid for single-field layouts.

Ref Methods

Method	Signature	Description
exportAsDataURL	(options?: { width?, height?, mimeType?, transparent? }) => Promise<string>	Export the rendered seal as a data URL.

Example

import { useRef } from 'react'
import { SealRenderer, mitomePreset, type SealRendererRef } from '@luohuax/seal-kit'

function App() {
  const ref = useRef<SealRendererRef>(null)

  return (
    <SealRenderer
      ref={ref}
      config={mitomePreset}
      values={{ name: '山田太郎' }}
      previewScale={0.5}
    />
  )
}

When to Use

Use SealRenderer when:

• You need a custom seal template that is not covered by presets.
• You are building a visual editor and want to bind fields dynamically.
• You need fine-grained control over layout grids, fields, and compliance watermarks.

For most use cases, SealCanvas is sufficient.