[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"workflow-asset-39050b9f":3,"seo:featured-workflow:39050b9f-4dfd-11f1-9bc6-00163e2b0d79:fr":85,"workflow-related-asset-39050b9f-39050b9f-4dfd-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},3260,"39050b9f-4dfd-11f1-9bc6-00163e2b0d79","asset-39050b9f","Vditor — In-Browser Markdown Editor with Three Editing Modes","A browser-based markdown editor supporting WYSIWYG rich text, instant rendering (Typora-like), and split-view preview modes in a single component.","8a911193-3180-11f1-9bc6-00163e2b0d79","AI Open Source","",0,2,"en",[16],{"id":17,"step_order":18,"title":19,"description":11,"prompt_template":20,"variables":11,"depends_on":21,"expected_output":11},3823,1,"Vditor","# Vditor — In-Browser Markdown Editor with Three Editing Modes\n\n## Quick Use\n```html\n\u003Clink rel=\"stylesheet\"\n  href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvditor\u002Fdist\u002Findex.css\" \u002F>\n\u003Cdiv id=\"vditor\">\u003C\u002Fdiv>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvditor\u002Fdist\u002Findex.min.js\">\u003C\u002Fscript>\n\u003Cscript>\n  const vditor = new Vditor(\"vditor\", { height: 360, mode: \"ir\" });\n\u003C\u002Fscript>\n```\n\n## Introduction\nVditor is a TypeScript markdown editor that runs entirely in the browser. It stands out by offering three editing modes in one component: classic split-view, WYSIWYG rich text, and instant rendering that shows formatted output inline as you type, similar to Typora.\n\n## What Vditor Does\n- Provides three editing modes switchable at runtime: WYSIWYG, instant rendering, and split-view\n- Renders CommonMark, GFM, and extensions like math (KaTeX), Mermaid diagrams, and flowcharts\n- Supports file upload (images, audio, video) with drag-and-drop and paste\n- Offers full toolbar customization with built-in and custom actions\n- Exports content as markdown, HTML, or PDF\n\n## Architecture Overview\nVditor uses the Lute engine (written in Go, compiled to WebAssembly) for markdown parsing and rendering. The editor manages three separate editing surfaces that share the same underlying document state. In WYSIWYG mode it uses contenteditable with custom input handling. In instant-rendering mode it performs incremental parsing and inline formatting. The split-view mode pairs a plain textarea with a live HTML preview pane.\n\n## Self-Hosting & Configuration\n- Include via CDN or install with npm: `npm install vditor`\n- Initialize with `new Vditor(elementId, options)` passing configuration for mode, toolbar, and theme\n- Configure upload endpoints for image and file attachment handling\n- Set language locale (20+ languages supported) via the `lang` option\n- Customize the toolbar array to add, remove, or reorder editor actions\n\n## Key Features\n- Lute-powered markdown parser compiled to WASM for fast in-browser parsing\n- Math formula rendering via KaTeX and diagram support via Mermaid and Graphviz\n- Built-in code syntax highlighting with language auto-detection\n- Outline, word count, and table of contents generation\n- Content security via XSS sanitization of rendered HTML\n\n## Comparison with Similar Tools\n- **Milkdown** — ProseMirror-based and headless; Vditor is a batteries-included drop-in component\n- **Tiptap** — rich-text focused with extensions; Vditor is markdown-native with three rendering modes\n- **Editor.js** — block-based editor; Vditor uses traditional document-based markdown editing\n- **Typora** — desktop app with instant rendering; Vditor brings the same experience to the browser\n\n## FAQ\n**Q: Can I use Vditor with React or Vue?**\nA: Yes. Community wrappers exist for React and Vue, or you can initialize it in a useEffect\u002FonMounted hook.\n\n**Q: Does it support collaborative editing?**\nA: Vditor does not have built-in collaboration. You would need to layer a CRDT library on top.\n\n**Q: How large is the bundle?**\nA: The full bundle including WASM parser is approximately 3MB. CSS and JS can be loaded from a CDN.\n\n**Q: Can I extend the toolbar?**\nA: Yes. Pass custom toolbar items with icons and click handlers in the configuration options.\n\n## Sources\n- https:\u002F\u002Fgithub.com\u002FVanessa219\u002Fvditor\n- https:\u002F\u002Fb3log.org\u002Fvditor\u002F","0",[23],{"id":24,"name":25,"slug":26,"icon":27},12,"Configs","config","⚙️",false,"dfc4ec6f7e8355430c6185ce372fac5a74f451e4c973bc7fafd6d32ba63dd686","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],"vditor",[],[],[],{"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-39050b9f","2026-05-12 20:22:20","2026-05-12 23:33:31",null,[87,139,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":127,"created_at":129,"updated_at":130,"__relatedScore":131,"__relatedReasons":132,"__sharedTags":137},2604,"ae682a86-4771-11f1-9bc6-00163e2b0d79","asset-ae682a86","Zettlr — Open-Source Markdown Editor for Academic Writing","Zettlr is a cross-platform Markdown editor designed for researchers and writers, combining distraction-free writing with citation management, Zettelkasten note-linking, and academic export via Pandoc.",92,[],[96],{"id":24,"name":25,"slug":26,"icon":27},"63bf52ea170341d7b35420ffc4c6e07bdfad6461a9668482e4ce883dd5e69357",[32,33,34],"Zettlr Markdown Editor",{"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\u002Fasset-ae682a86","2026-05-04 12:28:20","2026-05-12 18:43:57",102.9527244228309,[133,134,135,136],"topic-match","same-kind","same-target","same-author",[26,138],"configs",{"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":180,"created_at":182,"updated_at":183,"__relatedScore":184,"__relatedReasons":185,"__sharedTags":186},2644,"6d9aa1d3-47d7-11f1-9bc6-00163e2b0d79","asset-6d9aa1d3","Marp — Create Presentation Slides from Markdown","A Markdown-based presentation ecosystem with a CLI, VS Code extension, and browser-based engine that converts Markdown files into HTML, PDF, and PowerPoint slide decks.",106,[],[148],{"id":24,"name":25,"slug":26,"icon":27},"24bd181037b593f6fb91d5bcab417a98608acb172c709415086063755762cf67",[32,33,34],"Marp Overview",{"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},[],[151],{"asset_kind":30,"target_tools":163,"install_mode":35,"entrypoint":151,"risk_profile":164,"dependencies":166,"content_hash":149,"verification":171},[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},[],[151],{"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},[],[179,78,79,80],"asset has usage views",{"owner_uuid":9,"owner_name":10,"source_url":181,"content_hash":149,"visibility":18,"created_at":182,"updated_at":183},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-6d9aa1d3","2026-05-05 00:36:40","2026-05-12 20:36:08",95.04407566652782,[133,134,135,136],[26,138],{"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},1105,"90331916-3649-11f1-9bc6-00163e2b0d79","mermaid-generate-diagrams-text-like-markdown-90331916","Mermaid — Generate Diagrams from Text Like Markdown","Mermaid is a JavaScript-based diagramming tool that renders Markdown-inspired text definitions to create diagrams and visualizations. Flowcharts, sequence diagrams, Gantt charts, class diagrams, ER diagrams, and more — all from plain text. Natively supported in GitHub Markdown.",89,[],[196],{"id":24,"name":25,"slug":26,"icon":27},"b95b730e9fd9b769b9e0d4aafb0babb4124296d60d05dc3951d95f66861fc822",[32,33,34],"SKILL.md",{"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},[],[11],{"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},[],[11],{"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\u002Fmermaid-generate-diagrams-text-like-markdown-90331916","2026-04-12 16:28:20","2026-05-12 21:46:16",91.93136376415899,[133,134,135,136],[26,138],{"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},2642,"3af2cf7a-47d7-11f1-9bc6-00163e2b0d79","asset-3af2cf7a","Markmap — Turn Markdown into Interactive Mindmaps","A JavaScript library and CLI that transforms Markdown documents into interactive, zoomable mindmap visualizations rendered as SVG in the browser.",78,[],[243],{"id":24,"name":25,"slug":26,"icon":27},"cc9bf1831317ed571283b0b1514d83469ad8aff14e54417927726bfb7f9818dc",[32,33,34],"Markmap 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\u002Fasset-3af2cf7a","2026-05-05 00:35:15","2026-05-12 23:18:35",91.84644063693567,[133,134,135,136],[26,138]]