wysiwyg-editor
OfficialBuild production-grade WYSIWYG editors
Software Engineering#content creation#rich text editor#WYSIWYG#Tiptap#HTML rendering#editor component
Authorblink-new
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a robust solution for building rich text editors, ensuring proper markdown-style formatting, instant rendering, and accurate list support, which are often complex to implement correctly.
Core Features & Use Cases
- WYSIWYG Editing: Implement rich text editing experiences for emails, comments, or content creation platforms.
- Markdown-Style Formatting: Supports features like bold, italic, lists, and links.
- Safe HTML Rendering: Safely displays user-generated HTML content using DOMPurify.
- Use Case: Integrate a fully-featured rich text editor into a blog post creation interface, allowing users to format their articles with headings, lists, and links.
Quick Start
Use the wysiwyg-editor skill to create a simple editor component for user comments.
Dependency Matrix
Required Modules
@tiptap/react@tiptap/starter-kit@tiptap/extension-link@tiptap/extension-placeholder@tiptap/pmdompurify
Components
assetsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: wysiwyg-editor Download link: https://github.com/blink-new/claude/archive/main.zip#wysiwyg-editor Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.