TipTap Editor Integration: JSON-Safe AI Edits
Preserve TipTap’s JSON structure while letting AI update content, headings, and formatting safely.
•1 min read•By Morph Engineering Team
JSON
Native Format
Marks
Inline Styling
Collab
Realtime Safe
Why TipTap Needs a Safe Apply Step
TipTap content is a graph of nodes, marks, and attributes. AI edits should preserve that graph or the editor breaks.
Node‑Safe Updates
Keep node types and attributes intact while changing text or structure.
Mark Integrity
Preserve inline formatting like bold, links, and annotations.
Collaboration Safe
Avoid breaking Yjs/Collab state with malformed JSON edits.
TipTap JSON (Simplified)
{
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Overview" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "Current summary..." }] }
]
}Apply Flow for TipTap
The safest flow is simple: read JSON, apply with Morph, validate, then sync.
Instruction + JSON + Update
<instruction>Add a short summary paragraph under the heading</instruction>
{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Overview"}]}]}Collaboration Safety Checklist
Keep your collaborative editing stable by enforcing these checks after apply.
Post‑Apply Checks
- Validate JSON schema against your TipTap extensions.
- Preserve marks and attributes on existing nodes.
- Run a lightweight editor render before broadcasting.
- Reject or re-run if structural validation fails.
Add AI Editing to TipTap
Use Morph Apply to keep TipTap JSON stable while you ship AI-powered editing.