Svelte Tiptap screenshot

Svelte Tiptap

Author Avatar Theme by Sibiraj s
Updated: 15 Apr 2025
292 Stars

Svelte components for tiptap v2

Categories

Overview

Svelte-tiptap is a package that provides Svelte components for tiptap v2, an editor framework. It allows users to easily integrate tiptap into their Svelte applications and customize the editor according to their needs. This package includes various components and extensions that enhance the functionality of the tiptap editor.

Features

  • Floating menu: A contextual menu that appears near a selection of text, allowing users to apply custom markup and styling.
  • Bubble menu: Another contextual menu that appears near a selection of text, enabling users to apply marks to their text selection.
  • SvelteNodeViewRenderer: This feature enables rendering Svelte components as NodeViews in the tiptap editor. Users can create custom components and easily integrate them into the editor.

Installation

To install the svelte-tiptap package, follow these steps:

  1. Make sure you have tiptap v2 installed in your Svelte project. If not, refer to tiptap’s official documentation for installation instructions.
  2. Install svelte-tiptap using npm:
npm install svelte-tiptap
  1. Import and use the desired components and extensions in your Svelte project.

Summary

Svelte-tiptap provides Svelte components and extensions for tiptap v2, facilitating the integration and customization of the tiptap editor in Svelte applications. With features like floating menu, bubble menu, and SvelteNodeViewRenderer, users can enhance the functionality and appearance of their tiptap editor. Contributions to the package are also welcome.