📝 wysiwyg-pdf — ブラウザで印刷用 PDF テンプレートを作る React/WYSIWYG エディタ

npm github

wysiwyg-pdf は、ブラウザ上で PDF 用のテンプレートを直感的に作成・編集できる React + Konva ベースの WYSIWYG エディタツールキット です。開発者が自分のアプリに統合できる、カスタマイズ性の高いエディタ UI と PDF レイアウト機能 を提供します。

📌 特徴とコンセプト

✨ WYSIWYG（見たまま編集）

「What You See Is What You Get（見たままがそのまま）」の考え方に基づき、編集画面で見た内容がそのまま印刷・PDF のレイアウトに反映される UI を実現しています。これは 一般的なリッチテキストエディタ よりも視覚的で直感的な操作を可能にします。

🧱 主要機能

🎨 ドラッグ＆ドロップエディタ

テキスト、図形、線、画像、表などを自由に配置・編集
オブジェクトの選択、移動、サイズ変更、コピー／貼り付け対応
キーボードショートカット（undo/redo、削除、全選択など）を備えています。

🛠 編集ツールバーとプロパティパネル

挿入ツール、ズームコントロールなどを備えた ツールバー
フォント、色、線幅などを細かく設定する プロパティパネル

これらを組み合わせて、ユーザー側に柔軟でパワフルな編集体験を提供します。

📄 印刷に最適化されたレイアウト

A4 固定の縦／横方向対応
内部座標系はポイント単位（pt）で精密な位置制御
React での DOM 印刷出力に対応する設計（例: react-to-print との併用など）

🚀 インテグレーション & 技術スタック

wysiwyg-pdf は React + Konva を基盤にしており、以下のような設計思想を取り入れています：

編集状態は JSON ドキュメント構造（Doc） で保持
独自の編集コンポーネントを組み合わせることで、

自由度の高い UI のカスタマイズが可能

Tailwind CSS（と shadcn 風 CSS 変数）を前提としたスタイリング

（Tailwind の scan 対象としてローカルで設定が必要）([GitHub][1])

💡 推奨セットアップ例

import 'wysiwyg-pdf/styles.css'
import { ReportKonvaEditor, WysiwygEditorToolbar, WysiwygPropertiesPanel } from 'wysiwyg-pdf'

また、i18n（国際化）対応 はホストアプリ側で提供する方式を採用しており柔軟に組み込めます。([GitHub][1])

🧠 利用シーン

wysiwyg-pdf が活躍する場面の例：

✅ カスタム帳票や申請書のテンプレート作成ツール ✅ PDF フォームや受領書、請求書系 UI の内製エディタ ✅ CMS や業務アプリで「そのまま印刷できる」ドキュメント編集 ✅ PDF のレイアウトを視覚的に設計したい SaaS / Web アプリ

💡 他のライブラリとの位置づけ

一般的な WYSIWYG ライブラリ（例: Editor.js や Quill など）はリッチテキスト表現が中心ですが、wysiwyg-pdf はPDF レイアウト寄りのドキュメント設計をターゲットとしています。通常のリッチテキストとは異なり、A4 ページ物の精密な配置設計ができる点が特徴です。

📦 インストール

npm i wysiwyg-pdf

また React / ReactDOM が peerDependency として必要です。

✍️ まとめ

wysiwyg-pdf は、React アプリケーションに テンプレート編集 & PDF 印刷ワークフローを組み込むための強力な WYSIWYG toolkit です。ビジュアルに自由度の高い UI、JSON で編集状態を管理するアーキテクチャ、そしてブラウザ印刷向けの設計方針で、カスタム帳票編集を簡単に実装したい開発者に最適な選択肢となります。