Turn a Tiptap document into a database with GolemUI

Jun 26, 2026

GolemUI 🤝 Tiptap

During the past DevBcn conference we met some incredible people, developers, teams, and companies. One of the best things about conferences is, indeed, to make this kind of new connections, share knowledge, and create synergies with the ecosystem.

One of these connections happened when we met Arnau Gómez, AI Engineer at Tiptap and speaker at the conference, who explained to us how Tiptap worked and how cool it could be to integrate GolemUI and Tiptap.

Challenge accepted!

A GolemUI form rendered as a block inside a Tiptap document, surrounded by regular prose — A live, validated GolemUI form living as a block inside a Tiptap document: prose above, prose below, real data in the middle.

A, not that obvious, integration

Let’s be honest, I didn’t know Tiptap. At a first glimpse, it looked like, you know, another Markdown editor, so my first thought was “ok, I can just replace our simple Markdown editor with superpowerful Tiptap’s editor and that’s it”.

But with more than 37K stars on Github I’ve decided to start digging a little bit, do some proper research, and read carefully their 2026 roadmap. I quickly changed my mind, this was big. Their plan, in their own words, is “making Tiptap the document layer around the database”.

What I liked the most is that Tiptap’s mindset is very similar to the one GolemUI is built on. For Tiptap, documents aren’t just UI in the same way that for GolemUI, forms aren’t just UI either. Tiptap works with documents serialized to JSON , which is exactly how GolemUI treats a form, so… what if a form could live in a document?

Turning a Tiptap document into a database with GolemUI

The integration turned out to be smaller than I expected, and that’s the best kind of surprise. We didn’t fork anything or fight the editor. We added a single custom Tiptap node (golemForm, defined in golem-form-node.ts) and a React node view to render it, in GolemFormNodeView.tsx. That’s the whole core.

The trick is what the node carries. To Tiptap, our form is just another block (like a paragraph or an image) except its attributes hold the entire form. Here’s the shape, trimmed down to the idea:

// golem-form-node.ts => a form is just another block
export const GolemForm = Node.create({
  name: 'golemForm',
  group: 'block',
  atom: true,        // a self-contained block, not editable as text
  addAttributes() {
    return {
      formDef: { /* the GolemUI form definition (JSON) */ },
      value:   { /* the data captured from the filled form */ },
      formId:  { /* a stable id, for collaboration later */ },
    };
  },
});

Three attributes, and each one earns its place:

formDef: The GolemUI form definition is the same { "$schema": …, "form": [ … ] } JSON that renders in React, Angular, Vue or Lit. This is the form's blueprint.
value: The data the user typed. As the form is filled, its answers are mirrored straight back onto the node.
formId: A stable id for each form block. We don't need it yet, but it's the hook for collaboration and external storage later.

Now the two halves click together. A Tiptap document already serializes to JSON. A GolemUI form already is JSON. So the form’s blueprint simply rides along as a block attribute, and everything the user types is written back onto that same block. Call editor.getJSON() and you don’t just get prose: you get the prose, the form schemas, and the captured answers, all in one tree you can store, diff in a pull request, or send over the wire.

If there’s one lesson worth passing on to anyone embedding interactive UI inside a Tiptap editor, it’s this: the hard part isn’t rendering the component, it’s making it coexist with the editor.

Typing into a form field must never move the document’s cursor, and the form re-rendering itself must never look like a document edit. The way we keep the peace is to let data flow in one direction only => out of the form, never back in.

The form owns its own state once it’s mounted so we just listen and copy the values onto the node. Avoid any wars over the caret, or re-renders fighting the user’s keystrokes.

Final details

A couple of conveniences on top made the demo feel real, without touching the engine.

There’s a slash command (slash-command.ts), built on Tiptap’s own Suggestion plugin: type / and a little menu of starter forms appears, right where your cursor is. And those starters live in templates.ts, where live a few form definitions like Contact, RSVP and Feedback, each one as a plain GolemUI JSON. No codegen, no builder UI to wire up; inserting a form is just dropping a piece of JSON into a new golemForm node.

A Tiptap slash command generating a GolemUI form between the prose — A Tiptap slash command can generate GolemUI forms between the prose with a contextual menu in place.

Everything else is the node we already described. The slash command and the templates are just sugar, the engine underneath never changes.

What comes next: a form from a sentence

This demo proves the foundation: a form is a block, and the block is data. From here we can grow even more to something we’re most excited about, and it’s already viable: generating forms with natural language, right inside the document.

The pieces exist. GolemUI’s Form Studio already turns a plain description into a real, validated form, and there’s a free, open-source community edition you can run yourself. Underneath sits our MCP server, which doesn’t guess: it validates every generated definition against GolemUI’s own schemas before handing it back. On the other hand, Tiptap’s AI Toolkit, lets you expose custom tools to its AI agent and make it aware of custom nodes like golemForm. Connect both, and the editor’s AI could author a real form from a sentence like “collect attendee name, email, and a 1–5 rating”, validated before it ever lands on the page. How cool is that!

That’s the deepest version of “the document layer around the database”: an agent that treats your forms as first-class, structured data, right there in the prose.

Conclusion

Documents and forms turn out to be the same idea wearing different clothes: UI that’s owned by data, not by a framework. That’s why Tiptap and GolemUI compose so cleanly.

If you’re a Tiptap developer, this means you can drop real, validated, data-bound forms straight into your documents and read the answers back out of the same getJSON() you already use. If you’re a GolemUI developer, your forms just found a new home: a rich-text canvas where they can sit alongside the content that explains them.

We’d love for you to take it apart and tell us what you’d build with it. Play with the live demo, read the source, or get started with GolemUI and Tiptap now.

And a big thank you to Arnau Gómez and the Tiptap team. This whole thing started with a conference hallway conversation. Challenge accepted, and very much to be continued.