DejaVue

In this episode of DejaVue, Alex and Michael are joined by Vanessa Otto, a Senior Engineer at GitLab and previously being the head of Frontend at Zavvy.

After discussing Vanessa's co-host role in the German Working Draft podcast, it all revolves around the headless editor "Tiptap" in the episode. From hearing why Vanessa chose it instead of other editors and her research around editors, Tiptaps integration with Vue and what the "headless" part of the editor adds to it, over to which use cases are ideal for Tiptap. 

And yes, an example repository is included so you can convince yourself of the easiness! Enjoy the episode! 

Chapters

  • (00:00) - Welcome to DejaVue
  • (00:55) - Guest Introduction
  • (04:00) - About the "Working Draft" podcast
  • (09:54) - What is Tiptap?
  • (12:30) - Is Tiptap framework agnostic?
  • (15:38) - The headless part of Tiptap
  • (18:38) - Customization as the biggest benefit?
  • (23:26) - How Tiptap content is serialized and saved
  • (25:25) - Maturity of Tiptap
  • (28:03) - Adding own blocks to Tiptap
  • (32:01) - Tiptap and Vue principles
  • (34:42) - Did the community around Tiptap grew?
  • (36:22) - ProseMirror as the base for Tiptap
  • (38:50) - Tiptap Extensions - Seamless with Vue?
  • (42:48) - Calling Tiptap extensions
  • (46:55) - Call to Action: A fun idea for a Tiptap Project?
  • (47:09) - Meet Vanessa and Alex in Germany this Autumn!
  • (48:22) - Why Vanessa chose Tiptap
  • (51:32) - Wrapping Up!

Links and Resources



Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

Creators & Guests

Host
Alexander Lichter
Web Engineering Consultant • Founder • Nuxt team • Speaker
Host
Michael Thiessen
Full-time Vue educator
Editor
Niki Brandner
Sound Engineer
Guest
Vanessa Otto
Senior Enginner at GitLab and Co-Host of Working Draft

What is DejaVue?

Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.

Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.

Michael Thiessen:

Welcome to DejaVue.

Alexander Lichter:

Your favorite Vue podcast, you just don't know it yet. Or maybe you do. Maybe it's your first episode or you're, like, in since the very first one of the trailer. Nevertheless, I'm here with Michael Thiessen. Michael, how are you doing?

Michael Thiessen:

I'm doing pretty good. And for those of you who don't know who I am, I am a full time Vue educator, so I do content like this and courses and books and all that kind of stuff. Teaching you all about Vue and Nuxt and all that fun stuff. And my co host here is Alex.

Alexander Lichter:

Yes. Hey, everybody. I am a web engineering consultant by day. I'm part of the Nuxt team, so shipping parts of the amazing frameworks, documenting, doing some videos around that, also around Vue, Nuxt, and the JavaScript and TypeScript ecosystem. And yeah, that's more or less everything about it.

Alexander Lichter:

Of course, also doing that wonderful podcast here, Deja View, every week. And we are joined by a wonderful guest. She is a public speaker. She was a front-end lead before at a startup called Zavvy and is now a senior engineer at GitLab. We've seen each other countless times.

Alexander Lichter:

I've been to so many conferences and also will be very soon again. She's also a podcast cohost of one of the most famous German front end podcast called Working Draft. I have the pleasure to announce, Vanessa Böhner. How are you doing, Vanessa?

Vanessa Otto:

Vanessa Otto in the meanwhile.

Alexander Lichter:

Oh, shit. True. Sorry. Damn.

Vanessa Otto:

But it's it's very nice to know that you still remember my old name. So now you also made the bridge, for people who also might wander on the outside. Because I was always a bit like, you know, I I built up this, not that I built up an Internet thingy, but I had some talks online before and where was Vanessa Woehne. And in the meanwhile, I married 2021. And I think when this episode comes out, one day beforehand, we will have our wedding day, the third one now.

Alexander Lichter:

Oh, congrats.

Vanessa Otto:

Thank you. But now it's like when I look for my own talks, it's like, was it Bruno? Was it Otto? And I have some, pages where I have, like, a stack of, hey. You gave these talks at our conferences before, and it started, like, blank again.

Vanessa Otto:

I'm like, where my talks went?

Alexander Lichter:

Yeah. Then we have to start again. So, yeah. First of all, of course, the story, like, in the last three names, the 3 years, could have maybe arranged to change it in my brain, but here we go. Does this still happen often to people like, oh, hey, that use your stuff?

Vanessa Otto:

Vice versa.

Alexander Lichter:

Vice versa, actually.

Vanessa Otto:

Rather rather that people telling me, hey, I actually forget forgot how your name was beforehand. And it was actually my brother who did it the first time, like, after years where that he bought, years after my marriage, that he bought tickets for a concert. And I made a joke. Like, you used my new name. Right?

Vanessa Otto:

He was like, oh, do you still have an old passport or something? Because the tickets are bound to the name. But it's on my ID, like, with the old name. So, yes, my brother did it for you. So Okay.

Alexander Lichter:

That then then it's all good.

Vanessa Otto:

But thank you very much for this very nice introduction and especially both of you for this, podcast and your work in the community. I am very happy that I can now have the chance to really thank you both in the name of the whole community. I think this is very helpful, and I most of the times, it's probably very silent for you because I'm just watching and listening and reading. But I do it every time, and it's very, very resourceful and very helpful.

Alexander Lichter:

Well, thank you. Amazing. Mhmm. Yeah. Thank you so much.

Alexander Lichter:

And also, thanks thanks to to everybody also sharing that with us. Like, we're getting probably, like, only from a small percentage, like, comments like, hey. It's amazing, super cool. So thanks to everybody consuming content, of course, Vanessa also for thanks for coming on, and talk about, an amazing topic today, which is TipTap.

Michael Thiessen:

Yeah. Yes. First, I'd like to to ask you about, the working draft podcast. So I'm not German, so I had no idea about this podcast. Can you explain a little bit about that?

Michael Thiessen:

I was on the the website by the way, I like the website, the way that it's styled. It's really, really clever. And, what is it, over 600 episodes now? That's that's a lot of episodes there.

Vanessa Otto:

I think we recorded 624 last Monday, and 624 turned out to be 62425 at the same time because we accidentally recorded 3 hours.

Michael Thiessen:

So Wow. Yep.

Alexander Lichter:

So we

Vanessa Otto:

split happens. So we split them into 2, which was also very, exciting for me, the topic, because it was about Tailwind CSS version 4 and, actually, also still version 3 and still the whole discussion going on online and our experience with it. Apart from that, it is a web development podcast with a ping pong of topics. We are 5 hosts, so I also don't have to be there, like, on a weekly basis, which is very helpful. But we are different hosts for different topics, and it's a mix of TypeScript, Web Components, the whole frameworks, Vue, React, Quick, etcetera, etcetera.

Vanessa Otto:

And, also, then, one we have one specialist really deep into CSS stuff who then talks about color, things I don't even know how to pronounce and has more knowledge about specificity than anybody else. So I do like the mix. And the thing of the podcast is that we do like to talk. So there is it is rather usual to have one and a half hour episodes and not these 20 minutes. Okay.

Vanessa Otto:

Here are the facts, but it's actually, like, discussing topics as you probably would do it also at work. Probably,

Alexander Lichter:

like, you're

Vanessa Otto:

not good at work. Like, after work. Like Yeah. Probably, like, you're not weird at work.

Alexander Lichter:

Like, after work. Like Yeah. Yeah. But it's it's a really fun atmosphere. I've I've been I've been there for, I think, 2 episodes by now.

Alexander Lichter:

Maybe soon 3. Let's see.

Vanessa Otto:

Yeah. Just just come off 3rd time.

Alexander Lichter:

Yeah. Happy happy happy to join. Actually, it might be

Vanessa Otto:

even how it happens.

Alexander Lichter:

Might be even free with the the 600. This was a bit a there was a bit of a special one with, like, the fishbowl. Everybody could join and discuss. It was a really cool format, and we really enjoyed it. Hope you'll do it again.

Vanessa Otto:

Yes. We will. We are planning it.

Alexander Lichter:

Perfect. So for the 700, 650, 666, we will see. And so you you said your your 5 cohosts, like, how does it work with, picking topics? They, like, just decide, okay. Let's see who's there, who's interested, or, like, free free for all.

Alexander Lichter:

Is there, like, a specific guide on, like, who has to be and when is it, like, rotating?

Vanessa Otto:

So I'm I've been not there, by the way, since 624 episodes. I joined a couple of years ago, and it's but still, the whole team, we know each other pretty well, and it's actually pretty simple. We have an we have an sheet with all of the episodes, and sometimes I preset my name on a specific topic, for example, tailwind. But then in the end, we always record Monday at 7 PM European time. Oh, no.

Vanessa Otto:

8 PM, actually. And, we just check-in on Slack beforehand, like, who wants to go today. And sometimes, there are too many people who wants to join. And then we say, you know, it gets kind of confusing if there are 4 people on the podcast, especially if the voices are still kind of similar. And if you're a new joiner, then to the podcast episode, it might get a bit confusing, and you might want to say your sentences, but you will let the other people talk or the other host talk.

Vanessa Otto:

And then you say after, like, 20 minutes, I want to go back to the topic, like, 30 minutes ago.

Alexander Lichter:

Remember all in the beginning, there was something. Yeah.

Vanessa Otto:

Yeah. So sometimes I also step back and have to listen to the episode afterwards.

Alexander Lichter:

That totally makes sense. Yeah. Yeah. I mean, like, I think panel discussions can be lots of fun, but as you said, like, especially for a podcast and then similar voices, maybe 4 people, maybe plus guests and so on can be can be a bit chaotic for sure.

Vanessa Otto:

Yes. So mostly, most of the times, we are free people.

Alexander Lichter:

Well, it sounds like a nice size. Like, we are here right now as well.

Michael Thiessen:

Yeah. We've been finding that, the the 3 person podcast end up working well because while one person is talking, the other 2 can think about what to to follow-up with, and it's not as much of a burden on each individual person. So it's kind of nice in that way.

Alexander Lichter:

Exactly. Like, I mean, 1 on 1 can also be super interesting, especially if we do, like, a bit of a technical topic, but then it's easier, like, to prepare a few things to, like, also, like, show them the facts, some some things we arranged beforehand. But with interviews, it's always like, there are so many ways a conversation can go. So many topics could go in deeper, and, yeah, then it's a bit nice to think a little longer while the other one is talking, like, right now, and then come up with a super cool question to follow-up with.

Michael Thiessen:

And then you end up with, 3 hour long episodes.

Alexander Lichter:

Exactly. That's that's gonna happen. But then you can split them. That's the nice part. Everything, I think, beyond 2 hours is, are 2 episodes, and then it's fine.

Alexander Lichter:

But especially for for the last two episodes, like, finding a good point to split wasn't that easy, but it's, it was good. And I hope everybody enjoyed the episode with Evan. Looking forward still to read all the comments about that and feedback and what you all think and hope to have him on here with, once again. But back, from from Avenue to Vue. Js and Tiptap.

Alexander Lichter:

So you you brought Vanessa, you brought Tiptap today with us. So maybe to everybody not knowing what Tiptap is, could you briefly explain what is it about?

Vanessa Otto:

Yes. TypTap is an open source rich text editor. It comes with, free part, and it also comes with some pro extensions. And I think the the thing that makes it special, compared to the other rich text editors out there is that it's, the one part is it is very modern, so it fits really nicely in all of the framework ecosystems, but it's also headless. And I would definitely go into more details what that means and where the advantages are.

Vanessa Otto:

But I would also would like to quickly say why I was even interested in TypTap. As you mentioned, in the beginning, I was the head of front end at Sabby, and we were using, Ruby on Rails for the back end. And with that, we were using the tricks editor from Basecamp for the couple of places where we needed a rich text editor. And it was working out of the box, especially in the race environment. But there was a point where we said we would like to extend it with more functionality.

Vanessa Otto:

We were also looking in ways in style it more in in in the system of our website and our product, but that was not actually the first must have and requirement that we were actually trying to check. But it was to extend a rich text editor with own functionality. For example, we were using it for an onboarding tool, and we had learning resources, which in the end, let's just call it technically. We had some things like iframes or YouTube players and many many many other things. So what we had to do were kind of to build in the Vue.

Vanessa Otto:

Js front end, to build different blocks and list with list items of, here's a rich text editor with a view state and editable state. And then you can add a block here, and then you have, again, a text block. And block, block, block, block, block, but not in the same editor. So if you think about it, if you, as a user, you want to edit the text here, you really have to click in the right text block to then make text changes, and you cannot drag and drop them around easily, and you cannot make the changes quickly. And we couldn't find a way to do this with tricks.

Vanessa Otto:

So we were looking into other, rich text editors and stumbled luckily over DIPTECH.

Alexander Lichter:

Okay. Sweet. And, I mean, lots of applications need, like, a what you see is what you get or, like, a rich text editor. And you mentioned it is it is quite modern as in, it it can integrate seamless. Is it like framework agnostic?

Vanessa Otto:

Yes.

Alexander Lichter:

Okay. So that means you can, like, you can use it with, with Vue application, of course. But otherwise, you probably wouldn't have chosen it. But But also with, like, I don't know, Solid, Angular, React, Swelt, jQuery, if you want to.

Vanessa Otto:

Yeah. I was wondering for a second if I stumbled over a rich text editor which was not framework agnostic. I'm not sure, but I'm also not that deep in the React world. And I could imagine that at least in the React world, there might be a React only rich text editor, but I'm not so sure. I wanted to mention also that I had a huge Notion table with rich text editors, I checked.

Vanessa Otto:

And I remember summer note, Quill, and and things like that, which are nice in a way that if you need it for yourself on your website, if you need a the quick rich text editor maybe for block or anything. And then, especially, I was checking out editor. Js, tiny MCE, and ck editor, which I just quickly want to mention there that they are they are there as well. I think the editor. Js, I quickly sorted out because I wasn't too sure about the roadmap that they were having because they were also kind of modern.

Vanessa Otto:

But TipTip, at this moment, just looked a bit more stable. It was still it was still at the time when I was, applying it to our production code base, it was still in better mode, not even a release candidate. So it was still very early on.

Alexander Lichter:

Yeah.

Vanessa Otto:

Yes. But I still want to mention that there's all also tiny MCE and CK editor, which support a lot of functionality. But for us, it was really like the modern documentation also of TypTap and this headless thing and the modularity. And I also checked that, for example, Storyblock and also GitLab, were using Tiplab, and this was like, okay. That might still be in better mode.

Vanessa Otto:

But if those companies already say, okay. We have interest in this editor, then it might also be, like, a confidence boost that it might be also a thing for us. And TipTIP itself is built in, JavaScript and TypeScript. So, also, the all of the examples on their website are written in plain JavaScript, and then they have their guides and starter kits and templates for if you want to use it with React and Vue and Svelte, maybe they have even more by now. But, not not only even the examples, but they also have some specific NPM packages, for example, for view 2 and view 3.

Vanessa Otto:

Then you have a bit of a syntax helper, for example, like a composable or a new editor that you can use directly in your view component without having to write something like a document query selector for this editor, but you can I think, yeah, I think it's actually a composable called use editor, which you can call, and then you have your editor instance?

Michael Thiessen:

You had mentioned that this is a headless product. How does that work? Because in my mind, if I'm just thinking about, like, a rich text editor, it seems like there's a lot of UI heavy stuff going on with with the rest text editor, like all the different buttons and, like, rendering the things to the page and, like, if you've got blocks or different styling and all that sort of stuff. So how does Tiptap handle this headless thing?

Vanessa Otto:

The easy way is it doesn't. This is this is your job as a front end developer.

Michael Thiessen:

Okay.

Vanessa Otto:

And this is so so on the one hand, it is a real advantage if you need this. And, obviously, it could be a big disadvantage if you actually don't want to care about it, which is why I mentioned, there might be some more fitting rich text editors like even this summer note and tricks, which comes completely pre styled. Right. Headless. If anybody out here right now listening and you have a phone, you can also go to the TipTap documentation.

Vanessa Otto:

And if you check the documentation for their examples of how to add some menus and with the menu, I mean this floating bubble menu thingy where you highlight text, and then you expect a bar popping up with bold and italic and underline buttons which you can click on. If you go to their examples on tiptap documentation, you actually really have native buttons not floating around with a z, z index, or or overlay. They are really just a list of native buttons which you can click to see the functionality. And the rest is for front end developers to style. I heard from their CEO that they are planning.

Vanessa Otto:

I'm not sure sure if it's even already out because I'm not following all of the news, all of the time. But at least that a lot of people already said, hey. I would actually like to start quicker. Maybe I add my own styles later on, but I would like to need the whole editor in, like, I don't know, 2 weeks or just to try it out or just to build a prototype, which looks a bit better. So at least they had the idea to let it come with a prebuilt UI, which should follow, like, the idea of Tailwind CSS that you can apply some some names, and then it comes kind of pre styled.

Vanessa Otto:

And that might be then, part of the pro, account and pro tier.

Michael Thiessen:

Right. And then you get a stepping stone. You can just prototype quickly. And then if you wanna customize further, you can sort of remove those bits and write your own.

Alexander Lichter:

But in the end, as you said, it's it's all about customizability. Like, the the typical problem of, like, okay, use, like, a an existing solution, existing rich text editor, and you some at some point hit a bound you're like, okay, I want to implement something, but it's it's not a trivial, and I think what we've seen a lot also with, like, component libraries going that way from, like, Bootstrap where where, like, okay, you have to find Bootstrap to, like, actually implement custom things versus, okay, look, you can you own all the implementation. It's all up to you, a bit like with Tailwind. We like, we give you all the classes, all the options, so, like, Catalyst UI, where you say, okay. You you you're up to you styling, up to you adding new functionalities, but the base is there and it works well and you can fit it your, I don't know, corporate design, your brand, but also add the features that you need.

Alexander Lichter:

Is that more or less the the biggest benefit of TypTap, you would say?

Vanessa Otto:

It it depends really on what your biggest benefit is for you. The headless and the the part that I can style it myself was important for us and to really have the the complete freedom. Also, with Tricks, you were able with CSS to override some styles, but there were definitely limits. For example, you could stay I I check for the CSS class name. I just hope that it will never change.

Vanessa Otto:

And then I say, okay. Here's a different background color. But the limit was already the icons for bold and italic. I think these were SVG icons, and then it's like you you cannot simply override them. And I'm rather sure that CK editor in tiny MCE have some ways to modify them.

Vanessa Otto:

I don't know what it is. Maybe it is reaching a style sheet down. Maybe it is to set custom properties. But I made a demo project with TipTek for myself first. And the way that it works is you are writing the HTML of the editor wrapper, so a diff container, and you give it a specific, either class or in view, you give it a reference, and then you initialize it with that reference.

Vanessa Otto:

And you can set a class or you will have the automatic class, Typlock, on this editor. And the way I styled it was to go to the scopes dialog of UTS and say, okay. Everything in this editor that is deep inside, I want to style the following way. And for the blocks, which I mentioned beforehand, for example, the menu for the bold and italic actions or a floating menu. If you think of Notion and you type, I think, a slash, and then you have these cool drop down model or drop down overlay thingy.

Vanessa Otto:

Also, this could be just a Vue JS component which you add to your editor wrapper. And there, you can really style it just as a usual new component as you would usually do it without thinking about that it's actually be rendered inside of the editor afterwards.

Alexander Lichter:

Okay. And then you also customize behavior as in, like, I want, another button there that should do different things. Then you can do the same also there as well.

Vanessa Otto:

Exactly. Exactly. And this was actually the biggest advantage for us. So not that we can style everything, but that I have these not only the freedom, but this completely in view component writing style to say, I don't want to have this strikethrough thingy, but I need an AI thingy to say, I I highlight some text and I click on the summarize button. And there is no configuration and say, okay.

Vanessa Otto:

Tip tab, suggest list. Now add this element or I don't know how complicated you can make it be. It is written in in in in your view HTML code. And the way it works then is that you call functions that you are receiving from the editor property. So we have the editor wrapper, and you render your extensions inside, and all of your extensions will receive the editor as a property by default.

Vanessa Otto:

And all of this comes with the NPM packages of view free automatically. So you will just say define props and then no view props, which you will see from the NPM package. You don't need to define them yourself, and they are all type safe. So you can really see which properties are inside and which types they are having. So you have a really nice auto completion.

Vanessa Otto:

If you type editor dot, then you see a 1,000, suggestions what you can do with it. But it's usually something like, when I click on the bold button, which I implemented myself, that has nothing to do with TTIP at this moment. But as soon as I click the button, which I implemented in here, then I call the function editor chain focus, set no to bold, execute, and I'm done.

Alexander Lichter:

Alright. That that also means that the content itself in the editor is not, like, just saved as a string, but it's like it is actually has some kind of, let's say, AST, some kind of like hierarchy. It's not just it's just just like a long string of the content because otherwise you couldn't focus the note and everything. So it's the thoughts behind it were really also, like, how to make sure the content is structured the way that I can edit smart it's like partial things or a whole line or a whole element or whole block?

Vanessa Otto:

Mhmm. Yes. And you wouldn't even get, only a string because you have also, like, full HTML and markdown support. So you can always choose as a as a content output if you would like to have HTML and JSON. There's actually not a big difference between it.

Vanessa Otto:

I think it's rather like how you want to save it in your database.

Alexander Lichter:

Mhmm.

Vanessa Otto:

And there's a third output version. I think it's called y. Js. Not 100% sure, but you might need to have this output if you want to work with collaboration. We are jumping a bit between and it's there's so many features I'm trying to follow follow online.

Vanessa Otto:

So quickly saying, it has a collaboration mode that multiple users can work on the same content at the same time, like on a Google Doc. I know it's super cool. And they even have a feature for, like, busy managers that if you're offline in airplane mode, you can write a comment. And when you're going online again, it would queue again. It would automatically send.

Vanessa Otto:

Super cool. But for that, you need a specific output, I think, for I don't know how it works, but that would be not HTML and not JSON, but a bit more complicated so you can support this collaboration mode.

Alexander Lichter:

Interesting. Tip that's surprising me more and more. Like, you're not even okay. You can customize it. You can add your own blocks.

Alexander Lichter:

You have, like, a collaboration feature even, and then, like, all the pro extensions that you mentioned to even improve it further. That sounds like a a full fledged tool already. And I mean, when you start using it, it wasn't better, so it's not like 5 years old or something. Or maybe it isn't. You're just like power user, but it sounds like it's it's also not it's it's it's quite young as well.

Vanessa Otto:

Yes. But they they followed exactly these problems with, which most of the people had, and I think they did exactly the right decisions. It is still coming with some, maybe, disadvantages if you want to see it like that. So if if I'm just talking about better and release candidate, that has not this is absolutely nothing to do with Tiptap. But every time you use something like this as a developer, it's your own responsibility to know the maintain maintenance you might have to do afterwards.

Vanessa Otto:

For example, there was a teeny tiny bug inside. And because I was, sorry, lazy or something, I'm also actually sorry. I did not fix that in your in in their, code base, but, I just fixed it in my code base to kind of wrap around it. But then they fixed the bug, but it was not a breaking change in that sense. It was just a bug fix, or it was just a minor or even a patched version update.

Vanessa Otto:

But I relied on that bug, actually. So so it broke after a minor even patched up data. Oopsie. But, also, another thing is, you will still have to care about a couple of things you might just expect to work out of the box. And that might be media in the sense of, for example, just to add an image, especially if you work with product managers.

Vanessa Otto:

They will expect from your super cool rich text editor, which you, have advocated for for months that you can simply drag and drop an image inside, but you can't if you don't implement it. And you will have the choice to use, an extensions from FlipTap or to write it themselves. At the moment I started, the whole core was there and working really well, but they did not have these file extension somehow handler, which they have now. So right now, they have something to take care of. Files is really like a whole thing, which you can use over multiple pages or even websites.

Vanessa Otto:

But as I started it, I had to write a functionality to have an input field with type file, which is checking for the file type if it's in JPEG, if it's in PNG, if it's smaller than, I don't know, a 50 megabyte. And then as soon as it's there, it's not saved on a database yet. So I have to write the whole fetch request to save that to a database.

Michael Thiessen:

Right.

Vanessa Otto:

And then to take care about that the editor actually knows what that is. And this is the part where the custom blocks I was mentioning were coming in. So the second biggest advantage of this framework for me of Tiptoe for me is that you can add your own blocks. And with that block, I basically mean something like an HTML element. So in TypTap and in your content, you will have an h one, h two, h three.

Vanessa Otto:

You have unordered list, you have ordered list. But you can create your own block, which you can name however you want it. And for me, it was something like image wrapper. It was not only like an image source, but I needed to specifically then say to which URL this image should link to, specifically in the Rails code base. I think in Rails, it is called something like action attachable I forgot it.

Vanessa Otto:

Attachable action text attachment. A lot of attachables in the name. And, we were using an SG ID. So instead of having an image with a source and all attributes inside, we were rather rather having, like, these action text attachment with an ID. And we were telling in the JavaScript of the extension to TipTap, hey.

Vanessa Otto:

If you see this kind of HTML tag name, then open this extension file, which is a JavaScript or TypeScript file, And you will use this HDID to ask for an image source, and then you will build the HTML for an image source, or an image tag. And the user in the content will see an image. Also, if you make a right click, inspect the element in your HTML, you will see in the content an image tag. But if you will check what the request to save your content at the codebase, at the database is doing it within the fetch request with the translated extension name.

Michael Thiessen:

That's a really neat way of handling the custom code blocks. Cause I I was gonna ask that question because you had said you could save it as HTML to your database. So I was trying to figure out how do these custom blocks fit in? But I mean, the web components, like syntax, that makes a whole lot of sense.

Alexander Lichter:

It it does. It is. It is so it is so seamless.

Vanessa Otto:

So you still have to do the work. At that time, I I was working at a start up. So finally, after 2 days, I had it ready, finally. So that I have an image input field and also a drag drop, handler. And for the drag drop handler, I actually have to thank the community because even if it was not there as a first party extension from TypTap yet, There was a person who was basically mostly alone at that time maintaining something called Awesome Tiptap.

Vanessa Otto:

I think we also here all know Awesome You. And there was a, repository called Awesome Tip Tap. And there was this one example for drag and drop functionalities for images, also videos, also really the handling if you select multiple images and drag drop in the inside. All of this implementation was there for me to basically just copy paste. And there was also another example extension for then resizing because that also does not come out of the box.

Vanessa Otto:

If you move your image in, then you have an image. Nobody said that you can now make it bigger or make it smaller or even mask it out. So that is not coming out of the box. So there, you will have to rely that either has an extension for you, which you can use, the community as an extension, or that you are just very good at coding and can implement it yourself.

Alexander Lichter:

But I guess it's like the the like, both. Like, it's the pro and the con of the whole thing. Like, it's great because it's that flexible and customizable, But the downside is that you have to build yourself. Same with like, I don't know, using a website builder versus DIY framework. Like you can do everything yourself, but you have to do everything yourself.

Vanessa Otto:

I do believe that it actually does fit really great in this Vue. Js system because we are also kind of used to not have all of the functionality out of the box which we might not even need and which then might be hard to override. UTeS itself, it comes with a core, and everything else is modular. If you need a store, you can add pinna. If you need a router, then you can use a drouter.

Vanessa Otto:

And with TypTap, it is very similar. It comes with a core, which is called the starter kit. So the starter kit already includes things like the bold and italic. So, they have notes and marks. Notes are like HTML blocks, something like a headline or a list, everything what is in one block, and they have marks for bold, italic, everything that is kind of like inline styles.

Vanessa Otto:

And already in the starter kit, you will have history. So undo, redo. So try to implement that yourself. That might be hard, but it's there. You have a history, and you have cursors.

Vanessa Otto:

You have the right cursors, so you can focus and select an image, which does have this normal cursor, or you can hover over a text and you have this text cursor. And all of the things that you might expect to actually be there are actually there in the starter kit already. And then they have their modular, own first party extensions. What I really like to use is the placeholder. So if the document is completely empty, you can set your placeholder, and it has so much freedom.

Vanessa Otto:

You can set the text depending really on the state. Like, is it just a new empty line at the end, or is the whole placeholder now appear like an h one. So it starts with an h one page title, and then if you click enter, you will have your usual paragraph style. You can write your own text. You can write your own style.

Vanessa Otto:

So, usually, light gray opacity, 80%. But if you want to make it hot pink, you can make it hot pink. You can define, should this placeholder be always there, or should it only be there if you focus on a new line? And it's actually rather on the simple side of implementing it. You can still do things wrong because it's still code and therefore, per se, already hard, but at least they make it as simple as possible for you to do it.

Alexander Lichter:

Very sweet. So with with all the implementations that you said, you also mentioned awesome Tiptap before in the community. In all the time using Tiptap, did you feel that the community grew around it, that you see more and more community plugins also? Because I think that's also one of the things that, like, is is very important for choosing a framework like like Vue, for example, like the community around it. People being involved with it, contributing, writing their own packages, their own, well, parts of, like, say, marks, their own blocks, and so on and so on.

Vanessa Otto:

What happened in between is they were having their release candidate and the release candidate shipped, so it is a stable version now. And I think in some sometime in between, like, I started Woonsit and using it and afterwards, they've now also been backed by Y Combinator. So that was a huge marketing thing. Yeah. And what I saw really popping up were their own extension, which I really would have loved to have 2 years earlier.

Vanessa Otto:

Like, these image file handling things, but also their own AI extension, which I unfortunately wrote, my custom one beforehand. I would now, right now, just use theirs. From the, community, I currently don't know if there were more popping up because I can't just can't remember which the which had been there in the beginning and which, they are now. I think it's maybe double the size by now. So it's definitely people from the community adding some, but even more their own extension, which was just like air it fed like every 2 weeks, there was a new extension that they prepared for users.

Vanessa Otto:

And what I also still, wanted to mention is that TipTek is built upon ProseMirror, which is also, framework or which is the framework and API for editors, used on websites. But if you try to write your own prose mirror plug in, it's it's not that simple. And I think Tiptap is making it simple. But you can write if you also write your own extension, you will see that you are using the PROS Miro APIs completely under the hood. And you can also you're kind of using the the TipTap core package, you will have also the functions directly to write ProseMirror yourself.

Michael Thiessen:

Yeah. That's really nice that you get that, like, I guess, low level access for lack of a better word. And it feels like as you're describing this to me, like there's they they've handled the extensibility problem really well, which is something that's, that's often challenging with these, libraries and stuff where Yeah. Like you you mentioned at the beginning as you the reason you found tiptap in the first place is libraries can be useful. These tools are useful, but then you need custom behavior or custom styling.

Michael Thiessen:

But this whole headless system and being able to write these plugins extensions, and you have to do a bit more work yourself, but if you do need that custom stuff, like, it's way easier than just trying to, like, hack your way around and, like, override CSS with, you know, importance scattered everywhere and, like, CSS class names changing underneath you and all that stuff?

Vanessa Otto:

Yes. I think trying to explain how our extension looks like is is is a bit complicated because I want to explain it in simple terms because when you see the code, it does look more simple. It's just a bit hard to explain. But I have, the repository with a demo where I added, the custom extension for the AI extension I once wrote. And I think we can link it somewhere in in show notes and post it on all of the social medias, and then you can go through it.

Vanessa Otto:

Because what I also want to say about these extensions, and the seamless integration with you is you have the JavaScript file of your extension. Let's say the image handler. You have your image handler extension. It is a JavaScript, and it will need some functions and constants to be configured. You will set the name, which will be, like, the JSON name or the HTML tag name.

Vanessa Otto:

And you will say what attributes you want to preset or the attributes you might want to expect For an image tag, you might want to expect a width and a height if it is lazy loaded, if you want to preset some styles, etcetera. So you can really write down, I expect the height and width to be there. If they are none, then set these values. If it's lazy loaded, da da da da da da. And you can merge these attributes with the ones you actually want to preset.

Vanessa Otto:

I will have an example for what you might want to preset, later. And then you have a block where you can add your HTML block in Node. So without any framework, you can use JavaScript to create HTML. Like, I don't I don't know the syntax by heart because I never do it. I will always Google it, but you can create the element diff, and then you create an element image, and then you, I think, you can div append, image, and then you have HTML, which is doing stuff.

Vanessa Otto:

So you can write your HTML like that, or you use the Vue node renderer, which comes with the TipTek Vue package, and you write a Vue component. And then you go into your JavaScript file of your extension, and you go to this at node function, and you say view node renderer, this view component, pass on the properties, and done. And then you have your normal view component, which has a node view wrapper because it needs it, and it receives, again, the editor as property. It receives the attributes or the properties, of your of your extension. Like, again, the width and the height and the lazy loadeds are inside of the attributes.

Vanessa Otto:

Everything is reactive. I don't know how it just works. And you can also talk along with your other components and extensions, and it's it's it's really nice.

Alexander Lichter:

Definitely sounds less painful than writing it manually in JavaScript. So every everyone like, I I really encourage everyone who's never written, like, a to do list or something in plain JavaScript, just do it, and then you will all appreciate frameworks like Vue or whatever you're using, probably Vue, for for not doing that with us anymore. But it's it's so nice that, that the TipTap integration with Vue seems to be, like, really rock rock solid and also deep. It's like, okay, we have a, like, a composable. You have the node render to ensure we can render all components in there and they're reactive.

Alexander Lichter:

They can communicate. So it really preserves the the functionality of the frameworks and embraces also the way of writing code. Like with with third party libraries, especially the ones that are framework agnostic in quotes, I I often see, like, the typical problem is, like, data grids, and they all have their one way of of using them. And it's always painful because they're not made for being used with you. And the integration is like, yeah, the basics might work, but as soon as you need complex stuff, it's over.

Alexander Lichter:

It's really horrible. So I'm I'm really, really happy to see, one of the, like, really good integrations with a framework by something that's framework agnostic and also embracing, once again, like, how code and view is written, how it works, and how people would try it out and want to make it work. So that's great.

Vanessa Otto:

And it would work just to say out of fairness, it would work completely the same way with React. You don't have a view node renderer, but you have a React node renderer, and you can write JSX, JSX, whatever you do in React. The only remaining thing that you will have to do is how to call this extension. So, for example, use a user, you drag how to call this extension. So for example, you as a user, you drag, drop your image inside, and I, in the editor, have something which is waiting for a new file of the type image.

Vanessa Otto:

But how do I say now I want to have this as an as my image extension? And what I said earlier is that you have functions that you can call on the editor, like this editor dot chain dot set node to be bold. The chain and execute is usually because you very often want to chain some commands, especially with setting the focus back to the editor. So if you set a note to be bold, then you might have lost your focus on the bold button that you have clicked. And with dot focus, you say set the focus back to the editor again after that bold text now.

Vanessa Otto:

But I cannot say actually a set no to image because there there is not what what do you want? I don't know what you're talking about. So instead, what you can do is to extend the core of Tiptoeck in your code base with more functions. And this is also where TypeScript comes in extremely handy. So you can use the syntax to declare the module, tip tip core, and the and use the interface for the commands, and just extend it.

Vanessa Otto:

So for your custom extensions image, you can register the function set image node. It is a function, and it has the return type of usual commands of Tiptap. And in this said image node function, you can again just tell Tiptap what to do. So, basically, insert the content with the name image tag, and the rest then works out of the box because Tiptap knows how to handle an HTML tag called this image tag. And with TypeScript support, you will then be able to have auto completion.

Vanessa Otto:

When you, again, call editor dot chain, you will receive these adjustments, set image tag, and you will also see if you have some properties that you can add, etcetera, etcetera.

Alexander Lichter:

It's it's really lovely to to also see the TypeScript is embraced there in a way that, okay, even if you define your own extension with own functionalities that, like, it's it's made in the way that you can register it and TypeScript can pick it up, and you still have the not only the convenience, but also the the certainty that things will work or or break if you update your extension. I also noted from from other famous ecosystems. And for example, with Nuxt, it's the same idea. Like, we also try to ensure, like, okay, if you add something on your own, then you get more types of support. And it's a lot of magic behind that to actually make it work.

Alexander Lichter:

So even better that once again, the DX and the focus there to make sure that, well, you have to do most of the things yourself with the editor, but it's easy to make it. And, yeah, it's it's not clunky. It works off the box. TypeScript, is is there. So so so far, that sounds like a lot of thumbs up and a lot of pros to definitely try it out for everybody who hasn't used it yet.

Vanessa Otto:

Yes. And if you want to have it restyled, you can use my demo and just fork it.

Alexander Lichter:

Exactly.

Vanessa Otto:

And then you can see it restyled.

Alexander Lichter:

Perfect.

Michael Thiessen:

As you've been talking and and explaining more and more about tip tap, and I've kind of been glancing at the docs here as we've been going to sort of see what's what's up here. And, you know, I've got those wheels turning and trying to think of what, what kind of little projects can I make with this? And when will I have time to play with this and try it out myself? Cause it seems like there's lots of, lots of great functionality in here. And yeah.

Michael Thiessen:

I mean, I I just wanna, like, try it out now and build my own stuff.

Alexander Lichter:

So any any good ideas? If you have any ideas where you where you think Michael could use TipTap or write it write it in the comments, write to us on Oh, no. On Twitter or X. Give give him some ideas. Maybe for the next live stream, who knows?

Alexander Lichter:

Who knows? And Maybe. And and on that note, if you also wanna see more of TipTap, in together with AI, then Vanessa will, speak at Vue. Js deconf in Bonn in Germany this autumn, in early October. Also for that, we have a 10% discount code, which is deja vu, of course, really fitting.

Alexander Lichter:

Link is also in the description below. So if you wanna see Vanessa, and I might also be there. Her they they would need an MCU or so. Let's see. Maybe giving a talk to

Vanessa Otto:

Every con every conference needs an Alex.

Alexander Lichter:

I'm trying. I'm trying to be there. But also lots of other

Vanessa Otto:

Everybody needs your stickers.

Alexander Lichter:

Oh, yeah. This these are these are limited editions, though. Let's see if I print them for for Germany.

Vanessa Otto:

For the good friends.

Alexander Lichter:

Yeah. Maybe maybe. I I have, like, 5 or 6 left. I also linked to to the stairs if you're not aware of them, in the show notes as well. But, yeah, definitely, make sure to join.

Alexander Lichter:

It will be a lovely conference. Was there 2 years ago already. It's lots of fun and especially if you're around and, make sure to catch up, Talk with us, talk about if you deja vu TipTap and everything comes to your mind. And now that we covered a lot of TipTap, I wonder. So, Vanessa, you you chose TipTap over all the other other editors based on on all the things we talked about now.

Alexander Lichter:

You may you made an amazing Notion page comparing all of them. Maybe you even have it still around. If yes, then we also shared it in the show comparing all of them. Maybe you even have it still around. If yes, then we also shared it in the show notes because it

Michael Thiessen:

could also be yeah. Perfect.

Alexander Lichter:

This could also be super interesting. Just I I've seen it in so many cases, like, these typical, like, big comparisons, and it was for for your use case, for for your product. But still people might be like it might help a lot to just be like, okay. Maybe we choose another editor because we don't need that much flexibility. There's some some more work, and so that might be the Oh, but it is it

Vanessa Otto:

is a very unprofessional comparison table.

Michael Thiessen:

That's that's fine.

Vanessa Otto:

But it was it was the reality because I had to do the research quick. And I pretty much said, okay. These are the 3 big ones, and the one is not even big. It's just new and cool. And, I did my, prototypes with it.

Vanessa Otto:

And then I relatively quickly come to a decision. That was not for a super big company where I would say I do these and these and these, risk evaluations or etcetera. But still, TapTap just was looking so good. And you already I mentioned that you do the spawn where I would specifically also talk about this AI extension. And the one reason we had to use Tiptap and these these custom blocks that we can roll write with it was just the ability to add iframes, YouTubes, Google SharePoints, everything, basically, what you can embed on a website.

Vanessa Otto:

But, also, we always had the idea to add an AI extension. And with that, I actually might like to do a cliffhanger also for Deshaview. If I might can invite myself a second time to talk about it. For sure.

Alexander Lichter:

Of course.

Vanessa Otto:

It would it would be worth a tip tap editor, but then, really, the focus on, the AI extension and everything, what will be also on the server side and tokens and the UX, how to add AI to a editable editor, and prompt injections and prompt engineering, which I like to rather call prompt teching because there is not much engineering actually behind it. It's more trial and error. And the second cliffhanger there I would mention is that I said you can preset some properties Mhmm. On your own extension. And the one I had set for the AI extension was that some parts of my editor content should be client side only.

Vanessa Otto:

Oh. Because I had to render an input field so users can talk to AI, but I don't want to persist that input field on the back end data.

Alexander Lichter:

That's true.

Vanessa Otto:

And you can do that, and I will explain how.

Alexander Lichter:

Lovely.

Michael Thiessen:

Alright. Well, you've you've got me hooked. Yes. For the next episode. Nice.

Alexander Lichter:

So we we will definitely make sure that will happen also in a reasonable time so people don't have to wait too long. But other than that, yeah, I didn't join just VJSD, Confin Von. Vanessa, one last question before we wrap up here is where can people follow you?

Vanessa Otto:

Oh, is there any social media where you cannot follow me? I'm

Alexander Lichter:

TikTok, maybe. I don't know.

Vanessa Otto:

Oh, true. True. I'm a silent listener on TikTok, so I don't accept any friend because I don't know why people are sending me friend because of TikTok. I don't do anything. But you can follow me on Mastodon as vanessa auto.

Vanessa Otto:

You can try to follow me on x, but I'm not very active there anymore. And there, I am Vanston. You can find me on LinkedIn, again, as Fransel or Vanessa Otto. I registered on Blue Sky. I'm not active yet until we finally have more people there.

Vanessa Otto:

I'm also Vanessa Otto over there. You can find my website under vannzl. Io. That is vannsl. Io.

Vanessa Otto:

And there's also should be an email address where you can contact me.

Alexander Lichter:

Perfect. Of course, also all the links to all the socials in the show notes and everywhere. So you can just click on it, but it's still it's still good if you're if you don't, like, if you were typing right now or, like, hit the enter button, and it's perfect. Yep. Vanessa, thank you so much for for coming on Deja View.

Alexander Lichter:

Then last last question, is there anything you want to share that we we didn't cover, anything that's, that we missed out, or any famous last words, so to say, until next episode, of course. Right?

Vanessa Otto:

Yeah. I I would actually say, try it out for yourself. I I know the the team somehow behind TypTap, and I do really like them. So I believe in their good work. So test it out if it might be also a thing for you, and it would definitely make me happy to see more people there because more people means, more extensions also for me in the future.

Alexander Lichter:

Perfect. Yeah. I think we we couldn't end with with better words. So once again, thanks thank you so much for coming on and looking forward to next episode. And for everybody listening right now, check out the older day to day episodes as well.

Alexander Lichter:

We have a little backlog already, and depends on when you listen to that. Check out the next episode with Vanessa if it's already out or the next episode right after this one, which should also be super interesting. So, yeah. Looking forward to all your feedback, comments, and let us all know, what Michael should build his next stream of Tiptap. Thanks, everybody.

Alexander Lichter:

Thank

Vanessa Otto:

thank you, Ju, so much. It was a lot of fun.

Alexander Lichter:

It definitely was. So see you everybody around, and, talk to you soon.

Vanessa Otto:

See you.