{"_id":"@digital-borders/puck-plugin-templates-manager","_rev":"3-c793724f0949a808f138986f30cd5c78","name":"@digital-borders/puck-plugin-templates-manager","dist-tags":{"latest":"0.4.0"},"versions":{"0.2.0":{"name":"@digital-borders/puck-plugin-templates-manager","version":"0.2.0","keywords":["puck","puck-editor","puck-plugin","import","export","editor","react"],"author":{"name":"Digital Borders"},"license":"MIT","_id":"@digital-borders/puck-plugin-templates-manager@0.2.0","maintainers":[{"name":"dj-fiorex","email":"carmelofiorello@gmail.com"},{"name":"medelba","email":"medelbayoumi@gmail.com"}],"homepage":"https://github.com/digital-borders/puck-plugin-templates-manager#readme","bugs":{"url":"https://github.com/digital-borders/puck-plugin-templates-manager/issues"},"dist":{"shasum":"85c2606fbd899a5f95be004a47d80e266eea1f63","tarball":"https://registry.npmjs.org/@digital-borders/puck-plugin-templates-manager/-/puck-plugin-templates-manager-0.2.0.tgz","fileCount":10,"integrity":"sha512-lInc7IliC4lTxcTwTwfgGssm/X7JkE3KzGLL5VFPC/E4yu+rKUXtQK3w0T/bzZRDh7Lve5j1rRxnJyW0WUHA9w==","signatures":[{"sig":"MEUCIAXw1E8r8vmQhj6oia+JppeXcpIVrxFp5BwUtAXCHsjLAiEA1KkOASavf1jp7faCmtaQ0yAIhrM/JCu5s5mr+kSiHks=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1420731},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"673d5685ce1e1904af9fce27777cc92ade47b80b","scripts":{"dev":"tsup --watch","lint":"eslint ./src","build":"npm run lint && npx rimraf dist && tsup && npm run build:css","prepare":"husky","release":"RELEASE_MODE=true release-it","lint:fix":"eslint . --fix","build:css":"npx @tailwindcss/cli -c tailwind.config.ts -i src/styles.css -o dist/styles.css --minify","typecheck":"tsc -p tsconfig.json --noEmit","prepublishOnly":"node prepublish.js"},"_npmUser":{"name":"dj-fiorex","email":"carmelofiorello@gmail.com"},"repository":{"url":"git+https://github.com/digital-borders/puck-plugin-templates-manager.git","type":"git"},"_npmVersion":"10.9.3","description":"Import / Export plugin for @puckeditor/core","directories":{},"_nodeVersion":"22.18.0","dependencies":{"clsx":"^2.1.1","cmdk":"^1.1.1","uuid":"^13.0.0","radix-ui":"^1.4.3","lucide-react":"^0.575.0","tailwind-merge":"^3.5.0","@diceui/tags-input":"^0.7.2","@radix-ui/react-label":"^2.1.8","@radix-ui/react-dialog":"^1.1.15","class-variance-authority":"^0.7.1","@radix-ui/react-separator":"^1.1.8","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-scroll-area":"^1.2.10"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","husky":"^9.1.7","eslint":"^9.39.3","@eslint/js":"^9.39.3","release-it":"^19.2.4","typescript":"^5.5.0","tailwindcss":"^4.2.1","@types/react":"^19.0.0","autoprefixer":"^10.4.27","@commitlint/cli":"^20.4.2","@tailwindcss/cli":"^4.2.1","typescript-eslint":"^8.56.1","eslint-plugin-react":"^7.37.5","eslint-plugin-import":"^2.32.0","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-unused-imports":"^4.4.1","@commitlint/config-conventional":"^20.4.2","eslint-import-resolver-typescript":"^4.4.4","@release-it/conventional-changelog":"^10.0.5"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","@puckeditor/core":"^0.21.0"},"_npmOperationalInternal":{"tmp":"tmp/puck-plugin-templates-manager_0.2.0_1772407420859_0.8646318799284543","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@digital-borders/puck-plugin-templates-manager","version":"0.3.0","keywords":["puck","puck-editor","puck-plugin","templates","manager","editor","react"],"author":{"name":"Digital Borders"},"license":"MIT","_id":"@digital-borders/puck-plugin-templates-manager@0.3.0","maintainers":[{"name":"dj-fiorex","email":"carmelofiorello@gmail.com"},{"name":"medelba","email":"medelbayoumi@gmail.com"}],"homepage":"https://github.com/digital-borders/puck-plugin-templates-manager#readme","bugs":{"url":"https://github.com/digital-borders/puck-plugin-templates-manager/issues"},"dist":{"shasum":"210153e015e74f1bb60b634767b60990ff16e663","tarball":"https://registry.npmjs.org/@digital-borders/puck-plugin-templates-manager/-/puck-plugin-templates-manager-0.3.0.tgz","fileCount":10,"integrity":"sha512-8dptYYdP3vVnaAY5yvm2Vbj7r73s82yFC+Ih5PeNPELb0dqTvUEoOlYiLBmYFvKsHtEjJsWVm66SLPzQJaSlOw==","signatures":[{"sig":"MEUCIQD+IexrtjjBNhS7Pe9YrmSWlrt5wtLzXWqUx90OlHXXZgIgd+gGAYYIa6Ls0Fjzlg09EVw4UC6YUBmpzeh2YtJz7cE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1421834},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"gitHead":"79fcef9102cb144608b6c66e0be4bcee70717733","scripts":{"dev":"tsup --watch","lint":"eslint ./src","build":"npm run lint && npx rimraf dist && tsup && npm run build:css","prepare":"husky","release":"RELEASE_MODE=true release-it","lint:fix":"eslint . --fix","build:css":"npx @tailwindcss/cli -c tailwind.config.ts -i src/styles.css -o dist/styles.css --minify","typecheck":"tsc -p tsconfig.json --noEmit","prepublishOnly":"node prepublish.js"},"_npmUser":{"name":"dj-fiorex","email":"carmelofiorello@gmail.com"},"repository":{"url":"git+https://github.com/digital-borders/puck-plugin-templates-manager.git","type":"git"},"_npmVersion":"10.9.3","description":"A plugin for Puck Editor that allows users to manage and use templates for their projects.","directories":{},"_nodeVersion":"22.18.0","dependencies":{"clsx":"^2.1.1","cmdk":"^1.1.1","uuid":"^13.0.0","radix-ui":"^1.4.3","lucide-react":"^0.575.0","tailwind-merge":"^3.5.0","@diceui/tags-input":"^0.7.2","@radix-ui/react-label":"^2.1.8","@radix-ui/react-dialog":"^1.1.15","class-variance-authority":"^0.7.1","@radix-ui/react-separator":"^1.1.8","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-scroll-area":"^1.2.10"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","husky":"^9.1.7","eslint":"^9.39.3","@eslint/js":"^9.39.3","release-it":"^19.2.4","typescript":"^5.5.0","tailwindcss":"^4.2.1","@types/react":"^19.0.0","autoprefixer":"^10.4.27","@commitlint/cli":"^20.4.2","@tailwindcss/cli":"^4.2.1","typescript-eslint":"^8.56.1","eslint-plugin-react":"^7.37.5","eslint-plugin-import":"^2.32.0","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-unused-imports":"^4.4.1","@commitlint/config-conventional":"^20.4.2","eslint-import-resolver-typescript":"^4.4.4","@release-it/conventional-changelog":"^10.0.5"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","@puckeditor/core":"^0.21.0"},"_npmOperationalInternal":{"tmp":"tmp/puck-plugin-templates-manager_0.3.0_1772582249395_0.7618664636875594","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@digital-borders/puck-plugin-templates-manager","version":"0.4.0","description":"A plugin for Puck Editor that allows users to manage and use templates for their projects.","license":"MIT","author":{"name":"Digital Borders"},"repository":{"type":"git","url":"git+https://github.com/digital-borders/puck-plugin-templates-manager.git"},"keywords":["puck","puck-editor","puck-plugin","templates","manager","editor","react"],"type":"module","main":"dist/puck-plugin-templates-manager.cjs","module":"dist/puck-plugin-templates-manager.js","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/puck-plugin-templates-manager.js","require":"./dist/puck-plugin-templates-manager.cjs"},"./styles.css":"./dist/puck-plugin-templates-manager.css"},"scripts":{"dev:demo":"vite","build:library":"rimraf ./dist && tsc -p tsconfig.library.json && vite build --config vite.library.config.ts","lint":"eslint ./src","lint:fix":"eslint ./src --fix","prepare":"husky","prepublishOnly":"node prepublish.js","release":"RELEASE_MODE=true release-it"},"dependencies":{"class-variance-authority":"^0.7.1","clsx":"^2.1.1","cmdk":"^1.1.1","lucide-react":"^0.577.0","radix-ui":"^1.4.3","tailwind-merge":"^3.5.0","uuid":"^13.0.0"},"devDependencies":{"@commitlint/cli":"^20.4.2","@commitlint/config-conventional":"^20.4.2","@eslint/js":"^9.39.1","@release-it/conventional-changelog":"^10.0.5","@puckeditor/core":"^0.21.0","@tailwindcss/vite":"^4.2.1","@types/node":"^24.11.0","@types/react":"^19.2.7","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1","eslint":"^9.39.1","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","globals":"^16.5.0","husky":"^9.1.7","react":"^19.2.0","react-dom":"^19.2.0","rimraf":"^6.1.3","shadcn":"^3.8.5","tailwindcss":"^4.2.1","tw-animate-css":"^1.4.0","typescript":"~5.9.3","typescript-eslint":"^8.48.0","vite":"^7.3.1"},"peerDependencies":{"@puckeditor/core":"^0.21.0","react":"^19.2.0","react-dom":"^19.2.0"},"_id":"@digital-borders/puck-plugin-templates-manager@0.4.0","gitHead":"b44f3d0c374baeea302af7fa2f1aa5b81e5e8f10","bugs":{"url":"https://github.com/digital-borders/puck-plugin-templates-manager/issues"},"homepage":"https://github.com/digital-borders/puck-plugin-templates-manager#readme","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-fQ2I/ReKDMDqU5/WyhrvlcrIRE1Rk+DAFy19pYWMVRnhsd2UYtAKTPYGgnSf1vGtucBEifrqP3HUbqVxh4SR1A==","shasum":"e8125a41884e96fca0f05bb2014799aae6d1257f","tarball":"https://registry.npmjs.org/@digital-borders/puck-plugin-templates-manager/-/puck-plugin-templates-manager-0.4.0.tgz","fileCount":23,"unpackedSize":487925,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCd8aOKIMNBbtr4TjyIJTxd4iY5+b2YDfhbaVXfQZn3cgIhAIZ6f5PpV65H/cPWpUtMmpdNtrSLw3yJJshYt49LuHAb"}]},"_npmUser":{"name":"dj-fiorex","email":"carmelofiorello@gmail.com"},"directories":{},"maintainers":[{"name":"dj-fiorex","email":"carmelofiorello@gmail.com"},{"name":"medelba","email":"medelbayoumi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/puck-plugin-templates-manager_0.4.0_1772632450095_0.9455396918567527"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-01T23:23:40.771Z","modified":"2026-03-04T13:54:10.370Z","0.2.0":"2026-03-01T23:23:41.092Z","0.3.0":"2026-03-03T23:57:29.597Z","0.4.0":"2026-03-04T13:54:10.237Z"},"bugs":{"url":"https://github.com/digital-borders/puck-plugin-templates-manager/issues"},"author":{"name":"Digital Borders"},"license":"MIT","homepage":"https://github.com/digital-borders/puck-plugin-templates-manager#readme","keywords":["puck","puck-editor","puck-plugin","templates","manager","editor","react"],"repository":{"type":"git","url":"git+https://github.com/digital-borders/puck-plugin-templates-manager.git"},"description":"A plugin for Puck Editor that allows users to manage and use templates for their projects.","maintainers":[{"name":"dj-fiorex","email":"carmelofiorello@gmail.com"},{"name":"medelba","email":"medelbayoumi@gmail.com"}],"readme":"# Puck Templates Manager Plugin\n\n[![npm version](https://img.shields.io/npm/v/@digital-borders/puck-plugin-templates-manager.svg)](https://www.npmjs.com/package/@digital-borders/puck-plugin-templates-manager)\n[![npm downloads](https://img.shields.io/npm/dm/@digital-borders/puck-plugin-templates-manager.svg)](https://www.npmjs.com/package/@digital-borders/puck-plugin-templates-manager)\n[![license](https://img.shields.io/npm/l/@digital-borders/puck-plugin-templates-manager.svg)](LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Strict-blue.svg)](https://www.typescriptlang.org/)\n[![Puck](https://img.shields.io/badge/Built%20for-Puck%20Editor-purple)](https://puckeditor.com)\n\nA plugin for **@puckeditor/core** that allows users to **create, save, and reuse custom templates** directly inside the Puck editor.\n\nThis 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.\n\n---\n\n## ๐Ÿ“ธ Screenshot\n\n

\n \n \n

\n\n---\n\n## โœจ Features\n\n- ๐Ÿ“ฆ **Create custom templates**\n - Save the currently selected Puck component as a reusable template\n - Add name, description, and tags\n - Templates are fully serializable `ComponentData[]`\n\n- ๐Ÿ“ฅ **Import templates into a page**\n - Insert templates anywhere in the page\n - Choose whether to insert **before or after** the selected component\n - Automatically regenerates component IDs to avoid collisions\n\n- ๐Ÿ” **Search & filter templates**\n - Fast search by template name\n - Clean dropdown UI for selection\n\n- ๐Ÿง  **Editor-aware**\n - Works relative to the currently selected block\n - Falls back to appending to page content when no block is selected\n\n- ๐Ÿงฉ **Headless storage**\n - You decide where templates are stored (DB, API, filesystem, etc.)\n - Plugin only requires a `templates` array and an `onCreateTemplate` handler\n\n---\n\n## ๐Ÿ“ฆ Installation\n\n```bash\nnpm install @digital-borders/puck-plugin-templates-manager\n# or\npnpm add @digital-borders/puck-plugin-templates-manager\n# or\nyarn add @digital-borders/puck-plugin-templates-manager\n```\n\n---\n\n## ๐Ÿš€ Usage\n\n### 1. Import the plugin\n\n```ts\nimport { createTemplatesManagerPlugin } from \"@digital-borders/puck-plugin-templates-manager\";\n```\n\n### 2. Create the plugin instance\n\n```ts\nconst templatesManagerPlugin = createTemplatesManagerPlugin({\n onCreateTemplate: (template) => {\n // Example: handle the creation of a new template\n console.log(\"New template created:\", template);\n },\n\n templates: yourTemplatesArray, // pass existing templates to the plugin\n});\n```\n\n### 3. Register it in Puck\n\n```tsx\nimport { Puck } from \"@puckeditor/core\";\nimport \"@digital-borders/puck-plugin-templates-manager/styles.css\";\n\nfunction Editor() {\n return ;\n}\n```\n\n### Notes on styling\n\n- The package ships precompiled Tailwind v4 styles. The host app does not need Tailwind.\n- Styles are scoped under `.dbtm-root` to avoid global side effects.\n- Import the package stylesheet exactly once from the host app.\n\n---\n\n## ๐Ÿง  How It Works\n\n- When saving a template:\n - The currently selected component is extracted\n - Metadata (name, description, tags) is added\n - The resulting `ComponentData[]` is passed to `onCreateTemplate`\n\n- When importing a template:\n - All component `props.id` values are regenerated using UUIDs\n - This prevents duplicated IDs inside the editor tree\n - Components are inserted relative to the selected block (or appended)\n\n---\n\n## ๐Ÿงฉ Requirements\n\n- React 18+\n- `@puckeditor/core`\n- A client-side environment (`\"use client\"`)\n\n---\n\n## ๐Ÿ›  Development (Vite)\n\nBuild the library bundle:\n\n```bash\npnpm build:library\n```\n\nRun the demo app:\n\n```bash\npnpm dev:demo\n```\n\n---\n\n## ๐Ÿงช Tech Stack\n\n- TypeScript\n- React\n- @puckeditor/core\n- Vite (library build + demo)\n- Tailwind CSS\n- shadcn/ui\n- Radix UI\n\n---\n\n## ๐Ÿค Contributing\n\nContributions are **very welcome**!\n\nYou can help by:\n\n- Improving the UI/UX\n- Adding template categories or grouping\n- Adding persistence adapters\n- Writing tests or documentation\n- propose new plugin ideas\n\n### Steps\n\n1. Fork the repository\n2. Create a new branch\n3. Make your changes\n4. Open a pull request\n\n---\n\n## ๐Ÿ“„ License\n\nMIT ยฉ Digital Borders\n\n---\n\n## ๐Ÿ’ก Ideas & Roadmap\n\n- Template preview thumbnails\n- Remote template libraries\n- Drag & drop insertion\n- Template versioning\n- Permissions & sharing\n\n---\n\n## โญ Acknowledgements\n\nBuilt for the Puck ecosystem and inspired by real-world editor workflows.\n\nIf you find this plugin useful, consider giving the repo a โญ๏ธ\nand sharing it with your fellow developers!\n","readmeFilename":"README.md"}