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.