[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"workflow-asset-39db1d39":3,"seo:featured-workflow:39db1d39-4cf2-11f1-9bc6-00163e2b0d79:en":85,"workflow-related-asset-39db1d39-39db1d39-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},3002,"39db1d39-4cf2-11f1-9bc6-00163e2b0d79","asset-39db1d39","Craft.js — React Framework for Extensible Drag-and-Drop Page Editors","A React framework for building drag-and-drop page editors where every element on the canvas is a real React component, giving developers full control over the editing experience.","8a911193-3180-11f1-9bc6-00163e2b0d79","AI Open Source","",0,4,"en",[16],{"id":17,"step_order":18,"title":19,"description":11,"prompt_template":20,"variables":11,"depends_on":21,"expected_output":11},3565,1,"Craft.js Overview","# Craft.js — React Framework for Extensible Drag-and-Drop Page Editors\n\n## Quick Use\n```bash\nnpm install @craftjs\u002Fcore\n```\n\n```jsx\nimport { Editor, Frame, Element } from '@craftjs\u002Fcore';\nimport { Text } from '.\u002Fcomponents\u002FText';\n\nfunction App() {\n  return (\n    \u003CEditor resolver={{ Text }}>\n      \u003CFrame>\n        \u003CElement is=\"div\" canvas>\n          \u003CText text=\"Hello World\" \u002F>\n        \u003C\u002FElement>\n      \u003C\u002FFrame>\n    \u003C\u002FEditor>\n  );\n}\n```\n\n## Introduction\nCraft.js is a React framework for building page editors. Unlike opinionated page builders, Craft.js provides the infrastructure for drag-and-drop, node management, and serialization while you supply the actual React components and editor UI. This gives developers complete control over the look, feel, and behavior of the editor.\n\n## What Craft.js Does\n- Provides a React-based node tree that powers drag-and-drop editing on a canvas\n- Lets you use your own React components as the building blocks on the canvas\n- Serializes the editor state to JSON for saving and restoring designs\n- Exposes hooks and connectors for building custom toolbars, sidebars, and settings panels\n- Supports nested containers, component constraints, and rendering rules\n\n## Architecture Overview\nCraft.js maintains an internal node tree that represents the editor state. Each node maps to a React component registered in the resolver. The `Editor` context provides hooks like `useNode` and `useEditor` that give components access to their own node data, selection state, and mutation methods. Drag-and-drop is handled via connectors that you attach to your component DOM elements. The entire state can be serialized to JSON and deserialized to restore a design.\n\n## Self-Hosting & Configuration\n- Install `@craftjs\u002Fcore` and import the `Editor`, `Frame`, and `Element` components\n- Create user components with a static `craft` property defining default props, rules, and related settings\n- Wrap your application in the `Editor` provider with a `resolver` mapping component names to implementations\n- Use `useEditor().actions.serialize()` to export the current design as JSON\n- Load saved designs by passing serialized JSON to the `Frame` component\n\n## Key Features\n- Component-first: every element on the canvas is a real React component with full interactivity\n- Headless UI: bring your own toolbar, sidebar, and settings panel — Craft.js handles state and drag-drop\n- Serialization: the entire editor state round-trips through JSON for persistence and collaboration\n- Rules engine: define which components can be dragged where and set constraints per component\n- Hooks API: `useNode()` and `useEditor()` hooks give fine-grained access to editor internals\n\n## Comparison with Similar Tools\n- **GrapesJS** — framework-agnostic HTML editor; Craft.js is React-specific and uses real React components\n- **Puck** — React visual editor with server components; Craft.js is lower-level and more customizable\n- **Builder.io SDK** — renders content from a visual editor service; Craft.js is a standalone editor framework\n- **react-grid-layout** — grid-based layout system; Craft.js is a full page editor with nested components\n- **Plate (editor)** — rich text editor framework; Craft.js is for page layout editing, not document editing\n\n## FAQ\n**Q: Can I use Craft.js with Next.js?**\nA: Yes. Craft.js works in any React environment including Next.js. For server-side rendering, you render the serialized design on the server and hydrate on the client.\n\n**Q: How do I persist editor designs?**\nA: Call `useEditor().actions.serialize()` to get a JSON string. Store it in your database. Load it back by passing the JSON to the `Frame` component via the `data` prop.\n\n**Q: Is Craft.js a no-code builder?**\nA: Craft.js is a framework for building no-code or low-code editors. You write code to define the components and editor UI; end users interact with the drag-and-drop interface you create.\n\n**Q: Can end users add custom styles?**\nA: You control what editing capabilities are exposed. You can build style panels using `useNode()` that let users change colors, spacing, typography, or any other prop on your components.\n\n## Sources\n- https:\u002F\u002Fgithub.com\u002Fprevwong\u002Fcraft.js\n- https:\u002F\u002Fcraft.js.org\u002Fdocs\u002Foverview","0",[23],{"id":24,"name":25,"slug":26,"icon":27},12,"Configs","config","⚙️",false,"8c795fb5f50949324c040f9e71a33c75d3719a1ad7d37ba322a4999f6d0d2b61","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],"@craftjs\u002Fcore",[],[],[],{"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-39db1d39","2026-05-11 12:31:06","2026-05-11 16:26:47",null,[87,140,187,234],{"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":128,"created_at":130,"updated_at":131,"__relatedScore":132,"__relatedReasons":133,"__sharedTags":138},2301,"0a6b7ce7-42ff-11f1-9bc6-00163e2b0d79","mithril-js-lightweight-spa-framework-built-routing-xhr-0a6b7ce7","Mithril.js — Lightweight SPA Framework with Built-In Routing and XHR","Mithril.js is a compact JavaScript framework for building single-page applications that includes a virtual DOM engine, client-side router, and XHR utility in under 10 KB gzipped.",101,[],[96],{"id":24,"name":25,"slug":26,"icon":27},"4774250ac7e309ac822298b2e99dfeb11cdef33773f112af180943d4e82fdf29",[32,33,34],"Mithril.js 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},[],[127,78,79,80],"asset has usage views",{"owner_uuid":9,"owner_name":10,"source_url":129,"content_hash":97,"visibility":18,"created_at":130,"updated_at":131},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fmithril-js-lightweight-spa-framework-built-routing-xhr-0a6b7ce7","2026-04-28 20:37:38","2026-05-11 16:37:06",115.01290025764288,[134,135,136,137],"topic-match","same-kind","same-target","same-author",[26,139],"configs",{"id":141,"uuid":142,"slug":143,"title":144,"description":145,"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":146,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":147,"tags":148,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":150,"asset_kind":30,"target_tools":151,"install_mode":35,"entrypoint":152,"risk_profile":153,"dependencies":155,"verification":160,"agent_metadata":163,"agent_fit":175,"trust":177,"provenance":180,"created_at":182,"updated_at":183,"__relatedScore":184,"__relatedReasons":185,"__sharedTags":186},2051,"3a5f82e0-3fb6-11f1-9bc6-00163e2b0d79","koa-expressive-middleware-framework-node-js-3a5f82e0","Koa — Expressive Middleware Framework for Node.js","Koa is a web framework for Node.js designed by the team behind Express. It uses async\u002Fawait natively for cleaner middleware composition and a smaller, more expressive core.",55,[],[149],{"id":24,"name":25,"slug":26,"icon":27},"0a5cced47b6f1c8236c98d5b36b089ea73f53abe3b4c081b714003374277ff70",[32,33,34],"Koa Overview",{"executes_code":28,"modifies_global_config":28,"requires_secrets":154,"uses_absolute_paths":28,"network_access":28},[],{"npm":156,"pip":157,"brew":158,"system":159},[],[],[],[],{"commands":161,"expected_files":162},[],[152],{"asset_kind":30,"target_tools":164,"install_mode":35,"entrypoint":152,"risk_profile":165,"dependencies":167,"content_hash":150,"verification":172},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":166,"uses_absolute_paths":28,"network_access":28},[],{"npm":168,"pip":169,"brew":170,"system":171},[],[],[],[],{"commands":173,"expected_files":174},[],[152],{"target":33,"score":61,"status":62,"policy":63,"why":176,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":150,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":178,"review_status":76,"signals":179},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":181,"content_hash":150,"visibility":18,"created_at":182,"updated_at":183},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fkoa-expressive-middleware-framework-node-js-3a5f82e0","2026-04-24 16:18:52","2026-05-11 09:28:40",102.6222820405093,[134,135,136,137],[26,139],{"id":188,"uuid":189,"slug":190,"title":191,"description":192,"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":193,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":194,"tags":195,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":197,"asset_kind":30,"target_tools":198,"install_mode":35,"entrypoint":199,"risk_profile":200,"dependencies":202,"verification":207,"agent_metadata":210,"agent_fit":222,"trust":224,"provenance":227,"created_at":229,"updated_at":230,"__relatedScore":231,"__relatedReasons":232,"__sharedTags":233},2055,"969f5bfb-3fb6-11f1-9bc6-00163e2b0d79","react-bootstrap-bootstrap-components-rebuilt-react-969f5bfb","React Bootstrap — Bootstrap Components Rebuilt for React","React Bootstrap replaces Bootstrap's jQuery dependency with true React components. Each component is built from scratch as a real React component, giving you full control over form and function.",63,[],[196],{"id":24,"name":25,"slug":26,"icon":27},"2ddd1ec3b3c01d0552fdc7e6aac29aba04cf192508ea51d74f92527fce5f7afb",[32,33,34],"React Bootstrap Overview",{"executes_code":28,"modifies_global_config":28,"requires_secrets":201,"uses_absolute_paths":28,"network_access":28},[],{"npm":203,"pip":204,"brew":205,"system":206},[],[],[],[],{"commands":208,"expected_files":209},[],[199],{"asset_kind":30,"target_tools":211,"install_mode":35,"entrypoint":199,"risk_profile":212,"dependencies":214,"content_hash":197,"verification":219},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":213,"uses_absolute_paths":28,"network_access":28},[],{"npm":215,"pip":216,"brew":217,"system":218},[],[],[],[],{"commands":220,"expected_files":221},[],[199],{"target":33,"score":61,"status":62,"policy":63,"why":223,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":197,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":225,"review_status":76,"signals":226},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":228,"content_hash":197,"visibility":18,"created_at":229,"updated_at":230},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Freact-bootstrap-bootstrap-components-rebuilt-react-969f5bfb","2026-04-24 16:21:26","2026-05-09 10:10:00",100.70926996097583,[134,135,136,137],[26,139],{"id":235,"uuid":236,"slug":237,"title":238,"description":239,"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":240,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":241,"tags":242,"has_voted":28,"visibility":18,"share_token":11,"is_featured":12,"content_hash":244,"asset_kind":30,"target_tools":245,"install_mode":35,"entrypoint":246,"risk_profile":247,"dependencies":249,"verification":254,"agent_metadata":257,"agent_fit":269,"trust":271,"provenance":274,"created_at":276,"updated_at":277,"__relatedScore":278,"__relatedReasons":279,"__sharedTags":280},2205,"6c86c879-41cf-11f1-9bc6-00163e2b0d79","backbone-js-lightweight-mvc-framework-javascript-6c86c879","Backbone.js — Lightweight MVC Framework for JavaScript Applications","A minimal JavaScript framework that provides models with key-value binding, collections, views with declarative event handling, and RESTful JSON sync — giving structure to web applications.",72,[],[243],{"id":24,"name":25,"slug":26,"icon":27},"03be8412059a41d261bd778b91514cccdc38b864924015a294473a0075f0a6b1",[32,33,34],"Backbone.js Overview",{"executes_code":28,"modifies_global_config":28,"requires_secrets":248,"uses_absolute_paths":28,"network_access":28},[],{"npm":250,"pip":251,"brew":252,"system":253},[],[],[],[],{"commands":255,"expected_files":256},[],[246],{"asset_kind":30,"target_tools":258,"install_mode":35,"entrypoint":246,"risk_profile":259,"dependencies":261,"content_hash":244,"verification":266},[32,33,34],{"executes_code":28,"modifies_global_config":28,"requires_secrets":260,"uses_absolute_paths":28,"network_access":28},[],{"npm":262,"pip":263,"brew":264,"system":265},[],[],[],[],{"commands":267,"expected_files":268},[],[246],{"target":33,"score":61,"status":62,"policy":63,"why":270,"asset_kind":30,"install_mode":35},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":28,"asset_signed_hash":244,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":272,"review_status":76,"signals":273},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":275,"content_hash":244,"visibility":18,"created_at":276,"updated_at":277},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fbackbone-js-lightweight-mvc-framework-javascript-6c86c879","2026-04-27 08:24:16","2026-05-11 01:10:18",99.79498429018068,[134,135,136,137],[26,139]]