The visual editor for React: puckをさわってみる

measuredco/puckをさわってみる

puckとは

The visual editor for React とのこと

モチベーション

• 近頃、Reactを触ることが多く、「Reactのコンポーネントのビジュアルエディタみたいのはないもんか? 」と思っていた

つくってみた画面はこんな感じ。 想像していたものに近い。

やったこと

$ npx create-puck-app my-app

を実行したのち、適当にコンポーネントを作ってみる。

HeadingBlock が用意されているので適当にそれをまねて H2 を作ってみる。

--- a/database.json
diff --git a/puck.config.tsx b/puck.config.tsx
index f000285..1f52467 100644
--- a/puck.config.tsx
+++ b/puck.config.tsx
@@ -2,6 +2,7 @@ import type { Config } from "@measured/puck";
 
 type Props = {
   HeadingBlock: { title: string };
+  H2: { title: string };
 };
 
 export const config: Config<Props> = {
@@ -19,6 +20,17 @@ export const config: Config<Props> = {
         </div>
       ),
     },
+    H2: {
+      fields:{
+        title: { type: "text" },
+      },
+      defaultProps: {
+        title: "H2",
+      },
+      render: ({ title }) => (
+        <h2>{title}</h2>
+      ),
+    }
   },
 };

保存したら

$ npm run dev

とかでサーバー起動。

publish ボタンを押すとブラウザ上でで編集した内容がdatabase.jsonに記録される。

つまり、この世界観的には、

• コンポーネントはVSCodeみたいなエディタで管理
• コンポーネントの配置はブラウザ上で管理・database.jsonに記録される

みたいな感じ？かな