PHPackages                             marshmallow/nova-tiptap - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. marshmallow/nova-tiptap

ActiveLibrary[Utility & Helpers](/categories/utility)

marshmallow/nova-tiptap
=======================

A Laravel Nova tiptap editor field.

6.0.0(3mo ago)19120.0k↓17.4%72MITVuePHP ^8.1CI failing

Since Jan 4Pushed 2mo ago2 watchersCompare

[ Source](https://github.com/marshmallow-packages/nova-tiptap)[ Packagist](https://packagist.org/packages/marshmallow/nova-tiptap)[ RSS](/packages/marshmallow-nova-tiptap/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (1)Versions (18)Used By (2)Security (1)

[![Version](https://camo.githubusercontent.com/0392563878282f2650d2251c7e44604898a8868ac48dfb237774287fa1d89d86/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d617273686d616c6c6f772f6e6f76612d746970746170)](https://github.com/marshmallow-packages/nova-tiptap)[![Issues](https://camo.githubusercontent.com/21e8840323eb7b2fa4b5f7a397c332f32f9f902a0b8453bdfba37d7819004a8d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6d617273686d616c6c6f772d7061636b616765732f6e6f76612d746970746170)](https://github.com/marshmallow-packages/nova-tiptap)[![Licence](https://camo.githubusercontent.com/6f0404a4066d7bb169d6204ada10190e040f08db501a578aa165bf5a6ad6fab3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d617273686d616c6c6f772d7061636b616765732f6e6f76612d746970746170)](https://github.com/marshmallow-packages/nova-tiptap)

Laravel Nova Tiptap Editor Field
================================

[](#laravel-nova-tiptap-editor-field)

A powerful rich text editor for Laravel Nova built on [TipTap v3](https://tiptap.dev).

[![Nova TipTap Editor](readme-images/editor-v6.png)](readme-images/editor-v6.png)

Warning

When updating from `manogi/nova-tiptap`, replace all instances of `Manogi\Tiptap\Tiptap` with `Marshmallow\Tiptap\Tiptap`.

Important

This is a maintained fork of the [original package](https://github.com/bastihilger/nova-tiptap) with Nova 5 support.

Installation
------------

[](#installation)

```
composer require marshmallow/nova-tiptap
```

Add the use statement to your Nova resource:

```
use Marshmallow\Tiptap\Tiptap;
```

Basic Usage
-----------

[](#basic-usage)

```
Tiptap::make('Content')
```

This provides a simple editor with bold and italic buttons only.

Button Configuration
--------------------

[](#button-configuration)

Create a fully-featured editor by configuring your desired buttons:

```
Tiptap::make('Content')
  ->buttons([
    'heading', 'bold', 'italic', '|', 'link', 'bulletList', 'orderedList',
    // Add more buttons as needed
  ])
```

### Available Buttons

[](#available-buttons)

ButtonDescription`heading`Text headings dropdown (H1, H2, H3, etc.)`headingDropdown`Alias for `heading``listDropdown`Bullet and ordered lists in a dropdown`alignDropdown`Text alignment options in a dropdown`color`Color text formatting`backgroundColor`Background color formatting`bold`Bold text formatting`italic`Italic text formatting`strike`Strikethrough text`underline`Underline text`bulletList`Unordered/bullet list`orderedList`Ordered/numbered list`link`Hyperlinks to URLs or files`code`Inline code formatting`codeBlock`Block code with optional syntax highlighting`blockquote`Block quotes`image`Insert and upload images via modal`imageUpload`Insert a drag & drop upload zone`table`Create and edit tables`tableAlternative`Alternative UI for creating and editing tables. Supports coloring cell's background and border.`textAlign`Text alignment options`rtl`Right-to-left text direction`horizontalRule`Horizontal divider line`hardBreak`Hard line break`history`Undo/redo functionality`editHtml`HTML source code editor`|`Vertical divider in toolbar (special)`br`Line break in toolbar (special)Feature Configuration
---------------------

[](#feature-configuration)

### Headings

[](#headings)

The `heading` button displays a dropdown with heading levels and paragraph option:

```
Tiptap::make('Content')
  ->buttons(['heading'])
  ->headingLevels([2, 3, 4]) // Only allow H2, H3, H4 (default: H1-H3)
```

### Lists

[](#lists)

Use `listDropdown` for a compact dropdown with bullet and ordered list options:

```
Tiptap::make('Content')
  ->buttons(['listDropdown'])
```

Or use separate buttons:

```
Tiptap::make('Content')
  ->buttons(['bulletList', 'orderedList'])
```

### Links

[](#links)

```
Tiptap::make('Content')
  ->buttons(['link'])
  ->linkSettings([
    'withFileUpload' => false, // Disable file upload option (default: true)
  ])
  ->fileSettings([
    'disk' => 'public', // Storage disk to use (default: 'public')
    'path' => 'links',  // Path within disk (default: root folder)
  ])
```

### Images

[](#images)

```
Tiptap::make('Content')
  ->buttons(['image'])
  ->imageSettings([
    'disk' => 'public',     // Storage disk to use
    'path' => 'uploads/images', // Path within disk
    'withFileUpload' => true,   // Allow file uploads (default: true)
  ])
```

#### Drag & Drop Upload

[](#drag--drop-upload)

Images can be dragged directly into the editor or pasted from the clipboard. They will automatically upload using your `imageSettings` configuration.

#### Image Upload Zone

[](#image-upload-zone)

Use the `imageUpload` button to insert a TipTap-style drop zone in the editor:

```
Tiptap::make('Content')
  ->buttons(['imageUpload', 'image'])
  ->imageSettings([
    'disk' => 'public',
    'path' => 'uploads/images',
  ])
```

### Bubble Menu

[](#bubble-menu)

A floating toolbar appears when text is selected. Configure which buttons appear:

```
Tiptap::make('Content')
  ->bubbleMenuButtons(['bold', 'italic', '|', 'link', 'color'])
```

Available bubble menu buttons: `bold`, `italic`, `strike`, `underline`, `code`, `highlight`, `subscript`, `superscript`, `link`, `color`, `backgroundColor`, `|` (separator)

To disable the bubble menu:

```
Tiptap::make('Content')
  ->withoutBubbleMenu()
```

### Text Alignment

[](#text-alignment)

Use `alignDropdown` for a compact dropdown or `textAlign` for separate buttons:

```
Tiptap::make('Content')
  ->buttons(['alignDropdown']) // Dropdown with all alignment options
  // or
  ->buttons(['textAlign']) // Separate buttons for each alignment
  ->alignments(['left', 'center', 'right', 'justify']) // Available alignments
  ->defaultAlignment('left') // Default text alignment
```

### Color options

[](#color-options)

```
Tiptap::make('Content')
  ->buttons(['color'])
  ->colors(['#f1f1f1']) // Available colors in HEX
```

### Background color options

[](#background-color-options)

```
Tiptap::make('Content')
  ->buttons(['backgroundColor'])
  ->backgroundColors(['#f1f1f1']) // Available background colors in HEX
```

### Table cell background color options

[](#table-cell-background-color-options)

```
Tiptap::make('Content')
  ->buttons(['tableAlternative'])
  ->tableCellBackgroundColors(['#f1f1f1']) // Available table cell background colors in HEX
```

### Table cell border color options

[](#table-cell-border-color-options)

```
Tiptap::make('Content')
  ->buttons(['tableAlternative'])
  ->tableCellBorderColors(['#f1f1f1']) // Available table cell border colors in HEX
```

### RTL Support

[](#rtl-support)

```
Tiptap::make('Content')
  ->buttons(['rtl']) // Adds button to toggle RTL mode
```

### Code Options

[](#code-options)

Two code formatting options are available:

- `code` - Inline code formatting (`text`)
- `codeBlock` - Block code formatting (`text`)

Enable syntax highlighting for code blocks:

```
Tiptap::make('Content')
  ->buttons(['codeBlock'])
  ->syntaxHighlighting()
```

### HTML Editing

[](#html-editing)

```
Tiptap::make('Content')
  ->buttons(['editHtml'])
  ->htmlTheme('night') // Theme for HTML code editor (default: 'material')
```

Available themes are listed on [CodeMirror's theme demo page](https://codemirror.net/demo/theme.html).

### JSON Storage

[](#json-storage)

```
Tiptap::make('Content')
  ->saveAsJson() // Store content as JSON instead of HTML
```

### Empty Content Sanitization

[](#empty-content-sanitization)

By default, when a TipTap editor is empty, it returns an empty paragraph with styling (e.g., ``). If you prefer to get an empty string instead (especially useful for translatable fields), you can enable the sanitization feature:

```
Tiptap::make('Content')
  ->sanitizeEmptyContent() // Return empty string for empty editor content
```

### Image Pruning

[](#image-pruning)

When enabled, this feature automatically removes uploaded images from storage when they are deleted from the TipTap content. Only images with `tt-mode="file"` (uploaded files) will be pruned, not external URLs with `tt-mode="url"`.

#### Enable Globally

[](#enable-globally)

First, publish the configuration file:

```
php artisan vendor:publish --tag=nova-tiptap-config
```

Then enable image pruning in `config/nova-tiptap.php`:

```
return [
    'prune_images' => true,
    // ... other config options
];
```

#### Enable Per Field

[](#enable-per-field)

You can also enable image pruning for specific fields:

```
Tiptap::make('Content')
  ->buttons(['image'])
  ->imageSettings([
    'disk' => 'public',
    'path' => 'uploads/images',
  ])
  ->pruneImages() // Enable image pruning for this field
```

#### How It Works

[](#how-it-works)

The system tracks uploaded images by their `tt-mode="file"` attribute. When content is updated:

1. It extracts all uploaded image URLs from the old content
2. It extracts all uploaded image URLs from the new content
3. Images that exist in the old content but not in the new content are deleted from storage
4. External images with `tt-mode="url"` are never deleted

Read-Only Mode
--------------

[](#read-only-mode)

The Tiptap field supports Nova's native readonly functionality. When in readonly mode, the editor will display the content without allowing edits:

```
Tiptap::make('Content')
  ->readonly() // Make the field readonly based on your logic
```

You can also conditionally set the readonly state:

```
Tiptap::make('Content')
  ->readonly(function ($request) {
      return !$request->user()->isAdmin();
  })
```

Index View Visibility
---------------------

[](#index-view-visibility)

Like other rich text fields, this field is hidden from index views. You can display it using a [computed field](https://nova.laravel.com/docs/v5/installation#computed-fields).

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENCE) for more information.

###  Health Score

54

—

FairBetter than 97% of packages

Maintenance85

Actively maintained with recent releases

Popularity44

Moderate usage in the ecosystem

Community20

Small or concentrated contributor base

Maturity55

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 80.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~31 days

Recently: every ~51 days

Total

14

Last Release

97d ago

Major Versions

5.9.0 → 6.0.02026-02-10

### Community

Maintainers

![](https://www.gravatar.com/avatar/be33d2624e24c516e73892b0929447cc762f3622c024ab8d0d2a59042e5d2c7f?d=identicon)[marshmallow](/maintainers/marshmallow)

---

Top Contributors

[![stefvanesch](https://avatars.githubusercontent.com/u/46725619?v=4)](https://github.com/stefvanesch "stefvanesch (42 commits)")[![martynaskre](https://avatars.githubusercontent.com/u/10911957?v=4)](https://github.com/martynaskre "martynaskre (5 commits)")[![justindantzer](https://avatars.githubusercontent.com/u/2125752?v=4)](https://github.com/justindantzer "justindantzer (2 commits)")[![mattreesjenkins](https://avatars.githubusercontent.com/u/1914498?v=4)](https://github.com/mattreesjenkins "mattreesjenkins (2 commits)")[![keroth-](https://avatars.githubusercontent.com/u/6151338?v=4)](https://github.com/keroth- "keroth- (1 commits)")

---

Tags

laraveltiptapeditornovavue

### Embed Badge

![Health badge](/badges/marshmallow-nova-tiptap/health.svg)

```
[![Health](https://phpackages.com/badges/marshmallow-nova-tiptap/health.svg)](https://phpackages.com/packages/marshmallow-nova-tiptap)
```

###  Alternatives

[optimistdigital/nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2872.1M6](/packages/optimistdigital-nova-sortable)[outl1ne/nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2861.8M9](/packages/outl1ne-nova-sortable)[optimistdigital/nova-multiselect-field

A multiple select field for Laravel Nova.

3403.5M7](/packages/optimistdigital-nova-multiselect-field)[advoor/nova-editor-js

A Laravel Nova field bringing EditorJs magic to Nova.

92179.0k3](/packages/advoor-nova-editor-js)[sbine/route-viewer

A Laravel Nova tool to view your registered routes.

57215.9k](/packages/sbine-route-viewer)[murdercode/nova4-tinymce-editor

Boost your Laravel Nova with the TinyMCE editor.

17165.2k](/packages/murdercode-nova4-tinymce-editor)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)