Tiptap: a renderless editor for Vue.js

Hey there,

at Scrumpy we’ve looked for an editor for months. Currently we are using Quill but it’s too limited. A few weeks ago I stumbled across Prosemirror and I really liked it – so thank you for this amazing toolkit! I did not found any Vue package for my use cases so I created one. And here it is: tiptap.

Some special things about tiptap:

  • It’s renderless. You have full control over markup and styling.
  • There is an extension layer for adding nodes, marks and plugins. You can define everything in one file for a specific node or make type (schema, menu commands, key bindings, input rules, etc.)
  • You can render nodes as Vue components
  • There are some special node types available such as todo lists

Any feedback is appreciated :blush:

5 Likes

Looks really good! It’s wonderful to see a project that wraps ProseMirror into a more friendly package.

2 Likes

Second this! Tiptap is ace!

1 Like

This is awesome! I already had to create my own Vue “adaptation” for a project I’m working on and that is in production, but your implementation is oh so much better. I already “stole” your ComponentView idea in order to make nodes render as Vue components, but when I have time to refactor I’ll drop my duct tape implementation and go full Tiptap.

Thank you so much for sharing with the community. And thank you @marijn for this awesome rock solid editor!

This looks amazing! Great idea to render nodes as VueJS. Not sure if I’ll refactor to be on top of tiptap or copy some of the mechanics but either way I think this could clean up some of my click handlers that render UI for different nodes.

Thanks Danita! :raised_hands:

Thanks! Would love to see some contributions! So much to do :sweat_smile:

The public api on that looks so simple and lovely. We’ve been doing a mish-mash of custom js and react and I’m sorely tempted to try moving our schema over to Tiptap even with the node-vue transition required.

Great job! I’ve trying to implement PM into Vue for a week now and now stumbled upon this when I had most things already set up. Anyone got an idea how to implement prosemirror-tables into it?

Hey @mleppik, thanks! I would love to see a pull request for that! :heart:️ Currently you can see at tiptap-extensions how other nodes and marks are registered.

Already working on it! When I get my implementation into my project done I’ll definitely start work on a pull request!

1 Like

great project :slight_smile: I’m currently working out what the best approach might be vv a plugin (“extension”) for alignment. Probably something that listens to the last cursor position and modifies the dom accordingly. I’ve done some initial tests but there’s a lot to consider both vv tiptap and vv its relationship with Prose Mirror. Suggestions welcome (as the desired functionality is to modify existing nodes rather than replace them)

That’s next on my list with tiptap! Block element alignment using floats probably.

I’m actually making good progress at understanding things. Should be actually able to work something out in the next day or two hopefully :slight_smile:

Since many have asked for it: now there is a basic example for adding text alignment for paragraphs on the demo page.

That’s about 1:1 how I solved it. Plus some additional logic to also take tag as an input and set the align attribute

Same here. I spent ages writing my own layer for Vue and this comes out and so much nicer!

Absolutely fantastic work!

did you end up rolling out your own enter command in the end @philippkuehn? That was the only way I could see to implement class inheritance from line to line. Tiptap is great for fairly straight forward use cases but for me, I had too many bespoke things I wanted done. Thus I rolled my own in the end :slight_smile: cool project though!

@philippkuehn There are some problems in tiptap, there is a performance problem with the findWidth function in TableMap.get

https://github.com/scrumpy/tiptap/issues/516

image