4 ms·
Thanks for posting the new documentation on HN! Co-creator here. tiptap v1 was pretty popular (more than 6M downloads) and an amazing community formed around i
by hanspagel 5y ago
Thanks for posting the new documentation on HN! Co-creator here.
tiptap v1 was pretty popular (more than 6M downloads) and an amazing community formed around it. It’s used in GitLab, Nextcloud, Statamic … and tons of other popular apps. But it was built 3 years ago, coupled to Vue, and had an awful documentation.
We couldn’t help but work on a new version over the last months and basically incorporated all the feedback that came up over the last years. We’ve been in a private beta for 4 months now, with sponsors and regular contributors. Now, we’re in public beta and can’t would like to hear what you think!
Here are a few things you can do with tiptap v2:
- Use with Vanilla JS, React, Vue, Alpine, Svelte …
- Bring your own markup and CSS
- Use Markdown shortcuts
- Render Vue or React components inside the editor content
- Use Vanilla JavaScript to render interactive things inside the editor
- Add collaborative editing capabilities
- Build offline-first apps
- Add autocompletes, for example for @mentions
- Use it with Tailwind CSS
- Automatically fix typographic mistakes (optional, as everything else)
- Add resizable tables
- …
Here are a few links to get started:
- Repository: https://github.com/ueberdosis/tiptap https://github.com/ueberdosis/tiptap
- What’s tiptap/why it’s special: https://blog.ueber.io/post/tiptap-public-beta/ https://blog.ueber.io/post/tiptap-public-beta/
- Discord: https://discord.gg/WtJ49jGshW https://discord.gg/WtJ49jGshW
- wrnr 5y agoWas wondering what makes this different form prosemirror but it looks like it uses it, why would I use this instead? For sure pm is hard at first but once you get the system it's like a new superpower.
- CGamesPlay 5y agoCan I build a Typora-like editing experience? Specifically, I want nodes where the visibility depends on the caret position. This requires mutating the DOM of the editable area in response to cursor movement, which wreaks havoc on a lot of the existing WYSIWYG editors.
- hanspagel 5y agoSure, that’s possible!
- miohtama 5y agoHow Tiptap does HTML cleaning and sanitizing from different browsers? E.g. edit rich text tables in IE and after this editing them in Safari could be broken. This has been an acute pain for all WYSIWYG editors for the last 20 years. Especially ProseMirror shines to solve this problem as it encodes everything to Markdown.
- marijn 5y agoTiptap builds on ProseMirror, so it uses the same approach.
- bhl 5y agoThe default way to persist a ProseMirror doc is JSON. There is a way to serialize that to Markdown via the prosemirror-markdown package, but not every node can be represented as plain text. You can also use html without a non core package since each node has to define a toDOM and parseDOM method.
- j4yav 5y agoA straightforward example showing how to set things up to replace a textarea on a web form would be really nice.