Tiptap - the Best JS Rich Text Editor for Most Projects

In a recent video, I looked at Lexical, another rich text editor that was looking promising. But it wasn't ready for prime time for non-Facebook users. In this video, I take a look at Tiptap, the rich text editor that I think is your best pick at the moment. It is amazing how much work it does for you out of the box. And as far as I can tell, it just works™.
You can check it out here: tiptap.dev/
Or on GitHub: github.com/ueb...
If you know of any other up-and-coming JS text editors let me know!
#vuejs #javascript #tiptap

[@curiousmind1991]

Great radio voice and great content. Thx a bunch for this useful tutorial!

[@user-tk9mt5lh1g]

Great tutorial. I wasn't awareof yjs for realtime collaboration.. Thank you for sharing this. Subscribed

[@anonymousmangalorean]

I just used Tiptap on our project because of your recommendation

[@CODE_IS_EVERYTHING]

I’m glad to hear it. How are you liking it so far?

[@anonymousmangalorean]

@@CODE_IS_EVERYTHING Yes enjoyed working with it. I loved the content property feature which helps you in showing the data stored in DB to reproduce in the frontend

[@JM-st1le]

This is quite an underated channel

[@CODE_IS_EVERYTHING]

Hey thanks, I appreciate it! I’ve been busy with another project so I have neglected the channel. Any types of videos you’d like to see?

[@LordofChillers]

@@CODE_IS_EVERYTHING You have a very pleasant narrative voice.
Coding beginner tutorials would be great :)

[@mywork6882]

Boa tarde......esses editores como seu WYSIWYG ou CKeditor tanto ele como outros não funciona copiando a imgem da área de transferência e colando no textarea em navegadores como CHROME e EDGE. Voce saberia alguma configuração no navegador ou n tem jeito?? So funciona com firefox

[@buckhittingalick]

You deserve more views and subscribers

[@CODE_IS_EVERYTHING]

Thanks! I haven't been doing myself any favors by not posting any new videos recently. I've got a few in the works that I should have out before long.

[@jared394]

I'm looking for an editor that provides latex support for math/chem formulas. Tiptap seems awesome but I don't see anything in their docs or extensions regarding this functionality. Any suggestions? Thanks!

[@CODE_IS_EVERYTHING]

Hey, this is a late response, so hopefully you already found an answer. But your best bet is probably to create a custom extension for tiptap. I found this blog post which will looks handy: karlomikus.com/blog/create-latex-math-node-and-mark-for-tiptap-2 it runs through creating a custom extension to support latex formulas (using katex).
Thankfully creating extensions for tiptap is pretty straightforward and they have good docs for it. When I was working with slatejs it was way more complex.

[@jared394]

@@CODE_IS_EVERYTHING hey thanks for the reply! Will look into it

[@JH-br4iv]

Good stuff, thanks! Subscribed.

[@user-qg2tr7ln4e]

Is there any way to extend the RUclips function to accept every kind of video, that means videos from other websites too. Thanks in advance

[@satwikagarwal3736]

hey how do i make the collaborative editing work for multiple different documents with different ids ?

[@CarlosEduardoPauluk]

It would be nice to have a component that already delivers all the good tiptap stuffs with an already builded menu for us in Vue 3 ;-)
Do you know a component like that?

[@rezatm235]

I using react and wanna to create a custime rich editor .
Which should i use ? Tiptap or lexical

[@luizhrocha]

Thanks. Helped a lot.

[@AfmpJR]

Tx for sharing!

[@lgok]

Hi there. Thanks for this tiptap overview. Do you know if there are any rich text editor that you can convert to pdf?

[@sumanth3036]

Awesome, thanks a lot.
Which window manager you use, btw?

[@CODE_IS_EVERYTHING]

This one was recorded on a Mac, but these days I’m using GNOME.

[@deansacramone2515]

What about behavior headers for image & document insertion and mentions etc... anything about that? Can you dragdrop an image/document?

[@krish6989]

hey bro Don't know about your issue but i think you are already working on tiptap so can you help me with this issue?
I have created a custom node in in editor and now I want to not to be removed if user tries to remove it with backspace.

[@user-gs4sk1rh5q]

is it priced?

[@user-vw5cj9ws3l]

What is the company and contry name making tiptap editor

[@nguyennam5056]

How hard break in table ??

[@CODE_IS_EVERYTHING]

Hey, I haven’t done a ton with the tables, but when I played around with their extension it seemed to work alright tiptap.dev/api/nodes/table

[@mr.random8447]

Does tiptap prevent XSS, by escaping script tags?

[@franklinmayoyo]

You can sanitize the text using another package like dompurify.

[@margosdesarian]

Is "Bender Rodriguez" your real name?

[@Cruzylife]

Collaborative stuff is pay walled

[@CODE_IS_EVERYTHING]

Yeah it’s a bit of a shame. I get why they are doing it, but now that they are VC funded it looks like commercialization is a big focus.

[@christoffurl7251]

𝐩𝓻Ỗ𝓂Ø𝓈Ｍ ☹️

[@kacperkepinski4990]

pathetic no option for heading etc