Hey, Welcome to React Round Up, the podcast where we keep you updated on all things React related. This show is produced by Top and Doves and Void. Top and Dows is very great Top and Devs, get top and pay and recognition.
We're working on interesting.
Problems and making meaningful community contributions. An Void, which provides the most client friendly model for software outsourcing. Clients can hire voids designers and engineers and they only pay after the tasks are delivered and approved. In today's episode, we will talk about an AI powered What you see is
which you get editor. Basically, like if you're familiar with Notion, if you have used Notion at all any time in your life, then you know that you have this very visual way of editing your content and interacting with it. And there is a library that basically allows you to have the functionalities that Notion has in their editor. And this is what we're going to be talking about in
this episode. My name is Lucas Paganini, your host in a podcast, and joining me in today's episode are the also hosts Chris.
Ruan, Hello everybody, Peter.
Osa, Hi everyone, and our very special guest Kobe Fayok, which is the director of developer experience engineering and claudinary and also a content creator.
Hey everybody, how's it going. I'm excited to be here.
Thank you for taking the time. Kobe, I'm very excited as well. I think this is an interesting topic. And I, for one, it's weird right when we are this, when we are developers, instead of us thinking like, we have this problem, so for this problem, going to use this library. Sometimes we get so excited about a library that we think, how can I figure out a problem so that I can use that library. That's almost like what I'm feeling
right now. I thought this was a really interesting library, so eager to learn more about it?
Yeah, ready to dig in?
All right?
So I tried to give a very quick pitch about the library, but you have actually used it, so how would you describe it?
Yeah?
So it's ultimately a React library, a component library that's intended to be able to give you, Like you said, the drop in Busywig editor. That's kind of like Notion style, where you have your commands, you have where you can kind of click onto a word and edit it inline.
Basically a similar experience that you'd get inside a Notion, only you can drop it inside your own application, which is pretty compelling because editors can be vastly complicated depending on what you're trying to do, and being able to give as good of a UX as you can is critical.
Cool, all right, let's talk a bit about also environments in which we can run it. Is this a React specific library or is it framework agnostic?
And we can use it on other frameworks as well?
Yeah, so unless they've made updates, it is React specific. But the particular example that I was playing around with was in Astro, which can use React, but it should be able to be used in any kind of React environment. Astro specifically is just an awesome tool that I've been trying to spend more and more time with. And you know, one of the things that's nice about it is you can use most of the popular framework or UI libraries with it, So whether it's React, you spell it, or whatever,
you can use it. So that gives you an opportunity to use a tool like Novel, which is only available to React still within the Astro environment.
Understood, understood, Okay, let's understand a little bit more about what can you do and what can't it do? We can I think we can assume that most people listening to us are at least somewhat familiar with Notion, have used it at least once in their lives. So I think we can safely assume that from that perspective, comparing to the functionalities that the Notion editor exposes, what can we expect from this library.
Sure, and I won't say that I know one to one of what the feature lists are. I've used Notion, but I'm not a heavy Notion user. But generally speaking, you know from the basics, it's being able to use the command format in order to create an H one tag. So what that would be is by first specifying the forward slash key, and then you can continue typing out whatever kind of autocomplete feature that you want. So maybe
I want to add an H one. Maybe in H two, I can select that particular format and then I'll continue writing it out as such, where alternatively I can write that as marked down. So maybe I'll do the one hashtag symbol in space and it'll turn it into an H one for me. Similarly, there's a lot of other features in it. You can add lists, you can add images,
and all those YouTube embeds. It gives you a bunch of those similar commands so that you have a similar experience with the a very interactive, UI rich way to
write your content. But one of the things that is really interesting with it, and I think Notion has this as well, is it does have the built in AI feature, which is kind of what makes a novel itself compelling, where it has the ability to reach out to an AI service which we can get into to perform things like autocomplete or maybe just simply asking questions with AI.
Okay, talking specifically about the AI functionalities, how does that integration work? Because we don't have yet a very easy and straightforward, like web standard way of running AI locally. I think we're going to get there eventually, but stoodn't. So I imagine that you would have to connect your keys to open AI or maybe like send a request to a back end.
How how does that work?
Yeah, so it's it. It works with really any kind of AI service that you want. So you would make a request to the AI service through like a hook kind of capability. So once you try to write in whatever the prompt is through the through the slash command or through the ask AI, you essentially the route that I kind of took in my tutorials, I created an endpoint in order to take that API request, where then I crafted the prompt to whatever I wanted that to be.
At that point, you can kind of customize it to your liking. I think they have some examples in there for just kind of like a standard way too that they implemented their autocomplete. But that gives you the opportunity to really kind of do whatever you want with the
AI command and then use whatever service you want. Where Opening ai is probably one of the most mainstream services to use in that regard, but given it is so open and you can create your own endpoint, you can probably use whatever service you want with it, or you know, your own models if you want.
Gotcha.
Okay, assuming that I just want to use one of those ready made providers, wouldn't it be a safety concern because it'd be exposing the keys in the front end, right, So I guess even in that sense, even if I were to use open ai, it would probably be safer if I were to add a back end endpoint so that I don't expose the API key.
Sure, yeah, definitely, you definitely want to wrap it in some kind of API end point, whether that's a servers function, or maybe just have a server running that takes in those requests. But you absolutely wouldn't want to expose you know, API keys are something that you never want to expose.
But I think, you know, increasingly, with AI becoming what it is, it's probably more important than ever because you know, they can really rack up those bills high and I'm sure finding leaked AI API keys is really in demand right now.
Yeah, good point.
In the when I briefly introduced the topic of AI, I mentioned that we don't yet have a way of just running AI models locally, but I'm actually not even sure what's the current status of it. Is that really still the case or because if I know that Meta has released some very small small end quotes right because the walls Yama model, I think it's five gigs, so you still don't want to download it for every user.
But I think technically you could put it on a web assembly module and unload it lazily and then if it's if it's not loaded yet, then you use a remote server.
If it's loaded, then then you use it.
There There could be ways, but I don't know, like are there or do you know or have you used any AI models that you can actually run them locally and then they performed well.
So I haven't played around with the rat that you took, which sounds really interesting that would be fun to explore. But the one I haven't played around with any of them locally inside of the browser. But what I have seen that I do want to play around with is Google is implementing an AI model into the browser, and I think it's I'm not mistaken. I think it's behind I think it might be behind a feature flag in the beta version. I might be wrong with that, don't
quote me, but something along those lines. But being able to actually interact with that model through the Chrome, through your Chrome browser is you know, pretty compelling. And being able to have those capabilities that you can integrate into web apps is pretty awesome. So it's exciting times to see what kind of things that will be integrated like that without having to make all those server requests.
Pretty goo.
Yeah, Chris Peter, any questions, Yeah, I do have one.
I think mine is for the editor, so I wanted to talk see if the editor supports like fontmata data or maybe for example, there may be some main points that require you to send the DITA to maybe font Mata or probably would Jason if you will. So, I don't know if it's if it supports that the editor.
Yeah, so I don't.
I don't know about front matters specifically, but I know that you can get the content, you can save the content in different formats. I can't remember if Markdown is one specifically. There might be like a plugin or something for that, but I know Jason is one of the standard formats that they provide. When when I was doing it, I was doing it in HTML to save the HTML into a database, since in my mind that was a
very flexible format to save that kind of content. And but you know, depending on your setup, like if you're set up to use markdown or whatever, you know, anything should probably work in that regard. But it is pretty flexible for the different types of way. And I think there's plug ins or extensions that you can find to kind of manipulate the data as you want, so that you kind of have the f ability to work with the data as you need.
Yeah, that's cool.
Yeah, I think that's the question I have.
Yeah, I think, okay, maybe I should be maybe going in a way explaining how like I know that helped me. Want to know how the Yeah, obviously, I know you used AI for audio to complete, but then maybe a bit of more details to how you achieved that, don't.
Yeah.
Sure. So the way that the component library or the library exposed it is it allowed me to create an endpoint. And I can't remember if it was a set end point you were that I had to create or if I could configure that. I'm blanking on that right now, but regardless, I created a several assumption, which was in
modern web frameworks is relatively straightforward. You're able to create the API route, take the take the incoming parameters, which is going to be the dynamic data passed in through the through the client, through the reacts client, and then essentially take that and then you can feed it to whatever service you want. So in my case, I used
open Ai. I used the open Ai SDK. I was able to feed the prompt that I crafted along with the input from the editor and ultimately get that response and pass it back I believe, through a stream so that you get that you know, typing effect or whatever you want to call it, inside of the client.
Yeah, yeah, that's what.
I think.
That's that's for my question.
Yeah, it's cool, Chris.
Contribution, Yeah, just just one and Kolbe, I think you mentioned it very brief briefly, the concept of plug ins is do you know if that is like, what's their philosophy. Do they prefer like poll requests for new features or is there like a clear interface for plugins or how does how does that work?
So that's a good question, and I don't know if I have a great answer there. I know that you can add your own custom commands. That's not necessarily answering the question, but it does give the interface, and I believe it's through custom components where you create a custom commands component and then kind of set it up to your configuration for what you want to do. As far as plugins, I believe since it's on the tip Tap editor,
tiptap has its own kind of ecosystem. I'm not sure if Novel itself has much of its own plug and ecosystem, but that would be something that'd be interesting to look into, you know, because there's a lot of potential there. But you know, it makes you wonder what it makes sense for them to provide their own plug in ecosystem or kind of just piggyback off of the tip Tap editor. So I'm not quite sure about that. But as far as I'm aware, I believe that they take contributions. You know,
I would hope they take contributions. I haven't tried to contribute myself, I know. So the original author was Stephen Tay, but they he's passed the torch onto somebody else to maintain the library. So I'm not quite sure where that where it is in that state.
Cool, Yeah, very interesting.
I wonder I almost wonder, like when I saw the demo, I wonder if Notion is using do you know, are they using tip tap in the back? It looks so it feels like exactly the same, right.
Right, right, Yeah, I have no idea. If I would have to guess, I would have to guess that they wrote their editor from more or less scratch. But you know, that's a good question because tiptap is pretty you know, comprehensive, and you know, it's a it's a lot of work. But I'm just thinking from the perspective like of like a big company, like more often than not, they have
very specific needs. I'm curious of if they they had to go through that pain point of figuring out you know, hitting the wall or hitting the ceiling and then rewriting it them from scratch or something.
Pretty cool, pretty cool, all right, Which appligations do you see for it?
Then?
Might not be.
Super obvious, like, of course, if you want to create a notion or turnative.
Yeah, But in.
Which other case do you think people websites applications could be using something like that and they're not yet?
Yeah?
So, I mean I can't think of a lot of great ideas of something that would be unusual to use it for per se. But you know, maybe people are creating their own editor for a blog post or notes or you know, something like that. Maybe comments for a website, you know, blog posts, comments or something like that. But really, any kind of instance where somebody wants to add a
rich text editor, maybe it's a social media app. Well, maybe a social media app is probably too maybe not the right face because social media posts are generally limited in the kind of richness that you can provide, right. But you know, really anywhere that you can use an editor, it's a great use case because of the customers is customization that you can provide on top of it. So being able to craft it and add the customs commands
to whatever your use cases are. Yeah, there's a lot of potential opportunity there.
So basically, like any markdown editor could be technically a really good place in which you would consider replacing for it.
For sure, because especially because you can write and markdown. So if you prefer to write and markdown, you have it there. But then you still get those the additional extensions in order to kind of provide different experiences where if you have different users who want to write in different ways, you have the ability to provide that with the best of both worlds.
Okay, I'd like to bring the conversation a bit towards the UAX of it and a little less about the the technical details of the library itself, because I think that we are as an industry starting to move gravitate more towards the editing experience and the view experience being the same. We even got used to edit in place functional, which is basically like the text is there, it's technically not editable, but then if you double click on it, then it becomes an input that you can add it,
and you just add it in place. So there are a lot of uaxes that are getting more used, two more familiar to people worldwide, whereas a few years back you had a clear distinction between the time in which are visualizing and the time in which you're editing something, and there were clearly different pages for each aspect. So right now you're editing, right now you're visualizing.
What do you think.
About that UAX in general? When do you think that this makes sense? Do you think this is what we should aim for all cases or no, there are two cases where having a specific edit mode makes sense.
Yeah, I think that's a really interesting question, and I think it is really contextual to the particular use case, you know, thinking of like a Google docs for instance, that is always editable. I think you know, perceptually, a Google document is a working document, right, so you go in there in order to write, so of course you can see it, but you can the whole point is to interact with it and work through it. So having that kind of click into interactivity is just kind of
native feeling. I guess if you consider that as that distinction, I do think that some applications that I've seen have gone kind of too far on that, And I can't think of anything off the top of my head but you know, information that's intended to be presentational that it's sometimes hard to determine when it is in edit versus
presentational mode. You know, that can create issues in itself where you might accidentally do something and not realizing that you just saved a huge you know, edit to something that's important. So I think having that barrier is definitely
important in some context. But I think really having that initial perception of whether this is a working kind of like quote a quote working document, you know, as opposed to something that is presentational, make sure that you do have those the visual indicators that you are in edit mode versus presentation mode. As far as like the edit the edit in place, I think I usually prefer that more for forms as opposed to like a huge document.
You know, I could see its benefits, but you know, I think intuitively, I think it works a little bit better for forms than it does for a big document. But that's just my two cents.
Makes sense, Chris Bitter, Any thoughts on this, Yeah.
I'm definitely in the same camp. There's actually a very old, i'll say legacy application we use for work where you don't want to edit, but just one false double click or extra click and it jumps you know. Yeah, so yeah, definitely there, it's it's yeah, it's like you said, basically, it all comes down to context, and I mean that's our job rights as front end engineers, to make it clear or easy to get that feeling when you're when you're in edit mode and whennot.
For sure and too easy that you don't notice it's exactly.
Yeah, no, that makes sense. That makes sense, all right, cool, So basically we already stipulated when you can consider this library, what this library is capable of doing, the environment in which it runs. What are you missing, Kobe, because I'm pretty sure there are other interesting things about this library that maybe we haven't asked.
I think part of the beauty of it is within its simplicity, Like it's there's a lot of things that you can do with it out of the box, and of course there's a lot of customizations, but at its core, like I think what it comes with and its ability to relatively simply interact with an AI tool like an endpoint like we were talking about, I think the simplicity is kind of what makes it shine. So I think, you know, that's kind of the hero of the story in my opinion.
Pretty cool, Pretty cool.
How is the integration of this library with other form controllers and react, because at the end of the day, this is an input, right, It's just receiving and outputting a markdown string.
So it looks supervency.
It looks like there are a lot of things in it, but it's actually just strength. And I even wonder like if it exposes utilities for you to extract assets from it, because you can, for example, import videos or images in
the middle of it. And maybe because if you just export the mark now it's only going to be a link to the image, right, but maybe you want to somehow parse the string so that it generates an array of the images, an array of the code blocks, whatever, Like maybe you want to extract the intelligence tokenized version of the content in order to present it somewhere else. How easy is it to do this it a library, and does the.
Library exposes utilities for it or would.
We just rely on other libraries that interact with markdown.
Yeah, it's interesting. I haven't actually tried out images with it yet, and that's a good question of how it would handle that, because I could see kind of two routes with that one being that it provides a direct hook to upload in line, so maybe you add the image and then it uploads it in place, as opposed to maybe it shows like the you know, the data, just the raw image in memory until maybe you extract the markdown or Jason version of it and then upload
it prior to submitting it to a form or something like that. So that's a good question. I'm not sure how it handles images directly, but it does provide the utilities to extract the content in whatever form you want, so I know, at least HTML and Jason, and then
you can basically input that back. So the example that I was using when I was working on it is I would is storing the HTML inside of a database and then I would retrieve that content from the database and then inject it into the editor instance to provide you know, the existing content inside of there. But there is an interesting question that you were going on there about kind of how it sits along with other inputs, and I don't know if it actually is a typical
HTML input. I don't think you can grab the content the same way that you would from a standard input because you kind of have to save it into state in order to grab that content, where then if you're going to submit a form, you grab that content from the state along with the other inputs. But then you also have to consider the UX of the inputs along
with that one. So you know, natively the inputs aren't going to look like the novel editor, right, So do you want to make your inputs look like the novel editor or do you want your editor to look like your standard inputs? So really trying to piece those together to make sure that it looks cohesive is also important.
Okay, that's cool in a way.
I think maybe we can even start wrapping up because the library itself, as you said, is pretty straightforward.
Which is good. I like it when it's that way.
It's sometimes you think, oh cool, there's a lot of content to make about X, Y and Z, but maybe just because X, Y and Z is too complicated, and in this case, it's pretty straightforward, which is very good.
Yeah, And I think like out of the box, it comes with so many features that probably for most people's use cases like that, they will be sufficient. But it does come with the ability to create custom commands and customizations in order to kind of get to the use case that you need but it is very rich out of the box, which is awesome.
I think I only have one last question, which is how much can I customize the visuals because I can see from the dots that they appear to be very open for you to.
Change how it's presented. But at the same time, it's.
Such a visual library that I would imagine that there might be things that are not customizable.
Yeah, and that's a good question. I remember trying to mess with the styles myself, and it can become complicated because if you think about all the different pieces that need to be in place in order to support something like that. So it's not only just you know, does the text input have a shadow or a border or something. You have to consider all the like the command options. You have to consider how it's indented into the into the side of it. It's not just simple padding or
something like that. It's the UI that actually creates that interfaate, the UI that creates the interface. You know that kind of just saying the same thing. The code that creates that UI is complex, so you know, be able to make sure that you're targeting the right styles and you're doing it in a way that's not going to flicks with some kind of state that you might not have
thought about. It can be challenging, but you know, it is important to be able to provide the ability to customize it to whatever your application looking field is because it kind of just dropping in a completely different style doesn't always work, especially if you're I guess you know, if you're doing a flat design and this one is very well, I guess it's not super it has like the drop shots and stuff, but the design is that it can be very different from some other use cases.
Yeah, that's very good. I think that's that's a good enough mirdle ground.
All right.
It's like they are already giving so much for free. You can always just go straight to do the source code if you really want to customize it to a whole new level for sure. All right, cool, that's very cool man. I think that at least for me, I'm good with starting to wrap up. Chris Peter, do you guys have any other questions? And Nope, I don't. I think this is I think all was unsettle. All right, Okay, pretty cool, So let's just do a quick round of
promos before we close things up. So to me, I'm just going to promote the two companies that produce the show that are allowing us to be here. So Top and Doves produces a lot of other podcasts. This podcast belongs to Top and Dows actually, so there are other shows as well. There's a show about angular development, which I'm actually the host as well, so you might be interested in that. There are shows about develops, freelancing.
There's a lot of stuff.
So if you're a developer that wants to learn other topics besides react, definitely check out Top and Dows and the other podcasts that they have. And again, if you are at the company in which they're looking to augment their staff, or you are at the company where they want to outsource some project, I would definitely recommend checking out Onvoid is n void dot com. The client the business model is very client friendly and very different than
what other agencies typically offer for their clients. So recommend checking out those things. So those are going to be my promotions for today, Chris.
How about you?
Yeah, I have another related I've gone far deep in the rabbit hole of this idea of declarative video. So you write some code or at least repeatable steps, and you get a video out. So there's another one, Code Dot movie. I think this one is much more focused on If you've ever seen those neat presentations where you have some nice lines of code slide in and animate, that's this Code Dot movie is a bit more for that.
But still working on it. And I was actually talking to one of the guests we had, Dimitri Kovalenko a few days ago. I'm working with him a little bit on his f F frames, which is a similar Rust based framework. But maybe I'll drop that to the link to his project. So still exploring the space.
That is so cool, dude, like thecode Dot movie that oh Man. When I used to do YouTube videos, it would take me on eternity because I literally had a full time videographer editing the animations on after effects, and it's like every single line of code would be an individual token and it was such a pain in the ass. Honestly, it was the thing that he was all. He was always like, look as let's record more videos, let's do anything else, Like, dude, I can't take any made another
line of code. It was the most tedious part of the work, and this just turns it into something automatic. I always wanted to have something like this. That's pretty cool, man. And how does it like, can I directly export this as an a v I, which would be like a video format that already has opacity, so I don't have to necessarily use the the card in the background, or does it only expose it as as code itself as front end code?
I'm not sure. I think I almost cringe a bit to say, I think you get a gift. But then I mean, if they're making gifts, there must be some intermediate you can for sure do there's some sort of Jason import export as always. But but yeah, that's that's why I went down. I'm looking at this whole space because it's the same for me. Like whenever you record anything with talking and coding, there's always so much time
to edit those videos. It's it's crazy. So anyway that you can do that in a repeatable fashion saves a lot of time.
So yeah, how about you beater?
Yeah so just pissed on micro or project on web components. Yeah so I just TV just those a little project with components.
Yeah, okay, cool, I'll be sending all those lengths here on the comment section. And Kobe, the star of today's episode, how about you.
Yeah, I actually have an upcoming course as well. It's a full stack next JS fifteen course, going through authentication with Clerk, database management with Zada and drizzlow r M, adding some payment options with Stripe, and you know, just learning all the new APIs with React nineteen. So if you check it out Space, jelly Dot, dev Slash, Next next JS, post the link in the chat as well, you can get updates and exclusive access when I'm ready to launch it.
Pretty sweet.
I sent it on the comment section, So if you're listening to us on YouTube LinkedIn it's the other platform that used to be for gamers that do live stream and I always forget the name Twitch exactly Twitch, then you're gonna have a comment section there and you can see the lengths of everything that we mentioned. All right, man, pretty cool. Kobe again, thank you so much for being on the show.
Yeah, it was. It was really cool.
Feel free to reach out to me and we can we can do another round anytime.
Thank you. Sounds great, right and for you that's stick up until the end.
Thank you for your time and I will see you in the next one.