wysiwyg-editor

Create WYSIWYG rich text editors with Tiptap v3 and markdown-style formatting.

1|2|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/blink-new/claude --skill wysiwyg-editor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wysiwyg-editor
Source: https://github.com/blink-new/claude/tree/main/skills/wysiwyg-editor
Command: npx skills add https://github.com/blink-new/claude --skill wysiwyg-editor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tiptap/react, @tiptap/starter-kit, @tiptap/extension-link, @tiptap/extension-placeholder, @tiptap/pm, dompurify, and includes assets (resource) and references (resource) components.

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.

Frequently Asked Questions about wysiwyg-editor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a rich text editor in React with Tiptap?▼

To build a rich text editor in React with Tiptap, use this Skill's pre-built components to implement markdown-style formatting, instant rendering, and accurate bullet or numbered list support for your application.

How do I safely render user-generated HTML content in a React editor?▼

To safely render user-generated HTML content in a React editor, this Skill employs DOMPurify to sanitize inputs, ensuring secure HTML rendering within your email composers, comment sections, or content management systems.

Does Tiptap support markdown-style formatting and instant rendering?▼

Yes, Tiptap supports markdown-style formatting and instant rendering. This Skill leverages Tiptap v3 to provide features like bold, italic, lists, and links for content creation platforms.

What is the best way to add a WYSIWYG editor to a comment section?▼

The best way to add a WYSIWYG editor to a comment section is using this Skill's pre-built simple editor component, which facilitates instant rendering and markdown-style formatting out of the box.

Can I use this Tiptap editor component for email composers and CMS platforms?▼

Yes, you can use this Tiptap editor component for email composers and CMS platforms. It provides both simple and full-featured editor configurations to suit different content creation needs.

Why do my bullet and numbered lists not render correctly in my rich text editor?▼

Bullet and numbered lists often fail to render correctly due to improper markdown-style formatting logic. This Skill ensures accurate list support and instant rendering using Tiptap v3.