Weave Code
Filament Tiptap Editor Laravel Package
canyongbs/filament-tiptap-editor
A rich text editor field for Filament built on Tiptap, bringing a modern WYSIWYG editing experience to Laravel admin panels. It offers configurable toolbars, media and image handling, custom extensions, and clean HTML output for your content.
A Tiptap integration for Filament Admin/Forms.
Frequently asked questions about Filament Tiptap Editor
- What is canyongbs/filament-tiptap-editor?
- It is a Composer package that integrates the Tiptap rich text editor into Filament Admin and Filament Forms. It provides a WYSIWYG field you can drop into your form schemas, bringing a modern editing experience to Laravel admin panels. The package focuses on configurable toolbars, image and media handling, custom extensions, and clean HTML output. It is intended for developers building content editing interfaces inside Filament rather than hand-rolling an editor themselves.
- How do I install canyongbs/filament-tiptap-editor with Composer?
- Install it with Composer using composer require canyongbs/filament-tiptap-editor. Because it is a Filament field package, make sure your application already has a compatible Filament installation before pulling it in. After installing, follow the repository README for any required registration or asset publishing steps, since Filament plugins sometimes need to be registered in a panel provider. Always review the README for the version-specific setup instructions that match your Filament major version.
- How do I add the Tiptap editor field to a Filament form?
- You add the package's editor field to the schema of your Filament form, the same way you would add any other field component. The field then renders the Tiptap editor in place of a plain textarea and binds its HTML value to your model attribute. Check the README for the exact class name and namespace to import, as these can change between releases. Once added, the stored value is the editor's HTML output.
- Can I customize the toolbar in the Filament Tiptap editor?
- Yes, the package advertises configurable toolbars, so you can control which formatting controls are exposed to editors. This is useful for locking down content structure in CMS-style panels where you only want headings, bold, lists, and links. The exact configuration API is documented in the repository README. Review the available options there to match the toolbar to your content model.
- Does the editor support image and media uploads?
- Yes, image and media handling is one of the features highlighted by the package. That means you can let authors insert images and media into their content rather than being limited to plain text and basic formatting. The specific upload configuration, storage disk, and validation options should be confirmed against the README for your installed version. If you need custom file handling, check whether the documented options cover your use case before building your own integration.
- Can I register custom Tiptap extensions with this package?
- The package is described as supporting custom extensions, which is one of the main reasons to choose it over a fixed-feature editor. Custom extensions let you add nodes, marks, or behaviour that match your domain, such as embeddable components or specialised blocks. The registration approach is covered in the repository documentation. Test any custom extension carefully, since editor behaviour and HTML serialisation both need to stay consistent.
- What HTML does the editor output and how should I store it?
- The package produces clean HTML output rather than an opaque JSON document, which makes it straightforward to store and render later. A common approach is to keep the value in a text or longText column on your model and let Filament handle the field binding. Because it is HTML, treat the stored value as untrusted markup when rendering it outside the admin panel. If you need structured content instead, confirm whether the package exposes the underlying Tiptap document before committing to an HTML-first schema.
- Which Laravel and Filament versions does canyongbs/filament-tiptap-editor support?
- The supported Laravel and Filament version constraints are defined in the package's composer.json, and the README usually states the recommended pairing. Because Filament has had breaking changes between major versions, check the constraint for the release you intend to install rather than assuming the latest tag fits your app. If you are on an older Filament major version, look for a corresponding older release branch. Running composer require and reading the dependency resolution output is the quickest way to confirm compatibility.
- How do I safely render saved editor content on my Laravel frontend?
- Since the editor stores HTML, you will typically output it unescaped in your Blade templates, which means you must sanitise it first. Use a trusted HTML sanitiser to strip scripts and unsafe attributes before rendering, especially if non-admin users can author content. Alternatively, render through a restricted markup pipeline so the allowed tags match what your toolbar actually exposes. Do not assume that a limited toolbar alone makes the stored HTML safe.
- Is this package actively maintained, and what alternatives should I consider?
- Check the GitHub repository at github.com/canyongbs/filament-tiptap-editor for recent commits, tagged releases, and open issue activity before adopting it, since maintenance status is not something the package description guarantees. Also compare it with Filament's own rich editor field, which is also Tiptap-based in recent versions, and decide whether you need the extra toolbar, media, and extension configuration this package offers. If your requirements are simple, the built-in field may be enough; if you need custom Tiptap extensions, this package is the more targeted choice. Pin a version in composer.json so upstream changes cannot break your admin panel unexpectedly.
Weaver
How can I help you explore Laravel packages today?