Puck Import / Export Plugin

A lightweight, extensible Import / Export plugin for @puckeditor/core, designed for modern frontend projects.

This plugin adds a clean UI panel to Puck that allows you to:

• Export editor content as JSON
• Import JSON back into the editor
• Hook into the process to transform blocks before import/export

📸 Screenshot

✨ Features

• 🔁 Import / Export Puck content as JSON
• 🛠️ Transform blocks before export and before import
• ⚛️ React 18 / 19 compatible
• 🧪 Fully typed with TypeScript

📦 Installation

npm install @digital-borders/puck-plugin-import-export

Peer dependencies (must be installed in the host project):

npm install react @puckeditor/core

🚀 Usage

1. Import the plugin

import { createImportExportPlugin } from "@digital-borders/puck-plugin-import-export";

2. Create the plugin instance

const importExportPlugin = createImportExportPlugin({
  onBeforeExport: (blocks) => {
    // Example: remove readOnly flags
    return blocks.map(({ readOnly, ...rest }) => rest);
  },

  onBeforeImport: (blocks) => {
    // Example: filter out debug-only blocks
    return blocks.filter((block) => block.type !== "DebugBlock");
  },
});

3. Register it in Puck

import { Puck } from "@puckeditor/core";
import "@digital-borders/puck-plugin-import-export/styles.css";

function Editor() {
  return <Puck config={config} plugins={[importExportPlugin]} />;
}

🧠 API

createImportExportPlugin(options)

type ImportExportPluginOptions = {
  onBeforeExport?: (blocks: ComponentData[]) => ComponentData[];
  onBeforeImport?: (blocks: ComponentData[]) => ComponentData[];
};

Hooks

• onBeforeExport Called right before exporting data. Useful for cleanup, normalization, migrations, or filtering.

• onBeforeImport Called right before importing data into Puck. Useful for schema migrations, ID regeneration, or compatibility fixes.

🧩 Requirements

• React 18+
• @puckeditor/core
• A client-side environment ("use client")

🛠 Development (Vite)

Build the library bundle:

pnpm build:library

Run the demo app:

pnpm dev:demo

🧪 Tech Stack

• TypeScript
• React
• @puckeditor/core
• Vite (library build + demo)
• Tailwind CSS
• shadcn/ui
• Radix UI

🤝 Contributing

Contributions are very welcome!

You can help by:

• Improving the UI/UX
• Adding template categories or grouping
• Adding persistence adapters
• Writing tests or documentation
• Proposing new plugin ideas

Steps

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Open a pull request

📄 License

MIT © Digital Borders

💡 Ideas & Roadmap

• Template preview thumbnails
• Remote template libraries
• Drag & drop insertion
• Template versioning
• Permissions & sharing

⭐ Acknowledgements

Built for the Puck ecosystem and inspired by real-world editor workflows.

If you find this plugin useful, consider giving the repo a ⭐️ and sharing it with your fellow developers!