Getting Started

SealKit is a React component library for generating Japanese electronic seals (hanko / inkan) in the browser.

What You Can Build

• Personal name seals (認印, mitomein)
• Company square seals (角印, kakuin)
• Date stamps (日付印, date stamp)
• Traditional carving-style seals (篆刻, tenkoku)

Installation

SealKit is published as @luohuax/seal-kit on NPM. It requires Konva and React Konva as peer dependencies.

npm

npm install @luohuax/seal-kit konva react-konva

pnpm

pnpm add @luohuax/seal-kit konva react-konva

yarn

yarn add @luohuax/seal-kit konva react-konva

Requirements

• React >= 18.0.0
• React DOM >= 18.0.0
• Konva >= 10.0.0
• React Konva >= 19.0.0

TypeScript types are included in the package.

First Seal

The simplest way to render a seal is using the SealCanvas component with a preset and text.

import { SealCanvas } from '@luohuax/seal-kit'

function App() {
  return (
    <SealCanvas
      preset="mitomein"
      text="山田太郎"
    />
  )
}

This renders a circular red mitomein seal with the name 山田太郎 arranged vertically.

Next Steps

• Learn more about React usage
• Explore the built-in presets
• Customize colors, borders, and effects