WEBVTT 1 00:00:05.280 --> 00:00:08.160 Hey, Welcome to React Round Up, the podcast where we 2 00:00:08.240 --> 00:00:11.320 keep you updated on all things React related. This show 3 00:00:11.439 --> 00:00:14.880 is produced by Top and Doves and Void. Top and 4 00:00:14.960 --> 00:00:17.679 Dows is very great Top and Devs, get top and 5 00:00:17.719 --> 00:00:18.800 pay and recognition. 6 00:00:18.839 --> 00:00:20.280 We're working on interesting. 7 00:00:19.920 --> 00:00:24.559 Problems and making meaningful community contributions. An Void, which provides 8 00:00:24.679 --> 00:00:29.440 the most client friendly model for software outsourcing. Clients can 9 00:00:29.559 --> 00:00:33.840 hire voids designers and engineers and they only pay after 10 00:00:34.000 --> 00:00:39.200 the tasks are delivered and approved. In today's episode, we 11 00:00:39.280 --> 00:00:43.000 will talk about an AI powered What you see is 12 00:00:43.000 --> 00:00:46.119 which you get editor. Basically, like if you're familiar with Notion, 13 00:00:46.320 --> 00:00:50.039 if you have used Notion at all any time in 14 00:00:50.079 --> 00:00:53.439 your life, then you know that you have this very 15 00:00:53.520 --> 00:00:57.920 visual way of editing your content and interacting with it. 16 00:00:58.280 --> 00:01:01.880 And there is a library that basically allows you to 17 00:01:02.000 --> 00:01:07.239 have the functionalities that Notion has in their editor. And 18 00:01:07.280 --> 00:01:09.480 this is what we're going to be talking about in 19 00:01:09.519 --> 00:01:13.000 this episode. My name is Lucas Paganini, your host in 20 00:01:13.079 --> 00:01:16.480 a podcast, and joining me in today's episode are the 21 00:01:16.719 --> 00:01:18.760 also hosts Chris. 22 00:01:18.599 --> 00:01:23.239 Ruan, Hello everybody, Peter. 23 00:01:23.200 --> 00:01:29.599 Osa, Hi everyone, and our very special guest Kobe Fayok, 24 00:01:29.799 --> 00:01:34.239 which is the director of developer experience engineering and claudinary 25 00:01:34.400 --> 00:01:36.239 and also a content creator. 26 00:01:37.200 --> 00:01:39.280 Hey everybody, how's it going. I'm excited to be here. 27 00:01:40.640 --> 00:01:43.200 Thank you for taking the time. Kobe, I'm very excited 28 00:01:43.239 --> 00:01:46.359 as well. I think this is an interesting topic. And I, 29 00:01:46.519 --> 00:01:50.560 for one, it's weird right when we are this, when 30 00:01:50.599 --> 00:01:54.439 we are developers, instead of us thinking like, we have 31 00:01:54.519 --> 00:01:57.319 this problem, so for this problem, going to use this library. 32 00:01:57.359 --> 00:01:59.799 Sometimes we get so excited about a library that we think, 33 00:02:00.200 --> 00:02:02.719 how can I figure out a problem so that I 34 00:02:02.719 --> 00:02:05.560 can use that library. That's almost like what I'm feeling 35 00:02:05.640 --> 00:02:08.000 right now. I thought this was a really interesting library, 36 00:02:08.039 --> 00:02:10.080 so eager to learn more about it? 37 00:02:10.759 --> 00:02:12.319 Yeah, ready to dig in? 38 00:02:13.159 --> 00:02:13.599 All right? 39 00:02:14.000 --> 00:02:16.960 So I tried to give a very quick pitch about 40 00:02:17.000 --> 00:02:20.360 the library, but you have actually used it, so how 41 00:02:20.360 --> 00:02:21.719 would you describe it? 42 00:02:23.000 --> 00:02:23.240 Yeah? 43 00:02:23.280 --> 00:02:29.039 So it's ultimately a React library, a component library that's 44 00:02:29.159 --> 00:02:30.840 intended to be able to give you, Like you said, 45 00:02:30.840 --> 00:02:34.919 the drop in Busywig editor. That's kind of like Notion style, 46 00:02:34.960 --> 00:02:38.479 where you have your commands, you have where you can 47 00:02:38.560 --> 00:02:40.960 kind of click onto a word and edit it inline. 48 00:02:41.719 --> 00:02:44.360 Basically a similar experience that you'd get inside a Notion, 49 00:02:44.479 --> 00:02:47.159 only you can drop it inside your own application, which 50 00:02:47.159 --> 00:02:51.800 is pretty compelling because editors can be vastly complicated depending 51 00:02:51.840 --> 00:02:53.479 on what you're trying to do, and being able to 52 00:02:53.479 --> 00:02:56.360 give as good of a UX as you can is critical. 53 00:02:56.680 --> 00:03:00.759 Cool, all right, let's talk a bit about also environments 54 00:03:00.759 --> 00:03:03.719 in which we can run it. Is this a React 55 00:03:03.759 --> 00:03:08.120 specific library or is it framework agnostic? 56 00:03:08.199 --> 00:03:10.560 And we can use it on other frameworks as well? 57 00:03:11.599 --> 00:03:14.719 Yeah, so unless they've made updates, it is React specific. 58 00:03:15.479 --> 00:03:17.800 But the particular example that I was playing around with 59 00:03:17.919 --> 00:03:22.479 was in Astro, which can use React, but it should 60 00:03:22.520 --> 00:03:24.800 be able to be used in any kind of React environment. 61 00:03:25.639 --> 00:03:28.439 Astro specifically is just an awesome tool that I've been 62 00:03:28.479 --> 00:03:30.800 trying to spend more and more time with. And you know, 63 00:03:31.000 --> 00:03:32.520 one of the things that's nice about it is you 64 00:03:32.560 --> 00:03:36.360 can use most of the popular framework or UI libraries 65 00:03:36.400 --> 00:03:39.319 with it, So whether it's React, you spell it, or whatever, 66 00:03:40.080 --> 00:03:42.520 you can use it. So that gives you an opportunity 67 00:03:42.599 --> 00:03:45.319 to use a tool like Novel, which is only available 68 00:03:45.360 --> 00:03:47.520 to React still within the Astro environment. 69 00:03:47.759 --> 00:03:54.280 Understood, understood, Okay, let's understand a little bit more about 70 00:03:54.479 --> 00:03:58.960 what can you do and what can't it do? We 71 00:03:59.000 --> 00:04:02.240 can I think we can assume that most people listening 72 00:04:02.280 --> 00:04:05.719 to us are at least somewhat familiar with Notion, have 73 00:04:05.879 --> 00:04:08.800 used it at least once in their lives. So I 74 00:04:08.840 --> 00:04:14.319 think we can safely assume that from that perspective, comparing 75 00:04:14.400 --> 00:04:18.959 to the functionalities that the Notion editor exposes, what can 76 00:04:19.000 --> 00:04:20.480 we expect from this library. 77 00:04:21.399 --> 00:04:24.000 Sure, and I won't say that I know one to 78 00:04:24.079 --> 00:04:27.480 one of what the feature lists are. I've used Notion, 79 00:04:27.600 --> 00:04:31.319 but I'm not a heavy Notion user. But generally speaking, 80 00:04:31.360 --> 00:04:34.519 you know from the basics, it's being able to use 81 00:04:34.560 --> 00:04:37.680 the command format in order to create an H one tag. 82 00:04:37.759 --> 00:04:40.439 So what that would be is by first specifying the 83 00:04:40.439 --> 00:04:43.800 forward slash key, and then you can continue typing out 84 00:04:43.800 --> 00:04:46.560 whatever kind of autocomplete feature that you want. So maybe 85 00:04:46.600 --> 00:04:48.399 I want to add an H one. Maybe in H two, 86 00:04:48.759 --> 00:04:51.360 I can select that particular format and then I'll continue 87 00:04:51.360 --> 00:04:53.680 writing it out as such, where alternatively I can write 88 00:04:53.720 --> 00:04:55.879 that as marked down. So maybe I'll do the one 89 00:04:55.959 --> 00:04:58.759 hashtag symbol in space and it'll turn it into an 90 00:04:58.879 --> 00:05:01.680 H one for me. Similarly, there's a lot of other 91 00:05:01.720 --> 00:05:05.639 features in it. You can add lists, you can add images, 92 00:05:05.680 --> 00:05:08.600 and all those YouTube embeds. It gives you a bunch 93 00:05:08.600 --> 00:05:10.959 of those similar commands so that you have a similar 94 00:05:11.000 --> 00:05:15.120 experience with the a very interactive, UI rich way to 95 00:05:15.920 --> 00:05:18.720 write your content. But one of the things that is 96 00:05:18.759 --> 00:05:21.120 really interesting with it, and I think Notion has this 97 00:05:21.199 --> 00:05:23.480 as well, is it does have the built in AI feature, 98 00:05:23.519 --> 00:05:26.680 which is kind of what makes a novel itself compelling, 99 00:05:27.319 --> 00:05:30.360 where it has the ability to reach out to an 100 00:05:30.399 --> 00:05:33.879 AI service which we can get into to perform things 101 00:05:33.879 --> 00:05:37.639 like autocomplete or maybe just simply asking questions with AI. 102 00:05:38.079 --> 00:05:42.800 Okay, talking specifically about the AI functionalities, how does that 103 00:05:42.879 --> 00:05:50.040 integration work? Because we don't have yet a very easy 104 00:05:50.079 --> 00:05:53.800 and straightforward, like web standard way of running AI locally. 105 00:05:53.839 --> 00:05:56.120 I think we're going to get there eventually, but stoodn't. 106 00:05:56.560 --> 00:05:59.920 So I imagine that you would have to connect your 107 00:06:01.079 --> 00:06:04.439 keys to open AI or maybe like send a request 108 00:06:04.560 --> 00:06:05.279 to a back end. 109 00:06:05.600 --> 00:06:07.000 How how does that work? 110 00:06:07.199 --> 00:06:10.879 Yeah, so it's it. It works with really any kind 111 00:06:10.879 --> 00:06:12.720 of AI service that you want. So you would make 112 00:06:12.759 --> 00:06:16.519 a request to the AI service through like a hook 113 00:06:16.839 --> 00:06:19.800 kind of capability. So once you try to write in 114 00:06:19.920 --> 00:06:22.439 whatever the prompt is through the through the slash command 115 00:06:22.519 --> 00:06:26.360 or through the ask AI, you essentially the route that 116 00:06:26.360 --> 00:06:29.079 I kind of took in my tutorials, I created an 117 00:06:29.199 --> 00:06:32.759 endpoint in order to take that API request, where then 118 00:06:32.800 --> 00:06:35.480 I crafted the prompt to whatever I wanted that to be. 119 00:06:36.000 --> 00:06:37.600 At that point, you can kind of customize it to 120 00:06:37.639 --> 00:06:39.959 your liking. I think they have some examples in there 121 00:06:40.000 --> 00:06:42.279 for just kind of like a standard way too that 122 00:06:42.360 --> 00:06:45.759 they implemented their autocomplete. But that gives you the opportunity 123 00:06:45.800 --> 00:06:47.519 to really kind of do whatever you want with the 124 00:06:47.560 --> 00:06:49.759 AI command and then use whatever service you want. Where 125 00:06:50.319 --> 00:06:53.639 Opening ai is probably one of the most mainstream services 126 00:06:53.639 --> 00:06:56.240 to use in that regard, but given it is so 127 00:06:56.360 --> 00:06:58.279 open and you can create your own endpoint, you can 128 00:06:58.480 --> 00:07:02.279 probably use whatever service you want with it, or you know, 129 00:07:02.360 --> 00:07:03.839 your own models if you want. 130 00:07:05.600 --> 00:07:06.040 Gotcha. 131 00:07:06.240 --> 00:07:09.160 Okay, assuming that I just want to use one of 132 00:07:09.199 --> 00:07:14.399 those ready made providers, wouldn't it be a safety concern 133 00:07:14.600 --> 00:07:18.399 because it'd be exposing the keys in the front end, right, 134 00:07:18.480 --> 00:07:21.839 So I guess even in that sense, even if I 135 00:07:21.920 --> 00:07:26.000 were to use open ai, it would probably be safer 136 00:07:26.240 --> 00:07:29.519 if I were to add a back end endpoint so 137 00:07:29.560 --> 00:07:31.560 that I don't expose the API key. 138 00:07:32.600 --> 00:07:35.199 Sure, yeah, definitely, you definitely want to wrap it in 139 00:07:35.279 --> 00:07:38.759 some kind of API end point, whether that's a servers function, 140 00:07:39.000 --> 00:07:41.800 or maybe just have a server running that takes in 141 00:07:41.839 --> 00:07:45.319 those requests. But you absolutely wouldn't want to expose you know, 142 00:07:45.399 --> 00:07:48.360 API keys are something that you never want to expose. 143 00:07:48.399 --> 00:07:51.120 But I think, you know, increasingly, with AI becoming what 144 00:07:51.199 --> 00:07:54.360 it is, it's probably more important than ever because you know, 145 00:07:54.360 --> 00:07:57.040 they can really rack up those bills high and I'm 146 00:07:57.079 --> 00:08:01.399 sure finding leaked AI API keys is really in demand 147 00:08:01.439 --> 00:08:01.839 right now. 148 00:08:02.480 --> 00:08:03.720 Yeah, good point. 149 00:08:05.680 --> 00:08:09.759 In the when I briefly introduced the topic of AI, 150 00:08:10.000 --> 00:08:13.040 I mentioned that we don't yet have a way of 151 00:08:13.160 --> 00:08:17.399 just running AI models locally, but I'm actually not even 152 00:08:17.439 --> 00:08:20.600 sure what's the current status of it. Is that really 153 00:08:20.639 --> 00:08:23.720 still the case or because if I know that Meta 154 00:08:23.800 --> 00:08:29.360 has released some very small small end quotes right because 155 00:08:29.399 --> 00:08:33.720 the walls Yama model, I think it's five gigs, so 156 00:08:34.120 --> 00:08:37.360 you still don't want to download it for every user. 157 00:08:37.399 --> 00:08:39.720 But I think technically you could put it on a 158 00:08:39.720 --> 00:08:43.600 web assembly module and unload it lazily and then if 159 00:08:43.639 --> 00:08:46.039 it's if it's not loaded yet, then you use a 160 00:08:46.080 --> 00:08:46.720 remote server. 161 00:08:46.840 --> 00:08:48.960 If it's loaded, then then you use it. 162 00:08:49.480 --> 00:08:52.120 There There could be ways, but I don't know, like 163 00:08:52.399 --> 00:08:55.679 are there or do you know or have you used 164 00:08:56.320 --> 00:08:59.600 any AI models that you can actually run them locally 165 00:08:59.639 --> 00:09:01.039 and then they performed well. 166 00:09:02.559 --> 00:09:05.399 So I haven't played around with the rat that you took, 167 00:09:05.399 --> 00:09:08.720 which sounds really interesting that would be fun to explore. 168 00:09:08.759 --> 00:09:11.720 But the one I haven't played around with any of 169 00:09:11.759 --> 00:09:14.480 them locally inside of the browser. But what I have 170 00:09:14.679 --> 00:09:16.519 seen that I do want to play around with is 171 00:09:16.759 --> 00:09:20.639 Google is implementing an AI model into the browser, and 172 00:09:20.720 --> 00:09:23.039 I think it's I'm not mistaken. I think it's behind 173 00:09:23.519 --> 00:09:25.320 I think it might be behind a feature flag in 174 00:09:25.360 --> 00:09:28.120 the beta version. I might be wrong with that, don't 175 00:09:28.159 --> 00:09:31.240 quote me, but something along those lines. But being able 176 00:09:31.279 --> 00:09:34.200 to actually interact with that model through the Chrome, through 177 00:09:34.240 --> 00:09:36.519 your Chrome browser is you know, pretty compelling. And being 178 00:09:36.519 --> 00:09:39.440 able to have those capabilities that you can integrate into 179 00:09:39.600 --> 00:09:43.240 web apps is pretty awesome. So it's exciting times to 180 00:09:43.320 --> 00:09:46.120 see what kind of things that will be integrated like 181 00:09:46.159 --> 00:09:49.200 that without having to make all those server requests. 182 00:09:49.840 --> 00:09:50.279 Pretty goo. 183 00:09:50.519 --> 00:09:55.279 Yeah, Chris Peter, any questions, Yeah, I do have one. 184 00:09:55.720 --> 00:09:59.679 I think mine is for the editor, so I wanted 185 00:09:59.720 --> 00:10:04.159 to talk see if the editor supports like fontmata data 186 00:10:05.960 --> 00:10:08.120 or maybe for example, there may be some main points 187 00:10:08.159 --> 00:10:10.440 that require you to send the DITA to maybe font 188 00:10:10.519 --> 00:10:13.440 Mata or probably would Jason if you will. So, I 189 00:10:13.440 --> 00:10:16.600 don't know if it's if it supports that the editor. 190 00:10:16.799 --> 00:10:18.000 Yeah, so I don't. 191 00:10:18.000 --> 00:10:20.360 I don't know about front matters specifically, but I know 192 00:10:20.440 --> 00:10:23.399 that you can get the content, you can save the 193 00:10:23.440 --> 00:10:26.720 content in different formats. I can't remember if Markdown is 194 00:10:26.720 --> 00:10:29.399 one specifically. There might be like a plugin or something 195 00:10:29.440 --> 00:10:31.519 for that, but I know Jason is one of the 196 00:10:31.559 --> 00:10:35.519 standard formats that they provide. When when I was doing it, 197 00:10:35.559 --> 00:10:37.639 I was doing it in HTML to save the HTML 198 00:10:37.679 --> 00:10:40.399 into a database, since in my mind that was a 199 00:10:40.480 --> 00:10:44.039 very flexible format to save that kind of content. And 200 00:10:44.240 --> 00:10:46.000 but you know, depending on your setup, like if you're 201 00:10:46.080 --> 00:10:48.600 set up to use markdown or whatever, you know, anything 202 00:10:48.679 --> 00:10:51.519 should probably work in that regard. But it is pretty 203 00:10:51.559 --> 00:10:53.120 flexible for the different types of way. And I think 204 00:10:53.159 --> 00:10:56.080 there's plug ins or extensions that you can find to 205 00:10:56.200 --> 00:10:58.639 kind of manipulate the data as you want, so that 206 00:10:59.279 --> 00:11:00.799 you kind of have the f ability to work with 207 00:11:00.799 --> 00:11:01.840 the data as you need. 208 00:11:02.480 --> 00:11:03.200 Yeah, that's cool. 209 00:11:03.519 --> 00:11:06.120 Yeah, I think that's the question I have. 210 00:11:06.519 --> 00:11:12.480 Yeah, I think, okay, maybe I should be maybe going 211 00:11:12.559 --> 00:11:17.279 in a way explaining how like I know that helped me. 212 00:11:17.360 --> 00:11:20.720 Want to know how the Yeah, obviously, I know you 213 00:11:20.759 --> 00:11:24.240 used AI for audio to complete, but then maybe a 214 00:11:24.279 --> 00:11:26.799 bit of more details to how you achieved that, don't. 215 00:11:28.120 --> 00:11:28.320 Yeah. 216 00:11:28.360 --> 00:11:32.559 Sure. So the way that the component library or the 217 00:11:32.559 --> 00:11:35.919 library exposed it is it allowed me to create an endpoint. 218 00:11:36.519 --> 00:11:39.279 And I can't remember if it was a set end 219 00:11:39.320 --> 00:11:41.759 point you were that I had to create or if 220 00:11:41.759 --> 00:11:43.799 I could configure that. I'm blanking on that right now, 221 00:11:43.840 --> 00:11:48.000 but regardless, I created a several assumption, which was in 222 00:11:48.320 --> 00:11:51.639 modern web frameworks is relatively straightforward. You're able to create 223 00:11:51.679 --> 00:11:56.080 the API route, take the take the incoming parameters, which 224 00:11:56.120 --> 00:11:59.039 is going to be the dynamic data passed in through 225 00:11:59.039 --> 00:12:03.159 the through the client, through the reacts client, and then 226 00:12:03.240 --> 00:12:05.000 essentially take that and then you can feed it to 227 00:12:05.039 --> 00:12:06.919 whatever service you want. So in my case, I used 228 00:12:06.919 --> 00:12:09.639 open Ai. I used the open Ai SDK. I was 229 00:12:09.679 --> 00:12:13.000 able to feed the prompt that I crafted along with 230 00:12:13.120 --> 00:12:18.279 the input from the editor and ultimately get that response 231 00:12:18.320 --> 00:12:21.279 and pass it back I believe, through a stream so 232 00:12:21.320 --> 00:12:23.399 that you get that you know, typing effect or whatever 233 00:12:23.519 --> 00:12:25.480 you want to call it, inside of the client. 234 00:12:25.799 --> 00:12:28.000 Yeah, yeah, that's what. 235 00:12:30.759 --> 00:12:31.039 I think. 236 00:12:31.039 --> 00:12:32.320 That's that's for my question. 237 00:12:32.440 --> 00:12:34.440 Yeah, it's cool, Chris. 238 00:12:35.279 --> 00:12:38.279 Contribution, Yeah, just just one and Kolbe, I think you 239 00:12:38.399 --> 00:12:42.080 mentioned it very brief briefly, the concept of plug ins 240 00:12:42.279 --> 00:12:45.360 is do you know if that is like, what's their philosophy. 241 00:12:45.440 --> 00:12:50.279 Do they prefer like poll requests for new features or 242 00:12:50.440 --> 00:12:53.559 is there like a clear interface for plugins or how 243 00:12:53.600 --> 00:12:54.799 does how does that work? 244 00:12:55.480 --> 00:12:57.000 So that's a good question, and I don't know if 245 00:12:57.000 --> 00:12:59.480 I have a great answer there. I know that you 246 00:12:59.480 --> 00:13:04.360 can add your own custom commands. That's not necessarily answering 247 00:13:04.360 --> 00:13:07.120 the question, but it does give the interface, and I 248 00:13:07.159 --> 00:13:11.480 believe it's through custom components where you create a custom 249 00:13:11.600 --> 00:13:13.559 commands component and then kind of set it up to 250 00:13:13.600 --> 00:13:15.879 your configuration for what you want to do. As far 251 00:13:15.879 --> 00:13:18.799 as plugins, I believe since it's on the tip Tap editor, 252 00:13:19.039 --> 00:13:21.759 tiptap has its own kind of ecosystem. I'm not sure 253 00:13:21.799 --> 00:13:25.240 if Novel itself has much of its own plug and ecosystem, 254 00:13:25.279 --> 00:13:27.399 but that would be something that'd be interesting to look into, 255 00:13:28.679 --> 00:13:31.320 you know, because there's a lot of potential there. But 256 00:13:31.799 --> 00:13:34.000 you know, it makes you wonder what it makes sense 257 00:13:34.000 --> 00:13:36.159 for them to provide their own plug in ecosystem or 258 00:13:36.240 --> 00:13:38.279 kind of just piggyback off of the tip Tap editor. 259 00:13:38.360 --> 00:13:41.080 So I'm not quite sure about that. But as far 260 00:13:41.120 --> 00:13:45.960 as I'm aware, I believe that they take contributions. You know, 261 00:13:46.039 --> 00:13:48.360 I would hope they take contributions. I haven't tried to 262 00:13:48.360 --> 00:13:52.360 contribute myself, I know. So the original author was Stephen Tay, 263 00:13:52.480 --> 00:13:55.399 but they he's passed the torch onto somebody else to 264 00:13:55.480 --> 00:13:58.559 maintain the library. So I'm not quite sure where that 265 00:13:58.799 --> 00:13:59.799 where it is in that state. 266 00:14:00.200 --> 00:14:01.360 Cool, Yeah, very interesting. 267 00:14:01.440 --> 00:14:04.279 I wonder I almost wonder, like when I saw the demo, 268 00:14:05.240 --> 00:14:07.639 I wonder if Notion is using do you know, are 269 00:14:07.639 --> 00:14:09.679 they using tip tap in the back? It looks so 270 00:14:10.000 --> 00:14:12.120 it feels like exactly the same, right. 271 00:14:12.120 --> 00:14:15.879 Right, right, Yeah, I have no idea. If I would 272 00:14:15.879 --> 00:14:17.720 have to guess, I would have to guess that they 273 00:14:18.440 --> 00:14:21.399 wrote their editor from more or less scratch. But you know, 274 00:14:21.399 --> 00:14:24.399 that's a good question because tiptap is pretty you know, comprehensive, 275 00:14:24.519 --> 00:14:26.840 and you know, it's a it's a lot of work. 276 00:14:26.960 --> 00:14:29.279 But I'm just thinking from the perspective like of like 277 00:14:29.320 --> 00:14:31.600 a big company, like more often than not, they have 278 00:14:32.240 --> 00:14:35.759 very specific needs. I'm curious of if they they had 279 00:14:35.759 --> 00:14:37.879 to go through that pain point of figuring out you know, 280 00:14:37.960 --> 00:14:40.960 hitting the wall or hitting the ceiling and then rewriting 281 00:14:41.000 --> 00:14:42.879 it them from scratch or something. 282 00:14:43.360 --> 00:14:50.240 Pretty cool, pretty cool, all right, Which appligations do you 283 00:14:50.320 --> 00:14:51.000 see for it? 284 00:14:51.080 --> 00:14:51.240 Then? 285 00:14:51.600 --> 00:14:53.360 Might not be. 286 00:14:52.799 --> 00:14:56.200 Super obvious, like, of course, if you want to create 287 00:14:56.240 --> 00:14:57.720 a notion or turnative. 288 00:14:58.279 --> 00:14:59.320 Yeah, But in. 289 00:14:59.200 --> 00:15:03.320 Which other case do you think people websites applications could 290 00:15:03.320 --> 00:15:06.000 be using something like that and they're not yet? 291 00:15:06.559 --> 00:15:06.759 Yeah? 292 00:15:06.840 --> 00:15:08.879 So, I mean I can't think of a lot of 293 00:15:08.879 --> 00:15:11.399 great ideas of something that would be unusual to use 294 00:15:11.399 --> 00:15:14.559 it for per se. But you know, maybe people are 295 00:15:14.679 --> 00:15:17.679 creating their own editor for a blog post or notes 296 00:15:17.840 --> 00:15:22.799 or you know, something like that. Maybe comments for a website, 297 00:15:22.919 --> 00:15:25.840 you know, blog posts, comments or something like that. But really, 298 00:15:25.919 --> 00:15:30.399 any kind of instance where somebody wants to add a 299 00:15:30.480 --> 00:15:33.799 rich text editor, maybe it's a social media app. Well, 300 00:15:33.799 --> 00:15:36.679 maybe a social media app is probably too maybe not 301 00:15:36.720 --> 00:15:40.399 the right face because social media posts are generally limited 302 00:15:40.519 --> 00:15:42.399 in the kind of richness that you can provide, right. 303 00:15:43.600 --> 00:15:45.519 But you know, really anywhere that you can use an editor, 304 00:15:45.799 --> 00:15:47.799 it's a great use case because of the customers is 305 00:15:47.919 --> 00:15:50.120 customization that you can provide on top of it. So 306 00:15:50.639 --> 00:15:53.080 being able to craft it and add the customs commands 307 00:15:53.159 --> 00:15:56.879 to whatever your use cases are. Yeah, there's a lot 308 00:15:56.879 --> 00:15:58.159 of potential opportunity there. 309 00:15:58.320 --> 00:16:05.279 So basically, like any markdown editor could be technically a 310 00:16:05.320 --> 00:16:08.320 really good place in which you would consider replacing for it. 311 00:16:08.720 --> 00:16:11.360 For sure, because especially because you can write and markdown. 312 00:16:11.519 --> 00:16:13.200 So if you prefer to write and markdown, you have 313 00:16:13.240 --> 00:16:15.799 it there. But then you still get those the additional 314 00:16:15.879 --> 00:16:21.480 extensions in order to kind of provide different experiences where 315 00:16:21.679 --> 00:16:23.440 if you have different users who want to write in 316 00:16:23.440 --> 00:16:26.360 different ways, you have the ability to provide that with 317 00:16:26.840 --> 00:16:27.840 the best of both worlds. 318 00:16:28.960 --> 00:16:33.559 Okay, I'd like to bring the conversation a bit towards 319 00:16:34.039 --> 00:16:38.039 the UAX of it and a little less about the 320 00:16:38.039 --> 00:16:41.840 the technical details of the library itself, because I think 321 00:16:41.879 --> 00:16:48.519 that we are as an industry starting to move gravitate 322 00:16:48.639 --> 00:16:53.360 more towards the editing experience and the view experience being 323 00:16:53.399 --> 00:16:59.879 the same. We even got used to edit in place functional, 324 00:17:00.240 --> 00:17:02.799 which is basically like the text is there, it's technically 325 00:17:02.840 --> 00:17:05.279 not editable, but then if you double click on it, 326 00:17:05.400 --> 00:17:08.240 then it becomes an input that you can add it, 327 00:17:08.599 --> 00:17:10.759 and you just add it in place. So there are 328 00:17:10.759 --> 00:17:15.319 a lot of uaxes that are getting more used, two 329 00:17:15.559 --> 00:17:19.480 more familiar to people worldwide, whereas a few years back 330 00:17:20.039 --> 00:17:24.400 you had a clear distinction between the time in which 331 00:17:24.400 --> 00:17:28.039 are visualizing and the time in which you're editing something, 332 00:17:28.279 --> 00:17:31.920 and there were clearly different pages for each aspect. So 333 00:17:32.119 --> 00:17:34.279 right now you're editing, right now you're visualizing. 334 00:17:35.519 --> 00:17:36.720 What do you think. 335 00:17:36.480 --> 00:17:39.839 About that UAX in general? When do you think that 336 00:17:39.920 --> 00:17:42.839 this makes sense? Do you think this is what we 337 00:17:42.880 --> 00:17:46.640 should aim for all cases or no, there are two 338 00:17:46.680 --> 00:17:49.839 cases where having a specific edit mode makes sense. 339 00:17:50.599 --> 00:17:52.799 Yeah, I think that's a really interesting question, and I 340 00:17:52.839 --> 00:17:56.359 think it is really contextual to the particular use case, 341 00:17:56.400 --> 00:17:59.440 you know, thinking of like a Google docs for instance, 342 00:17:59.480 --> 00:18:03.559 that is always editable. I think you know, perceptually, a 343 00:18:03.559 --> 00:18:06.079 Google document is a working document, right, so you go 344 00:18:06.160 --> 00:18:07.880 in there in order to write, so of course you 345 00:18:07.880 --> 00:18:10.200 can see it, but you can the whole point is 346 00:18:10.200 --> 00:18:12.960 to interact with it and work through it. So having 347 00:18:12.960 --> 00:18:15.880 that kind of click into interactivity is just kind of 348 00:18:15.960 --> 00:18:18.960 native feeling. I guess if you consider that as that distinction, 349 00:18:19.880 --> 00:18:22.480 I do think that some applications that I've seen have 350 00:18:22.559 --> 00:18:24.960 gone kind of too far on that, And I can't 351 00:18:24.960 --> 00:18:26.319 think of anything off the top of my head but 352 00:18:27.279 --> 00:18:31.759 you know, information that's intended to be presentational that it's 353 00:18:31.880 --> 00:18:35.160 sometimes hard to determine when it is in edit versus 354 00:18:35.160 --> 00:18:38.480 presentational mode. You know, that can create issues in itself 355 00:18:38.480 --> 00:18:41.240 where you might accidentally do something and not realizing that 356 00:18:41.279 --> 00:18:44.400 you just saved a huge you know, edit to something 357 00:18:44.440 --> 00:18:47.880 that's important. So I think having that barrier is definitely 358 00:18:47.960 --> 00:18:51.880 important in some context. But I think really having that 359 00:18:51.920 --> 00:18:54.599 initial perception of whether this is a working kind of 360 00:18:55.039 --> 00:18:58.599 like quote a quote working document, you know, as opposed 361 00:18:58.640 --> 00:19:00.640 to something that is presentational, make sure that you do 362 00:19:00.759 --> 00:19:04.160 have those the visual indicators that you are in edit 363 00:19:04.200 --> 00:19:07.559 mode versus presentation mode. As far as like the edit 364 00:19:07.599 --> 00:19:09.759 the edit in place, I think I usually prefer that 365 00:19:09.880 --> 00:19:13.319 more for forms as opposed to like a huge document. 366 00:19:14.279 --> 00:19:16.759 You know, I could see its benefits, but you know, 367 00:19:16.799 --> 00:19:19.319 I think intuitively, I think it works a little bit 368 00:19:19.319 --> 00:19:21.839 better for forms than it does for a big document. 369 00:19:22.279 --> 00:19:23.680 But that's just my two cents. 370 00:19:23.559 --> 00:19:26.720 Makes sense, Chris Bitter, Any thoughts on this, Yeah. 371 00:19:26.519 --> 00:19:30.920 I'm definitely in the same camp. There's actually a very old, 372 00:19:31.160 --> 00:19:35.119 i'll say legacy application we use for work where you 373 00:19:35.119 --> 00:19:37.960 don't want to edit, but just one false double click 374 00:19:38.039 --> 00:19:42.519 or extra click and it jumps you know. Yeah, so yeah, 375 00:19:42.559 --> 00:19:46.119 definitely there, it's it's yeah, it's like you said, basically, 376 00:19:46.319 --> 00:19:49.039 it all comes down to context, and I mean that's 377 00:19:49.079 --> 00:19:51.799 our job rights as front end engineers, to make it 378 00:19:51.920 --> 00:19:57.160 clear or easy to get that feeling when you're when 379 00:19:57.160 --> 00:19:58.960 you're in edit mode and whennot. 380 00:19:59.119 --> 00:20:03.480 For sure and too easy that you don't notice it's exactly. 381 00:20:03.599 --> 00:20:09.240 Yeah, no, that makes sense. That makes sense, all right, cool, 382 00:20:09.599 --> 00:20:15.079 So basically we already stipulated when you can consider this library, 383 00:20:15.240 --> 00:20:18.720 what this library is capable of doing, the environment in 384 00:20:18.759 --> 00:20:22.480 which it runs. What are you missing, Kobe, because I'm 385 00:20:22.480 --> 00:20:25.519 pretty sure there are other interesting things about this library 386 00:20:25.559 --> 00:20:26.799 that maybe we haven't asked. 387 00:20:27.559 --> 00:20:31.000 I think part of the beauty of it is within 388 00:20:31.039 --> 00:20:34.519 its simplicity, Like it's there's a lot of things that 389 00:20:34.559 --> 00:20:35.839 you can do with it out of the box, and 390 00:20:35.880 --> 00:20:38.240 of course there's a lot of customizations, but at its core, 391 00:20:38.720 --> 00:20:41.359 like I think what it comes with and its ability 392 00:20:41.400 --> 00:20:46.400 to relatively simply interact with an AI tool like an 393 00:20:46.480 --> 00:20:49.279 endpoint like we were talking about, I think the simplicity 394 00:20:49.319 --> 00:20:52.079 is kind of what makes it shine. So I think, 395 00:20:52.200 --> 00:20:53.720 you know, that's kind of the hero of the story 396 00:20:53.720 --> 00:20:54.799 in my opinion. 397 00:20:54.640 --> 00:20:56.160 Pretty cool, Pretty cool. 398 00:20:56.799 --> 00:21:00.720 How is the integration of this library with other form 399 00:21:00.799 --> 00:21:03.559 controllers and react, because at the end of the day, 400 00:21:03.599 --> 00:21:09.200 this is an input, right, It's just receiving and outputting 401 00:21:09.480 --> 00:21:10.480