Recipe: live preview¶
There is no server-side preview endpoint — render previews on the client from the
onChange callback (available via explicit init).
<textarea id="ed"></textarea>
<div id="preview" class="prose"></div>
<script>
const preview = document.getElementById("preview");
DjangoTipTap.init(document.getElementById("ed"), {
onChange(html) {
preview.innerHTML = html; // editor output is schema-sanitized
},
});
</script>
The editor's output is already constrained by the schema (see Security),
so it is safe to drop into a preview node. For an email-style preview, render html into
an iframe with your email CSS instead of a <div>.
Because onChange is a JS function it can't travel through the data-tiptap-config
attribute used by auto-mount — use init() (Path B) when you need it.