Puck Templates Manager Plugin

A plugin for @puckeditor/core that allows users to create, save, and reuse custom templates directly inside the Puck editor.

This plugin enables editors and content creators to turn existing components into reusable templates and quickly insert them into pages, dramatically improving content creation speed and consistency.

📸 Screenshot

✨ Features

• 📦 Create custom templates

  • Save the currently selected Puck component as a reusable template
  • Add name, description, and tags
  • Templates are fully serializable ComponentData[]

• 📥 Import templates into a page

  • Insert templates anywhere in the page
  • Choose whether to insert before or after the selected component
  • Automatically regenerates component IDs to avoid collisions

• 🔍 Search & filter templates

  • Fast search by template name
  • Clean dropdown UI for selection

• 🧠 Editor-aware

  • Works relative to the currently selected block
  • Falls back to appending to page content when no block is selected

• 🧩 Headless storage

  • You decide where templates are stored (DB, API, filesystem, etc.)
  • Plugin only requires a templates array and an onCreateTemplate handler

📦 Installation

npm install @digital-borders/puck-plugin-templates-manager
# or
pnpm add @digital-borders/puck-plugin-templates-manager
# or
yarn add @digital-borders/puck-plugin-templates-manager

🚀 Usage

1. Import the plugin

import { createTemplatesManagerPlugin } from "@digital-borders/puck-plugin-templates-manager";

2. Create the plugin instance

const templatesManagerPlugin = createTemplatesManagerPlugin({
  onCreateTemplate: (template) => {
    // Example: handle the creation of a new template
    console.log("New template created:", template);
  },

  templates: yourTemplatesArray, // pass existing templates to the plugin
});

3. Register it in Puck

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

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

Notes on styling

• The package ships precompiled Tailwind v4 styles. The host app does not need Tailwind.
• Styles are scoped under .dbtm-root to avoid global side effects.
• Import the package stylesheet exactly once from the host app.

🧠 How It Works

• When saving a template:

  • The currently selected component is extracted
  • Metadata (name, description, tags) is added
  • The resulting ComponentData[] is passed to onCreateTemplate

• When importing a template:

  • All component props.id values are regenerated using UUIDs
  • This prevents duplicated IDs inside the editor tree
  • Components are inserted relative to the selected block (or appended)

🧩 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
• propose 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!