puckeditor/puck

これは何？

主な機能

• 01独自のReactコンポーネントを使ったドラッグ＆ドロップ編集。
• 02コンポーネントのconfigで編集可能なフィールドとレンダー結果を定義。
• 03エディターの出力はプレーンなJSONで、独自のデータベースに保存可能。
• 04別のRenderコンポーネントで保存済みのページを表示。
• 05Next.jsなどのReact環境で動作。
• 06create-puck-appからスターターレシピを利用可能。

ユースケース

• 既存のデザインシステムを使って、開発者以外の人がランディングページを組み立てられるようにする。
• ReactまたはNext.jsのコンテンツ管理ワークフローにページビルダーを追加する。
• マーケティングチームがコードを書かずにレイアウトを編集できる社内ツールを構築する。

クイックスタート

1. 1

   パッケージをインストールする

   npm i @puckeditor/core --save
2. 2

   Puck コンポーネントと config を使ってエディターをレンダリングする

3. 3

   Render コンポーネントを使って公開ページをレンダリングする

使う前に知っておきたいこと

• !React プロジェクトが必要です。単体アプリではなく、React コンポーネントです。

トピック

よくある質問

puck とは？

独自のコンポーネントとデータでページを構築できる、モジュール型のオープンソースReactビジュアルエディター。 Puckは、アプリケーション独自のコンポーネントを使ってドラッグ＆ドロップでページを構築できる、React.js向けのビジュアルエディターです。Reactコンポーネントとして提供されるため、既存のReactアプリに組み込め、Next.jsなどの環境でも動作します。

puck は無料で使えますか？ライセンスは？

puck は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

puck は今もメンテナンスされていますか？

活発にメンテナンス中。puck の最終コミットは 2026年10月16日 です。

puck は何に使えますか？

既存のデザインシステムを使って、開発者以外の人がランディングページを組み立てられるようにする。 ReactまたはNext.jsのコンテンツ管理ワークフローにページビルダーを追加する。 マーケティングチームがコードを書かずにレイアウトを編集できる社内ツールを構築する。

puck のインストール方法は？

パッケージをインストールする: npm i @puckeditor/core --save Puck コンポーネントと config を使ってエディターをレンダリングする Render コンポーネントを使って公開ページをレンダリングする

puck はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/puckeditor/puck