PHPackages                             grandcreation/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. grandcreation/nova-tiptap

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

grandcreation/nova-tiptap
=========================

A Laravel Nova tiptap editor field.

016CSS

Since Mar 23Pushed 3y agoCompare

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

READMEChangelogDependenciesVersions (1)Used By (0)

[![GitHub](https://camo.githubusercontent.com/850cae521d04f06daa2fd94d848e94bb7e5605ac3594c65b27609fe304e990a5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d616e6f67692f6e6f76612d746970746170)](https://camo.githubusercontent.com/850cae521d04f06daa2fd94d848e94bb7e5605ac3594c65b27609fe304e990a5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d616e6f67692f6e6f76612d746970746170)[![GitHub release (latest by date)](https://camo.githubusercontent.com/8bc5a04cd9a7c9a2f818f4eebe022ad716843a0ba4b06c70adf62d7933706015/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d616e6f67692f6e6f76612d746970746170)](https://camo.githubusercontent.com/8bc5a04cd9a7c9a2f818f4eebe022ad716843a0ba4b06c70adf62d7933706015/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d616e6f67692f6e6f76612d746970746170)

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

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

A Laravel Nova implementation of the [tiptap editor for Vue.js](https://github.com/ueberdosis/tiptap) by [@ueberdosis](https://github.com/ueberdosis).

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

[](#installation)

Install via composer:

**For Nova 4 use this** (it installs Version 3 of nova-tiptap):

```
composer require manogi/nova-tiptap
```

**For Nova 3 use this** (it installs Version 2 of nova-tiptap):

```
composer require manogi/nova-tiptap "^2.8"
```

Usage with default settings:
----------------------------

[](#usage-with-default-settings)

```
Tiptap::make('FieldName')
```

This will give you just the bold and italic buttons.

You will also have to add this `use` statement to the top of the file:

```
use Manogi\Tiptap\Tiptap;
```

Usage with your selection of buttons:
-------------------------------------

[](#usage-with-your-selection-of-buttons)

```
Tiptap::make('FieldName')
  ->buttons([
        'heading',
        '|',
        'italic',
        'bold',
        '|',
        'link',
        'code',
        'strike',
        'underline',
        'highlight',
        '|',
        'bulletList',
        'orderedList',
        'br',
        'codeBlock',
        'blockquote',
        '|',
        'horizontalRule',
        'hardBreak',
        '|',
        'table',
        '|',
        'image',
        '|',
        'textAlign',
        '|',
        'rtl',
        '|',
        'history',
        '|',
        'editHtml',
    ])
    ->headingLevels([2, 3, 4]),
```

`|` and `br`
------------

[](#-and-br)

You can use `|` to define a vertical line between two buttons, and you can use `br` to define a hard break after a button.

Headings and `headingLevels`
----------------------------

[](#headings-and-headinglevels)

When just passing the string `'heading'` you will have H1, H2 and H3 to choose from. You can set the level of headings by using for example `headingLevels([2, 3, 4])` which will give you H2 through H4.

Links and `linkSettings` and `fileSettings`
-------------------------------------------

[](#links-and-linksettings-and-filesettings)

When just passing the string `'link'` you will be able to link text with an URL and define if the link should open in a new window. You will also be able to link text with a file you uploaded to the server. You can optionally use `linkSettings` to define if this file upload should be possible/visible like so:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'link',
  ])
  ->linkSettings([
      'withFileUpload' => false,
  ]),
```

And you can optionally use `fileSettings` to define the **disk** and the **path**:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'link',
  ])
  ->fileSettings([
      'disk' => 'your_custom_disk',
      'path' => 'your/custom/path',
  ]),
```

If no disk is defined here, it assumes `public` if a `public` disk is defined in your `config/filesystems.php`, otherwise it assumes `config('filesystems.default')`.

And if no path is defined here, it assumes the root folder of that disk.

Images and `imageSettings`
--------------------------

[](#images-and-imagesettings)

With the button `'image'` you can let the user add images either from a file upload or from adding a URL. And you can optionally use `imageSettings` to define the **disk** and the **path**:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'image',
  ])
  ->imageSettings([
      'disk' => 'your_custom_disk',
      'path' => 'your/custom/path',
  ]),
```

If no disk is defined here, it assumes `public` if a `public` disk is defined in your `config/filesystems.php`, otherwise it assumes `config('filesystems.default')`.

And if no path is defined here, it assumes the root folder of that disk.

### Disallowing file upload for images

[](#disallowing-file-upload-for-images)

For images you can also disallow the file upload completely with the `withFileUpload` attribute:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'image',
  ])
  ->imageSettings([
      'withFileUpload' => false,
  ]),
```

Text alignment with `textAlign`
-------------------------------

[](#text-alignment-with-textalign)

When adding `textAlign` you get four buttons for aligning text **left**, **right**, **center** and **justify**. The default alignment will be **left**.

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'textAlign',
  ]),
```

If you want to change some of this, you can use the methods `alignments` and `defaultAlignment`:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'textAlign',
  ])
  ->alignments(['right', 'left'])
  ->defaultAlignment('right'),
```

RTL support with `rtl`
----------------------

[](#rtl-support-with-rtl)

When adding `rtl` you get a button for toggling RTL mode for all selected block elements (`dir="rtl"`).

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'rtl',
  ]),
```

The two different "code" buttons
--------------------------------

[](#the-two-different-code-buttons)

`'code'` is inline code (like ``) while `'codeBlock'` will give you ``.

Syntax Highlighting when using `codeBlock`
------------------------------------------

[](#syntax-highlighting-when-using-codeblock)

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'code',
      'codeBlock'
  ])
  ->syntaxHighlighting(),
```

When using `'codeBlock'` you can turn on syntax highlighting by using `syntaxHighlighting()`.

Edit HTML
---------

[](#edit-html)

the `'editHtml'` option will enable the ability to toggle to the tiptap editor to a textarea and manually edit the HTML

### HTML theme when using `editHtml`

[](#html-theme-when-using-edithtml)

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'code',
      'editHtml'
  ])
  ->htmlTheme('night'),
```

When using `'editHtml'` you can set the theme by using using `htmlTheme()`. The default theme used is "material". You can find all the codemirror themes used [here](https://codemirror.net/demo/theme.html) .

Save JSON
---------

[](#save-json)

You can optionally use `saveAsJson` to enable the ability to save the tiptap editor content as JSON in the field

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'code'
  ])
  ->saveAsJson(),
```

Visibility in index view
------------------------

[](#visibility-in-index-view)

Like `Textarea` and `Trix` fields this field is hidden from index views. You can make the content visible by using a [computed field](https://nova.laravel.com/docs/3.0/resources/fields.html#computed-fields).

Screenshots
-----------

[](#screenshots)

The tiptap editor with all the buttons:

[![the tiptap editor with all the buttons](readme-images/all-buttons.png)](readme-images/all-buttons.png)

The idea is that the editor can be themed together with the rest of Nova - here it is looking differently just by using the [Laravel Nova Stripe Theme](https://github.com/jameslkingsley/nova-stripe-theme):

[![the tiptap editor with all the buttons](readme-images/stripe-theme.png)](readme-images/stripe-theme.png)

Licence
-------

[](#licence)

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

###  Health Score

16

—

LowBetter than 5% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity22

Early-stage or recently created project

 Bus Factor1

Top contributor holds 78.7% 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.

### Community

Maintainers

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

---

Top Contributors

[![bastihilger](https://avatars.githubusercontent.com/u/1419634?v=4)](https://github.com/bastihilger "bastihilger (100 commits)")[![OpJePl44tsm4n](https://avatars.githubusercontent.com/u/1597659?v=4)](https://github.com/OpJePl44tsm4n "OpJePl44tsm4n (6 commits)")[![nguyenhoanglong1331](https://avatars.githubusercontent.com/u/6309789?v=4)](https://github.com/nguyenhoanglong1331 "nguyenhoanglong1331 (3 commits)")[![stevelacey](https://avatars.githubusercontent.com/u/289531?v=4)](https://github.com/stevelacey "stevelacey (3 commits)")[![andrerei](https://avatars.githubusercontent.com/u/7910876?v=4)](https://github.com/andrerei "andrerei (2 commits)")[![timothepearce](https://avatars.githubusercontent.com/u/11693661?v=4)](https://github.com/timothepearce "timothepearce (2 commits)")[![tmorian](https://avatars.githubusercontent.com/u/10041902?v=4)](https://github.com/tmorian "tmorian (2 commits)")[![hanspagel](https://avatars.githubusercontent.com/u/1577992?v=4)](https://github.com/hanspagel "hanspagel (1 commits)")[![grevzi](https://avatars.githubusercontent.com/u/16935387?v=4)](https://github.com/grevzi "grevzi (1 commits)")[![ryanmitchell](https://avatars.githubusercontent.com/u/51899?v=4)](https://github.com/ryanmitchell "ryanmitchell (1 commits)")[![shaffe-fr](https://avatars.githubusercontent.com/u/3834222?v=4)](https://github.com/shaffe-fr "shaffe-fr (1 commits)")[![drobee](https://avatars.githubusercontent.com/u/2998645?v=4)](https://github.com/drobee "drobee (1 commits)")[![u12206050](https://avatars.githubusercontent.com/u/6641242?v=4)](https://github.com/u12206050 "u12206050 (1 commits)")[![zweigmbh](https://avatars.githubusercontent.com/u/38290260?v=4)](https://github.com/zweigmbh "zweigmbh (1 commits)")[![ImJustToNy](https://avatars.githubusercontent.com/u/5730766?v=4)](https://github.com/ImJustToNy "ImJustToNy (1 commits)")[![jornn178](https://avatars.githubusercontent.com/u/161015785?v=4)](https://github.com/jornn178 "jornn178 (1 commits)")

### Embed Badge

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

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

PHPackages © 2026

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