[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"workflow-asset-845d14c0":3,"seo:featured-workflow:845d14c0-4cf1-11f1-9bc6-00163e2b0d79:en":85,"workflow-related-asset-845d14c0-845d14c0-4cf1-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},2995,"845d14c0-4cf1-11f1-9bc6-00163e2b0d79","asset-845d14c0","GrapesJS — Open-Source Web Builder Framework","A free and open-source web builder framework for creating HTML templates and landing pages without writing code, featuring a drag-and-drop editor, extensible plugin system, and full API control.","8a910e34-3180-11f1-9bc6-00163e2b0d79","Script Depot","",0,4,"en",[16],{"id":17,"step_order":18,"title":19,"description":11,"prompt_template":20,"variables":11,"depends_on":21,"expected_output":11},3558,1,"GrapesJS Overview","# GrapesJS — Open-Source Web Builder Framework\n\n## Quick Use\n```bash\nnpm install grapesjs\n# or via CDN\n# \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fgrapesjs\u002Fdist\u002Fcss\u002Fgrapes.min.css\">\n# \u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fgrapesjs\">\u003C\u002Fscript>\n```\n\n```javascript\nimport grapesjs from 'grapesjs';\nconst editor = grapesjs.init({\n  container: '#gjs',\n  fromElement: true,\n  storageManager: false,\n});\n```\n\n## Introduction\nGrapesJS is a framework for building drag-and-drop web page editors without depending on a specific back end. It provides a canvas, a layer manager, style manager, and component system that developers can extend to create any type of HTML-based template builder.\n\n## What GrapesJS Does\n- Provides a fully client-side drag-and-drop page builder with live preview\n- Manages HTML structure, CSS styles, and assets through a unified editor API\n- Supports block-based composition where reusable blocks snap into the canvas\n- Stores templates as JSON for persistence in any backend or CMS\n- Offers a plugin architecture for newsletters, forms, and custom component types\n\n## Architecture Overview\nGrapesJS is built around a core editor engine that manages a virtual DOM of components. Each component maps to an HTML element with its own traits, styles, and toolbar actions. The editor exposes modules for Canvas, Panels, Blocks, Layers, Styles, Assets, and Storage, each independently configurable. Plugins hook into these modules via the editor API to extend or replace default behaviors.\n\n## Self-Hosting & Configuration\n- Install via npm or include the UMD bundle directly from a CDN\n- Initialize with `grapesjs.init()` passing a container selector and configuration object\n- Configure `storageManager` to persist designs to a REST endpoint, localStorage, or a custom adapter\n- Load preset plugins like `grapesjs-preset-webpage` or `grapesjs-preset-newsletter` for common use cases\n- Customize the toolbar, panels, and available blocks through the configuration object\n\n## Key Features\n- Framework-agnostic: works with any backend (Node, Python, PHP, or static hosting)\n- Built-in responsive design mode with device switching\n- Layer manager for visual DOM tree navigation and reordering\n- Style manager with CSS property editors grouped by category\n- Rich plugin ecosystem covering newsletters, forms, tabs, and custom blocks\n\n## Comparison with Similar Tools\n- **Builder.io** — SaaS-first with an open SDK; GrapesJS is fully self-contained and backend-agnostic\n- **Webflow** — proprietary hosted builder; GrapesJS is open source and embeddable in any app\n- **Craft.js** — React-specific drag-and-drop; GrapesJS is framework-agnostic and works with plain HTML\n- **Puck** — React visual editor with server components support; GrapesJS is broader in scope and more mature\n- **Unlayer** — focused on email editors; GrapesJS covers full web pages and is fully open source\n\n## FAQ\n**Q: Can I use GrapesJS inside a React or Vue app?**\nA: Yes. Wrap the editor initialization in a component lifecycle hook. Community wrappers exist for both React and Vue, though the core library is vanilla JS.\n\n**Q: How do I save and load designs?**\nA: Configure the `storageManager` with a remote endpoint or use `editor.store()` and `editor.load()` to serialize designs as JSON that you persist however you like.\n\n**Q: Does GrapesJS support custom components?**\nA: Yes. You can define custom component types with their own render logic, traits, and toolbar actions using the `editor.DomComponents.addType()` API.\n\n**Q: Is GrapesJS production-ready?**\nA: It is used in production by multiple companies for landing page builders, email editors, and CMS interfaces. The project is actively maintained and has a large community.\n\n## Sources\n- https:\u002F\u002Fgithub.com\u002FGrapesJS\u002Fgrapesjs\n- https:\u002F\u002Fgrapesjs.com\u002Fdocs\u002F","0",[23],{"id":24,"name":25,"slug":26,"icon":27},11,"Scripts","script","📜",false,"f3688ac871b447786443d9d478225cc3c4b090f1752983f8425c3dad56a272cb","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],"grapesjs",[],[],[],{"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-845d14c0","2026-05-11 12:26:01","2026-05-11 16:38:40",null,[87,139,186,233],{"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},1800,"9aa0175b-3c2d-11f1-9bc6-00163e2b0d79","cachet-open-source-self-hosted-status-page-system-9aa0175b","Cachet — Open Source Self-Hosted Status Page System","Cachet is a self-hosted status page application that helps teams communicate service availability and incidents to users through a clean web dashboard.",58,[],[96],{"id":24,"name":25,"slug":26,"icon":27},"d2f961e48ce292f25869e455b270e85c308426aa45604d3369d2f6dd41fcae0b",[32,33,34],"Cachet Overview",{"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\u002Fcachet-open-source-self-hosted-status-page-system-9aa0175b","2026-04-20 04:23:19","2026-05-11 11:48:25",102.65627801746322,[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":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":145,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":146,"tags":147,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":149,"asset_kind":30,"target_tools":150,"install_mode":35,"entrypoint":151,"risk_profile":152,"dependencies":154,"verification":159,"agent_metadata":162,"agent_fit":174,"trust":176,"provenance":179,"created_at":181,"updated_at":182,"__relatedScore":183,"__relatedReasons":184,"__sharedTags":185},3001,"1d0a8353-4cf2-11f1-9bc6-00163e2b0d79","asset-1d0a8353","Builder.io — Visual Development SDK for React, Vue and More","An open-source visual development SDK that enables drag-and-drop page building using your own React, Vue, Svelte, or Qwik components, with output as clean code or publishable content.",5,[],[148],{"id":24,"name":25,"slug":26,"icon":27},"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",[32,33,34],"SKILL.md",{"executes_code":28,"modifies_global_config":28,"requires_secrets":153,"uses_absolute_paths":28,"network_access":28},[],{"npm":155,"pip":156,"brew":157,"system":158},[],[],[],[],{"commands":160,"expected_files":161},[],[],{"asset_kind":30,"target_tools":163,"install_mode":35,"entrypoint":151,"risk_profile":164,"dependencies":166,"content_hash":149,"verification":171,"inferred":59},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":165,"uses_absolute_paths":28,"network_access":28},[],{"npm":167,"pip":168,"brew":169,"system":170},[],[],[],[],{"commands":172,"expected_files":173},[],[],{"target":33,"score":61,"status":62,"policy":63,"why":175,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":149,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":177,"review_status":76,"signals":178},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":180,"content_hash":149,"visibility":18,"created_at":181,"updated_at":182},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-1d0a8353","2026-05-11 12:30:17","2026-05-11 16:54:42",102.16722687557547,[133,134,135,136],[26,138],{"id":187,"uuid":188,"slug":189,"title":190,"description":191,"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":192,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":193,"tags":194,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":196,"asset_kind":30,"target_tools":197,"install_mode":35,"entrypoint":198,"risk_profile":199,"dependencies":201,"verification":206,"agent_metadata":209,"agent_fit":221,"trust":223,"provenance":226,"created_at":228,"updated_at":229,"__relatedScore":230,"__relatedReasons":231,"__sharedTags":232},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,[],[195],{"id":24,"name":25,"slug":26,"icon":27},"17fda7728db5d43ef3ca5b78b95c32d9af47c3ec8a128bcc4f4162a2a061e67b",[32,33,34],"React Admin Overview",{"executes_code":28,"modifies_global_config":28,"requires_secrets":200,"uses_absolute_paths":28,"network_access":28},[],{"npm":202,"pip":203,"brew":204,"system":205},[],[],[],[],{"commands":207,"expected_files":208},[],[198],{"asset_kind":30,"target_tools":210,"install_mode":35,"entrypoint":198,"risk_profile":211,"dependencies":213,"content_hash":196,"verification":218},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":212,"uses_absolute_paths":28,"network_access":28},[],{"npm":214,"pip":215,"brew":216,"system":217},[],[],[],[],{"commands":219,"expected_files":220},[],[198],{"target":33,"score":61,"status":62,"policy":63,"why":222,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":196,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":224,"review_status":76,"signals":225},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":227,"content_hash":196,"visibility":18,"created_at":228,"updated_at":229},"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",100.91672400822526,[133,134,135,136],[26,138],{"id":234,"uuid":235,"slug":236,"title":237,"description":238,"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":239,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":240,"tags":241,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":243,"asset_kind":30,"target_tools":244,"install_mode":35,"entrypoint":245,"risk_profile":246,"dependencies":248,"verification":253,"agent_metadata":256,"agent_fit":268,"trust":270,"provenance":273,"created_at":275,"updated_at":276,"__relatedScore":277,"__relatedReasons":278,"__sharedTags":279},2048,"e8839fd3-3fb5-11f1-9bc6-00163e2b0d79","gatsby-react-based-framework-performant-static-sites-e8839fd3","Gatsby — React-Based Framework for Performant Static Sites","Gatsby is a React-based open-source framework for building fast, secure websites and apps. It combines static site generation with dynamic capabilities, pulling data from any source via GraphQL.",67,[],[242],{"id":24,"name":25,"slug":26,"icon":27},"c5c796eb419244994a7c82bcbea515442d0f2f1ac836accac8560957439a1e01",[32,33,34],"Gatsby Overview",{"executes_code":28,"modifies_global_config":28,"requires_secrets":247,"uses_absolute_paths":28,"network_access":28},[],{"npm":249,"pip":250,"brew":251,"system":252},[],[],[],[],{"commands":254,"expected_files":255},[],[245],{"asset_kind":30,"target_tools":257,"install_mode":35,"entrypoint":245,"risk_profile":258,"dependencies":260,"content_hash":243,"verification":265},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":259,"uses_absolute_paths":28,"network_access":28},[],{"npm":261,"pip":262,"brew":263,"system":264},[],[],[],[],{"commands":266,"expected_files":267},[],[245],{"target":33,"score":61,"status":62,"policy":63,"why":269,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":243,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":271,"review_status":76,"signals":272},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":274,"content_hash":243,"visibility":18,"created_at":275,"updated_at":276},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fgatsby-react-based-framework-performant-static-sites-e8839fd3","2026-04-24 16:16:34","2026-05-11 12:45:24",100.74876336905936,[133,134,135,136],[26,138]]