Skip to content

Repository files navigation

django-tiptap-editor

CI PyPI Python versions Django versions Docs Coverage Ruff License

A reusable, pip-installable Django package providing a drop-in rich-text editor backed by TipTap (headless ProseMirror): a form Widget, an admin widget, a ModelAdmin mixin, a settings default, and vendored static assets — node-free for consumers.

What this is

A reusable rich-text editor for Django: a form Widget, an admin widget, a ModelAdmin mixin, a settings-driven config, and committed static assets — with a clean, options-object surface and its own config schema.

  • Stored value is HTML by default (render it with |safe); optional JSON storage via TipTapJSONField keeps the canonical ProseMirror doc plus a safe, server-derived HTML mirror.
  • ProseMirror's schema is a sanitizer: scripts and unknown nodes are dropped on parse, and link/image protocols are allowlisted — so |safe is justified.
  • Node-free for consumers: the editor ships as a committed, self-contained bundle. An optional glue-only ESM build lets you bring your own TipTap via CDN / import maps.
  • Extensible without a build step: a runtime registry for custom extensions, toolbar buttons, and layered (CSS-variable) theming.
  • Full toolbar (formatting, font size/family, colour, highlight, lists, alignment, links, images, tables, source view), image upload + library picker, merge tags, and en/sv i18n out of the box.

Installation

pip install django-tiptap-editor

Add the app to INSTALLED_APPS (it ships the static bundle):

INSTALLED_APPS = [
    # ...
    "django_tiptap_editor",
]

Quickstart

from django import forms
from django_tiptap_editor.forms.fields import TipTapFormField

class ArticleForm(forms.Form):
    body = TipTapFormField()

In the admin:

from django.contrib import admin
from django_tiptap_editor.admin.mixin import TipTapModelAdminMixin

@admin.register(Article)
class ArticleAdmin(TipTapModelAdminMixin, admin.ModelAdmin):
    pass  # every TextField (and TipTapJSONField) becomes a TipTap editor

Render the field with {{ form.media }} (or {% tiptap_media %}) in your template, and display the stored HTML with {{ article.body|safe }}. See the documentation for configuration, the upload/image-list contracts, theming, extension authoring, asset modes, and the migration guide.

Documentation

Full documentation is published at artui.github.io/django-tiptap-editor.

License

MIT — see LICENSE.

About

Drop-in TipTap (ProseMirror) rich-text editor widget for Django forms and admin — node-free for consumers.

Resources

Security policy

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages