[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"workflow-asset-5269d467":3,"seo:featured-workflow:5269d467-4cf2-11f1-9bc6-00163e2b0d79:fr":85,"workflow-related-asset-5269d467-5269d467-4cf2-11f1-9bc6-00163e2b0d79":86},{"id":4,"uuid":5,"slug":6,"title":7,"description":8,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":13,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":15,"tags":22,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":29,"asset_kind":30,"target_tools":31,"install_mode":35,"entrypoint":19,"risk_profile":36,"dependencies":38,"verification":44,"agent_metadata":47,"agent_fit":60,"trust":72,"provenance":81,"created_at":83,"updated_at":84},3003,"5269d467-4cf2-11f1-9bc6-00163e2b0d79","asset-5269d467","Puck — The Visual Editor for React","An open-source visual editor for React that enables drag-and-drop page building with your own components, supporting React Server Components and producing clean, serializable output.","8a910e34-3180-11f1-9bc6-00163e2b0d79","Script Depot","",0,2,"en",[16],{"id":17,"step_order":18,"title":19,"description":11,"prompt_template":20,"variables":11,"depends_on":21,"expected_output":11},3566,1,"Puck Overview","# Puck — The Visual Editor for React\n\n## Quick Use\n```bash\nnpm install @measured\u002Fpuck\n```\n\n```jsx\nimport { Puck, Render } from '@measured\u002Fpuck';\nimport '@measured\u002Fpuck\u002Fpuck.css';\n\nconst config = {\n  components: {\n    Heading: {\n      fields: { text: { type: 'text' } },\n      render: ({ text }) => \u003Ch1>{text}\u003C\u002Fh1>,\n    },\n  },\n};\n\n\u002F\u002F Editor mode\n\u003CPuck config={config} data={{}} onPublish={(data) => save(data)} \u002F>\n\n\u002F\u002F Render mode\n\u003CRender config={config} data={savedData} \u002F>\n```\n\n## Introduction\nPuck is a visual page editor for React that lets content editors build pages using drag-and-drop with your own components. It produces a JSON data structure that can be rendered with the same components, keeping editing and rendering in sync without any content API dependency.\n\n## What Puck Does\n- Provides a drag-and-drop page editor powered by your React component library\n- Produces a clean JSON data structure that represents the page layout and content\n- Renders pages from saved data using the same component definitions as the editor\n- Supports React Server Components for optimized server-side rendering\n- Allows custom fields, plugins, and overrides for extending the editor interface\n\n## Architecture Overview\nPuck consists of two main exports: the `Puck` editor component and the `Render` component. The editor maintains a data object describing the page structure as a tree of component references with props. When a user drags a component onto the canvas, Puck updates this data tree. The `Render` component takes the same config and data to produce the final output. Both share the same component resolver, ensuring visual parity between editing and rendering.\n\n## Self-Hosting & Configuration\n- Install `@measured\u002Fpuck` and import the CSS file for the default editor styles\n- Define your components in a config object with fields, default props, and render functions\n- Mount the `Puck` component for editor mode with an `onPublish` callback to save the data\n- Use the `Render` component for production rendering from saved JSON data\n- Customize the editor UI with overrides for the header, sidebar, and field types\n\n## Key Features\n- Server Components: first-class support for React Server Components and Next.js App Router\n- Inline editing: click-to-edit text directly on the canvas without switching to a side panel\n- DropZones: define nestable content areas within components for flexible layouts\n- Plugin system: extend the editor with custom field types, actions, and UI overrides\n- Zero vendor lock-in: data is plain JSON, components are your own React code\n\n## Comparison with Similar Tools\n- **Craft.js** — lower-level framework for building editors; Puck is a ready-to-use editor with a polished UI\n- **Builder.io** — SaaS visual editor with an open SDK; Puck is fully self-contained with no external service\n- **GrapesJS** — framework-agnostic HTML editor; Puck is React-native and uses real React components\n- **Plasmic** — visual builder with code generation; Puck produces JSON data rendered by your components\n- **Storyblok** — headless CMS with a visual editor; Puck is an open-source editor without CMS infrastructure\n\n## FAQ\n**Q: Does Puck work with Next.js App Router?**\nA: Yes. Puck supports React Server Components and works with Next.js App Router out of the box. You can render pages on the server using the `Render` component.\n\n**Q: How is the page data stored?**\nA: Puck produces a JSON object. You store it however you like — in a database, a file, or a CMS. There is no built-in persistence layer, which keeps the tool flexible.\n\n**Q: Can I use Puck with existing component libraries?**\nA: Yes. Register your existing components in the Puck config object with field definitions. The editor renders your actual components on the canvas.\n\n**Q: Is Puck suitable for production use?**\nA: Puck is actively maintained and used in production by teams building page builders and content management tools. The API is stable with semantic versioning.\n\n## Sources\n- https:\u002F\u002Fgithub.com\u002Fmeasuredco\u002Fpuck\n- https:\u002F\u002Fpuckeditor.com\u002Fdocs","0",[23],{"id":24,"name":25,"slug":26,"icon":27},11,"Scripts","script","📜",false,"c5b9a98af44999dc9e0dd730b95f90add8413c85ab0ca54d6a40a0f573e1121e","skill",[32,33,34],"claude_code","codex","gemini_cli","single",{"executes_code":28,"modifies_global_config":28,"requires_secrets":37,"uses_absolute_paths":28,"network_access":28},[],{"npm":39,"pip":41,"brew":42,"system":43},[40],"@measured\u002Fpuck",[],[],[],{"commands":45,"expected_files":46},[],[19],{"asset_kind":30,"target_tools":48,"install_mode":35,"entrypoint":19,"risk_profile":49,"dependencies":51,"content_hash":29,"verification":56,"inferred":59},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":50,"uses_absolute_paths":28,"network_access":28},[],{"npm":52,"pip":53,"brew":54,"system":55},[40],[],[],[],{"commands":57,"expected_files":58},[],[19],true,{"target":33,"score":61,"status":62,"policy":63,"why":64,"asset_kind":30,"install_mode":35},98,"native","allow",[65,66,67,68,69,70,71],"target_tools includes codex","asset_kind skill","install_mode single","markdown-only","policy allow","safe markdown-only Codex install","trust established",{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":29,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":75,"review_status":76,"signals":77},"established","hash_only",[],"unreviewed",[78,79,80],"author has published assets","content hash available","no dangerous capability badges",{"owner_uuid":9,"owner_name":10,"source_url":82,"content_hash":29,"visibility":18,"created_at":83,"updated_at":84},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-5269d467","2026-05-11 12:31:47","2026-05-11 16:27:06",null,[87,139,196,243],{"id":88,"uuid":89,"slug":90,"title":91,"description":92,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":93,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":94,"tags":95,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":97,"asset_kind":30,"target_tools":98,"install_mode":35,"entrypoint":99,"risk_profile":100,"dependencies":102,"verification":107,"agent_metadata":110,"agent_fit":122,"trust":124,"provenance":127,"created_at":129,"updated_at":130,"__relatedScore":131,"__relatedReasons":132,"__sharedTags":137},2252,"c9de68e3-4299-11f1-9bc6-00163e2b0d79","db-browser-sqlite-visual-sqlite-database-editor-c9de68e3","DB Browser for SQLite — Visual SQLite Database Editor","A visual open-source tool for creating, designing, and editing SQLite database files with a spreadsheet-like interface and full SQL support.",54,[],[96],{"id":24,"name":25,"slug":26,"icon":27},"327d0b583e7e2c03bcd070a7b4cf65754d7f2564c48b20a8523d1fa482f921bf",[32,33,34],"DB Browser for SQLite",{"executes_code":28,"modifies_global_config":28,"requires_secrets":101,"uses_absolute_paths":28,"network_access":28},[],{"npm":103,"pip":104,"brew":105,"system":106},[],[],[],[],{"commands":108,"expected_files":109},[],[99],{"asset_kind":30,"target_tools":111,"install_mode":35,"entrypoint":99,"risk_profile":112,"dependencies":114,"content_hash":97,"verification":119},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":113,"uses_absolute_paths":28,"network_access":28},[],{"npm":115,"pip":116,"brew":117,"system":118},[],[],[],[],{"commands":120,"expected_files":121},[],[99],{"target":33,"score":61,"status":62,"policy":63,"why":123,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":97,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":125,"review_status":76,"signals":126},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":128,"content_hash":97,"visibility":18,"created_at":129,"updated_at":130},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fdb-browser-sqlite-visual-sqlite-database-editor-c9de68e3","2026-04-28 08:32:50","2026-05-10 23:30:25",102.61054403424137,[133,134,135,136],"topic-match","same-kind","same-target","same-author",[26,138],"scripts",{"id":140,"uuid":141,"slug":142,"title":143,"description":144,"author_id":145,"author_name":146,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":147,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":148,"tags":149,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":151,"asset_kind":30,"target_tools":152,"install_mode":35,"entrypoint":154,"risk_profile":155,"dependencies":157,"verification":162,"agent_metadata":165,"agent_fit":177,"trust":185,"provenance":189,"created_at":191,"updated_at":192,"__relatedScore":193,"__relatedReasons":194,"__sharedTags":195},867,"0d4f9803-33e3-11f1-9bc6-00163e2b0d79","onlook-visual-ai-code-editor-react-apps-0d4f9803","Onlook — Visual AI Code Editor for React Apps","Open-source Figma-like visual editor for building React and Next.js apps with AI. Edit visually and code syncs in real-time. Design branching, team collab, deploy. Apache-2.0, 25,000+ stars.","8a911193-3180-11f1-9bc6-00163e2b0d79","AI Open Source",174,[],[150],{"id":24,"name":25,"slug":26,"icon":27},"f10e74acc63eaea9d1b5f5640bb65128d5e7e64615fcff8660e33b5f53c2bd6f",[153],"cursor","SKILL.md",{"executes_code":28,"modifies_global_config":28,"requires_secrets":156,"uses_absolute_paths":28,"network_access":28},[],{"npm":158,"pip":159,"brew":160,"system":161},[],[],[],[],{"commands":163,"expected_files":164},[],[11],{"asset_kind":30,"target_tools":166,"install_mode":35,"entrypoint":154,"risk_profile":167,"dependencies":169,"content_hash":151,"verification":174},[153],{"executes_code":28,"modifies_global_config":28,"requires_secrets":168,"uses_absolute_paths":28,"network_access":28},[],{"npm":170,"pip":171,"brew":172,"system":173},[],[],[],[],{"commands":175,"expected_files":176},[],[11],{"target":33,"score":178,"status":179,"policy":180,"why":181,"asset_kind":30,"install_mode":35},66,"needs_confirmation","confirm",[182,66,67,68,183,184,71],"target_tools does not include codex","policy confirm","metadata target_tools does not include codex",{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":151,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":186,"review_status":76,"signals":187},[],[188,78,79,80],"asset has usage views",{"owner_uuid":145,"owner_name":146,"source_url":190,"content_hash":151,"visibility":18,"created_at":191,"updated_at":192},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fonlook-visual-ai-code-editor-react-apps-0d4f9803","2026-04-09 15:09:29","2026-05-11 05:49:06",95.36455707302945,[133,134],[26,138],{"id":197,"uuid":198,"slug":199,"title":200,"description":201,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":202,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":203,"tags":204,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":206,"asset_kind":30,"target_tools":207,"install_mode":35,"entrypoint":208,"risk_profile":209,"dependencies":211,"verification":216,"agent_metadata":219,"agent_fit":231,"trust":233,"provenance":236,"created_at":238,"updated_at":239,"__relatedScore":240,"__relatedReasons":241,"__sharedTags":242},2054,"81320931-3fb6-11f1-9bc6-00163e2b0d79","react-admin-frontend-framework-admin-panels-rest-graphql-81320931","React Admin — Frontend Framework for Admin Panels on REST and GraphQL","React Admin is an open-source frontend framework for building admin interfaces and internal tools on top of REST or GraphQL APIs using React and Material Design components.",87,[],[205],{"id":24,"name":25,"slug":26,"icon":27},"17fda7728db5d43ef3ca5b78b95c32d9af47c3ec8a128bcc4f4162a2a061e67b",[32,33,34],"React Admin Overview",{"executes_code":28,"modifies_global_config":28,"requires_secrets":210,"uses_absolute_paths":28,"network_access":28},[],{"npm":212,"pip":213,"brew":214,"system":215},[],[],[],[],{"commands":217,"expected_files":218},[],[208],{"asset_kind":30,"target_tools":220,"install_mode":35,"entrypoint":208,"risk_profile":221,"dependencies":223,"content_hash":206,"verification":228},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":222,"uses_absolute_paths":28,"network_access":28},[],{"npm":224,"pip":225,"brew":226,"system":227},[],[],[],[],{"commands":229,"expected_files":230},[],[208],{"target":33,"score":61,"status":62,"policy":63,"why":232,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":206,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":234,"review_status":76,"signals":235},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":237,"content_hash":206,"visibility":18,"created_at":238,"updated_at":239},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Freact-admin-frontend-framework-admin-panels-rest-graphql-81320931","2026-04-24 16:20:50","2026-05-11 13:45:44",94.91672400822526,[133,134,135,136],[26,138],{"id":244,"uuid":245,"slug":246,"title":247,"description":248,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":249,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":250,"tags":251,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":253,"asset_kind":30,"target_tools":254,"install_mode":35,"entrypoint":255,"risk_profile":256,"dependencies":258,"verification":263,"agent_metadata":266,"agent_fit":278,"trust":280,"provenance":283,"created_at":285,"updated_at":286,"__relatedScore":287,"__relatedReasons":288,"__sharedTags":289},2092,"03d49bf6-403f-11f1-9bc6-00163e2b0d79","beekeeper-studio-modern-sql-editor-database-manager-03d49bf6","Beekeeper Studio — Modern SQL Editor and Database Manager","Beekeeper Studio is a free, open-source SQL editor and database management GUI. It connects to MySQL, PostgreSQL, SQLite, SQL Server, CockroachDB, and more with a clean modern interface.",69,[],[252],{"id":24,"name":25,"slug":26,"icon":27},"b5b677ea9c4ec414d2aa3f554ec56ccbb31330bcabf5ec94945a89e278ac84c8",[32,33,34],"Beekeeper Studio Overview",{"executes_code":28,"modifies_global_config":28,"requires_secrets":257,"uses_absolute_paths":28,"network_access":28},[],{"npm":259,"pip":260,"brew":261,"system":262},[],[],[],[],{"commands":264,"expected_files":265},[],[255],{"asset_kind":30,"target_tools":267,"install_mode":35,"entrypoint":255,"risk_profile":268,"dependencies":270,"content_hash":253,"verification":275},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":269,"uses_absolute_paths":28,"network_access":28},[],{"npm":271,"pip":272,"brew":273,"system":274},[],[],[],[],{"commands":276,"expected_files":277},[],[255],{"target":33,"score":61,"status":62,"policy":63,"why":279,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":253,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":281,"review_status":76,"signals":282},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":284,"content_hash":253,"visibility":18,"created_at":285,"updated_at":286},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fbeekeeper-studio-modern-sql-editor-database-manager-03d49bf6","2026-04-25 08:38:01","2026-05-11 02:19:00",94.76764706002139,[133,134,135,136],[26,138]]