Mrina Sugosh 5:43
Awesome. Thank you so much, Brian. And that’s really exciting to see all of the stuff CFE is doing, so definitely check that out. So hi, everyone. I’m Mrina. I am a Developer Relations Manager at both TinyMCE the Husky mascot, and CKEditor, the raccoon mascot. And I’m here to talk about WYSIWYG and WYSIWYG editors. So the agenda today looks a little bit like this, let’s let’s define what it was even for those of you who are not aware of what this acronym is, I’ll talk to you a little bit non technically about what the history and origin is to keep it fun. And then let me give you some examples, some features of editors today. And then I’m going to walk you through a few case studies that we’ve done at bow tiny and CK, on how this actually is interesting and valuable for developers to learn about. And then finally, I’m going to talk to you about why it matters, whether it’s your front end developer, full stack developer, I’m going to tell you exactly why it matters to you to learn about WYSIWYG editors, and then I’m going to talk to you about what’s next with our editors specifically. And you know, we’ll open it up to some questions. And I’m sure Brian, and I will have a good chat about that after as well. So if all of that sounds good, I’ll get started. So WYSIWYG, let’s kind of start with the basics right WYSIWYG that stands for What You See Is What You Get. And it refers to a system in which content specifically, let’s say text and graphics, like images that you’re seeing on the screen can be edited in a form, like closely like a resembling appearance when it’s printed, like with a printer, or when it’s displayed in like your website. So or even the presentation, right, if you’re using Google Docs. Now, this kind of intuitive approach of exactly what you’re typing is what you get is very different from like a coding approach or a markup approach where you’re not sure what the outcome is, until after you’ve executed or rendered it. This is a cool image that I took from a recent trip of mine in Iceland. And you know, you can see that under the image, I’m giving it a caption saying this image is very pretty. And that’s kind of exactly if I wanted to maybe publish this onto a document or save it. My hope is the next time I pull this up, this is exactly what I would see. So that’s kind of it and why does this matter to you if it matters, because you probably are using WYSIWYG editor in your day to day life, in some form some manners, some fashion, right? If you’ve seen if you’ve used Shopify, which most of us have through online shopping, this kind of paragraph that you see over here, that is actually tiny MCE that you’re looking at, and that specific editor, so the thing that you used to put in your description, maybe if you’ve used Airbnb, maybe if you’ve used a WYSIWYG editor on, let’s say, LinkedIn, you know, MailChimp, there’s so many other examples, you’ve probably just come across a WYSIWYG editor that’s kind of embedded into a web application. And it’s really important because it kind of is the way you as a user and a creator, or your users, as a developer interact with your site, or your specific tool. So very important tool that often gets forgotten by a lot of developers, but I think is very interesting. So now let’s go back a little bit in history, right? The term this term WYSIWYG was actually coined in like the 1970s. And it kind of describes some of the earlier word processors that came about at that time. So before WYSIWYG, text editors were actually just limited to inserting plain text so there was no formatting the bold, italic, underline the thing that you say, see, on the leftmost side, it says Bravo editor, in bold and then center with like this heading one to like text, all of that did not exist. It was just plain simple text that you’d see. So the first was the wig editor. As you see the Bravo editor was developed in the early 1970s, by Xerox Alto system. So it actually allowed users to see sort of formatted text displayed in different fonts. There were margins in the pages and there were different sizes. And but some, but in the Bravo editor, the screen resolution didn’t exactly match the printer output, but at least you got a certain sense of like, this can be altered to close enough to what I see. And then in the 1980s and 90s, Microsoft and Apple came around with a tree UI or graphical user interface. And that kind of made WYSIWYG editors easier to use, because you had the ability to click buttons, and you had menu options and things like that. So after that, the adoption of WYSIWYG accelerated AP because, you know, the world wide web and the internet happened. And then you got this thing with HTML editors. So even like non technical people who are using CMS is could start publishing content online, using these early HTML editors. And that’s kind of like how WYSIWYG has kind of transformed over time. So what you think of as WYSIWYG rich text editor today is actually dates all the way back to 1970s. And has a long form history of just growing its knowledge. And the term was evoke has one more interesting piece of history. So there’s a comedian called Flip Wilson, who brought the saying what you see is what you’re gonna get. And she brought brought it to popularity in 1970s ish, with their drag persona, Geraldine Jones. So because of the Wilson the following decade, we saw a lot of timelines and a lot of things. And that you could say that a lot of people in the computing world, especially developers, used to listen to their music. And you know, when they started doing something with what they see is what they get, they kind of ended up naming that. And then it’s also said that there’s some there’s even like Larry Tesler, who invented I believe, copy paste. They also said something like what is what you see on the screen should be what you get when you print it. And given that and a number of other players, it seems like the term was eventually coined around what you see is what you get. And we never know exactly who coined the first term. You know, there’s different examples. Some say it’s like the founders of Bravo three with John Seybold. Some say it’s Larry Tesler. But we really never know who the true origin is. But it’s really cool to see like how almost a pop culture phenomenon ended up influencing this very popular term. And it has a lot of history.

Mrina Sugosh 12:41
So I hope that was fun. But let me get into a little bit more of examples of WYSIWYG that you might see today. So some of the more popular cases, and the most probably basic examples is word processors like Microsoft Word, or Google Docs. And these are some of the more first practical applications of WYSIWYG that allowed documents to be formatted and edited visually, I think I believe most of us would have used some format of Microsoft Word or Google Docs at some point in our lives, especially if you’re watching this webinar, right. And you have a you have edited your documents and formatted them visually. Now what if you wanted to take that and put it into a web application? Well, then that’s what kind of website builders and CMS has came along. And these, you know, platforms like WordPress, Drupal wigs, they sort of incorporate some of these with the WYSIWYG editor. So content can actually just be added without coding, it’s pretty great because, you know, you can’t expect all of your content creators and your end users to know how to code these things. In fact, Drupal is default editor is ck editor, which is highly customizable. And we’ll get into that a little later. But, you know, it’s kind of important to see like how the needs that we had with word kind of evolved into something we would need within textboxes within websites. And they also are now in almost every day or applications. So if you’re using confluence, if you’re using dev two, you’re using Shopify. Using Monday, you know, or even your emails, you’re probably using some sort of WYSIWYG editor, and ensure if you’re ever typing a piece of text, and there’s formatting options, there’s images, there’s links, that is a WYSIWYG editor, even if it’s a small balloon icon, and it doesn’t intuitively look like one. Like with the traditional toolbar, it is still an editor that allows you to edit documents online and collaboratively. And that’s kind of a key piece that we’ll be talking about later. So there’s also some community and forum software’s that use these sort of WYSIWYG editors LMS platforms, a lot of learning management says dentists and CRMs also integrate this into their content creation needs for their students or their customers. And the real key thing is it really enables text editing and formatting in a visual way across so many diverse platforms. And there’s not one singular application for it, which is what makes it such a versatile tool. And I think if you think about it from a development perspective, it’s very powerful, because think about the small component that can be used for such a variety of use cases, and it’s not siloed into one specific thing. So when you think of a WYSIWYG editor, what you typically think of, and what we simplify it down to almost is, you know, it has some fonts, it has some sizes, it has some colors. It can do bold, italicize, underline, we can insert some images, we can do tables, if it’s a little more advanced, we can add links. And then if it’s a little more advanced, we can export and to PDF, export and import from word sometimes export to HTML, it has some accessibility checkers, if it’s a little bit more advanced. And then you know, in some global text editors, it’s also right to left language support. So these are some of the basic features. But what I’d like to do is actually walk you through a case study with tiny to show you how the sort of basic features can actually save developers 1000s of dollars, and probably even more time building out some of these features that are just available out of the box and today’s editors, right? So even though they look very simple, trust me, they have taken years of development, and take years of maintenance. And sometimes you just don’t want to maintain the sort of simple pieces of components and code. So today, we’re gonna talk our first case study that I want to walk through is minute me and Tiny MCE. And what tiny homes so minute means a cloud based platform. And what they do is they work with helping customers with meeting management write their meeting management software. And they work with conflict. So the story behind minute me is they started with a complex construction project. And they wanted to streamline planning, conduct a follow up meetings. And as you can imagine, all of these meetings, have agendas, meeting notes, action items, which means there’s a lot of text and reference documents. And they wanted to put this all into one seamless sort of process and their app. As you can see, in the screenshot, I’m required WYSIWYG editor at multiple levels in multiple formats. And they were trying to build it out of the box. And they soon very soon realized that it was just simply taking a lot of time. And you know, there are a small development team. And this is not their main focus, right, they’re not developing a rich text editor. All they need is a rich text editor to fit their needs and to customize to their specific UI. So they actually realize that it’s going to cost them almost an extra $40,000 a year to build, you know, to Tiny MCE to build a rich text editor with their own nuances and custom custom components. And they decided that the cost to tie time to market plus the cost to develop new features just didn’t make sense. And that’s kind of when they came to Tiny MCE, they realized they could just save up on all this $40,000 per year, because they needed they didn’t just need, you know, your simple, bold, italicize, underline, they also needed to make sure that this component works across different browsers. They also needed to make sure copy pasting work trip list formatting, right if there’s a bulleted list that works, table formatting. So all of these are very crucial niche features. And if you’ve ever worked with HTML, if you’ve ever worked with the content, editable API that you know renders how things work on your web page, you know that it is a big pain and to have to develop these features individually as a developer can take a lot. So let’s go through some of their challenges, right? They didn’t have copies. So they had a basic editor. And I know everyone here is going to tell me that, hey, I can set up a basic editor. Cool. But can you copy base? Can you do lists, formatting, cross device compatibility? Can you make sure that what I see on Google Chrome is the same thing that I see on safari is the same thing that I see on Firefox and the same thing that I see on edge and that that is pretty tricky. Can you make sure that you know my table was formatted correctly and it’s the same across all these devices? And what if I wanted to add some of some more customizable or plugins is that possible? Okay, so what minime ended up doing is they took a look at Tiny MCE. And they said, all of these capabilities that we need in our editor are available out of the box, which means that we don’t have to code much other than literally add our in the JSON package, like add the plugin to our, to that tiny MCE editor and we’ll get it out of the box. So they actually, you know, the biggest demand was this power pace plugin, which is clean copy and paste. So imagine a lot of people who are planning and building in their end users are copying things from a Word document or PDF document, they want it to look exactly like it does on that document. And oftentimes, if you’ve copied and paste things over, the clipboard can mess it up. So what Tiny MCE is power paste does is it keeps it consistent between the two documents. And it’s a very, very powerful feature that, you know, it’s very hard to build, but fit in with Minimes capabilities. And they added it, they also add a table formatting, which basically is again provided out of the box with this rich text editor. There’s also an API for tiny MCE with custom plugins. There was cross device and browser compatibility. So you know, we have a team of engineers who are working constantly to make sure that this component renders exactly the same on different browsers, if not close to the same. And what happened with all of this is tiny, MCE just became economical with the cell focusing options, extensive API, some of the file uploading capabilities. And the biggest thing is it fit into the react based architecture that minute means application already had. So so the some of the popular frameworks that, you know, this platform integrates with is react, Angular view, blazers, felt, and so on, so forth. So when minime looked at it, they knew that they had the kind of support that they needed with this integration. And they immediately said, Hey, this upgrade is going to lead to a lesser number of support tickets, because the support is completely supported by the team. We don’t have to develop individual features for our editor. And the effort needed to make editor updates is dramatically less. So that is why MIT at me sort of chose that. And if you look at the end result, what ended up happening is they saved over 18 weeks of developer time. So if you have two weeks sprints, that’s over nine, Sprint’s right, that developers at this company would have been

Mrina Sugosh 22:44
spending developing like editors with this specific feature. And that is on like a, you know, good path, we don’t have any sort of that’s on a building out the critical path features. And we’re not kind of diving left or right from there. Also, there were five feature requests, like the power pays tables right out of the box. And there were seven open issues that they had with their existing editor like functionalities and rendering that were just avoided by switching over to an existing editor. So as a developer, this should speak volumes in terms of like, why we need to pay attention? Because sometimes, yes, the quickest answer and maybe even cheapest initially seems like, Let’s build an editor from scratch, by using sort of pre built editor that comes out of the box actually decreases a lot of valuable time for your developers, because they don’t have to spend a significant amount of their sprints developing an editor that already exists. And it also saves you from a lot of, you know, catching a lot of bug requests, and maybe even future feature requests, because that editor and their team is already probably building it out. And I talked about Tiny MCE a little bit and I talked about like this rich text editor that has some enhanced capabilities, right? It’s not just bold, italic, underline. It’s some very powerful things that enable the end user. Now I’d like to kind of switch content context and dive into another sort of case study that will show you the power of rich text editors, and maybe something even more of a buzzword today, right. The next question is how, you know, how does rich text editors keep up with technologies today and work with maybe web three? So mail chain and CKEditor actually sort of had this partnership, where mail chain created a secure decentralized messaging app. And they made it possible to communicate in a web three native way, right. So with their SDK is developers can usually add Like a web through email to their projects and applications, and allow their users to engage in the truly web through it. And that’s where CKEditor came in, because they needed a customizable editor that was very modular that would plug into their API’s and work with their look and feel of the product. So the the critical hurdle that I would say mail chain fit faced, was creating the sort of familiar writing and editing experience. So today, we’ve kind of taken for granted when we’re just typing an email, you know, that very familiar writing experience, we know exactly where the bold italic underline is. We know how the look and feel of the typing is. And as soon as we type we want it to render in that way that we see it, right. We want that WYSIWYG feeling. And that’s kind of what mail chain wanted. And the user adoption was slow, because their initial version of the app had just a basic text editor and did not have the seamless writing experience user expected with a email service. So this challenge brought them to seek editor. So they needed some advanced text formatting, they needed it to be modular, because it needed to work with their specific API’s, it needed to be customizable. And it needed to scale to suit a specific growing platform. And CKEditor came in perfect because it gave them that out of the box features for advanced text formatting, it also gives them a highly customizable UI to sort of match mail chains look and feel, without feeling like oh, this is just a rich text editor that they grabbed out of the box and copy paste, or you wouldn’t even know it’s a CK editor. It’s sort of just built in to match how that application feels. And the modular architecture. And I keep saying this, because, you know, our goal as a developer, especially when you become a little bit more of an advanced developer is to create products that can be used, modified and reused for your own purposes, right? It needs to be modular, and I think CKEditor is a phenomenal piece of code to just code base to look at, to see how they’ve constructed almost everything from even typing to even like everything as a plugin. Like if you even the fact that you’re typing a text is a plugin that you can customize. So if you if you want to change typing and CKEditor, you could do it, you could extend the plug in and do that. So it’s it’s that highly customizable and modular, which makes it incredible for something like a web three application. And of course, because it’s built with enterprises is mind like, you know, they work with some of the top customers out there, like Microsoft, Salesforce. So you know, it’s, of course, very scalable, and just made sense for mail chain to do that. And in doing so the end result was their users, the the adoption actually significantly increased, because the users were just like, hey, this is so improved writing and editing experience. And more importantly, it’s a very familiar writing and editing experience. And that is exactly why sort of mail chain was able to overcome their own UI adoption barriers. So it’s really important from a full stack and front end developer perspective, to as we’re adopting maybe these new technologies like blockchain technologies to remember the first and foremost principles of keeping things user friendly, and familiar and intuitive. So I think this really showcases these two examples, in my perspective really showcases how if you if you think about rich text editor, not just as an editor, but like as an extension of your users day to day usage. And you know, the fact that we’ve been using these kinds of technologies for years, if you will actually see the way in which some of these technologies can be plugged in and used

Mrina Sugosh 29:07
within your web applications. So I’ve given a lot of spiel, I’ve given a lot of examples. But why is this important for developers? Right, technically, why is it important to me as a developer? And I think the really key important thing is we need to remember that these are just not text input fields, right? text input fields, I agree. It’s an HTML thing I input, I can put it in my website. And it’s very easy to thing. But these rich text editors, actually sophisticated ecosystems of web development. And if you actually are able to understand one of these projects, you actually are able to get your head around some sort of very fascinating modular user interface that has like complex back end interactions that are almost happening in real time, right. As you’re typing on a web application, things need to change things need to adapt your day. any base, maybe that is connected needs to be updated. So it’s a very interesting niche of technology. So let’s let’s talk about these things, right? Why is it important for if you’re a front end developer, I think complex UI interactions is probably something you are dealing with on a day to day basis. And implementing formatting commands requires a very deep understanding of DOM, right Document Object Model, event handling and the execution of commands. Why via like, exactly the exact command API. And you have to do all of this while maintaining a reactive and consistent state across the editors. So the virtual DOM, of course, there’s like the usage of the virtual DOM for performance optimization. And you can use other strategies to synchronize the editor states and user action. But if you work and even contribute to the code base, or some of these front end technologies, you actually get a sense of how complex UI interaction interactions happen. And probably some of the best practices today in terms of state management and out there. The next biggest thing, if you’re a front end engineer, or developer is cross browser compatibility, I have been on an engineer in the past, and a full stack developer, and I know how hard it is to get your user interface to look exactly how the design team requested it across from, you know, Chrome to Firefox to Safari, and even though you’re coding it in JavaScript, and even though it’s like very similar CSS styling, there’s always going to be, you know, some of these specific DOM implementations and styling inconsistencies, the way in which JavaScript just executes in some of these browsers, right. And it’s really interesting how the rich text editor world has almost become an expert at this. And they figured out the intricacies of kind of adapting to the evolving web standards and browser capabilities. And they ensure that their component is honestly very solid across across different browsers, because that’s kind of what they’re selling at the end of the day. And then the third thing is content. editable API, I kind of mentioned this earlier. But at the heart of every rich text editor is this API, which is very powerful for in browser content editing. So it basically works with DOM manipulation, selection, Range Management, you could even have like custom text manipulation logic, which go a little bit beyond API’s limitations. But, you know, basically, you can handle nested lists and content inconsistencies because of this API. And it’s really incredible to learn about kind of how things work behind the end and how to do DOM manipulation. And it gives you like a very, very solid fundamentals. And then the final thing is, of course, custom plugins, if you are not interested in any of this, and you maybe are an introductory front end developer, just creating a custom plugin that works with one of these rich text editor contributing to their ecosystem is super valuable for you as a developer, because it will allow you to interact with all these pieces that I’ve talked about earlier. But also it will, you know, it will give you kind of a very nice introduction to event hooks, the isolation of like this plugin from the core editors, functionality and kind of seeing how things work, maybe even how things break each other’s functionality. And you will also realize how solid that core functionality is. Because even if your plugin breaks, sometimes the function editors capability doesn’t. So as a front end developer, that’s why it is extremely important to actually know about these things, because I think it’s best in class, in terms of how they work with the front end technologies. And then if you’re a full stack developer, well, security is of prime importance, right? Excess threats, CSRF threats, they’re not going away. In fact, they’re probably just increasing over time. And I think it is really cool to see some of the advanced techniques in terms of content sanitization, and other mitigation strategies that these rich text editors have started using to handle user generated content. And you know, if CKEditor is a Polish company, so how they’ve managed to help their users with adherence to data protection standards, so there’s GDPR. So I think it’s really valuable that you can learn a lot of things around security as a full stack developer by kind of contributing and learning and keeping up to date on the tech stack for rich text editors. Then there’s of course, the backend integration and real time collaboration piece. Looks like I forgot to put real time collaboration, but it’s a pretty big piece. And you know, real time collaboration is imagined. And I’m going to show you an example, just in a few minutes about taking, you know, this Google talks or notion like experience, from notion and Google Docs and putting it into your web application. And you don’t even have to write a single piece of code other than integrate this rich text editor and your application, right. And they’ve used some RESTful API design principles, authentication mechanisms, web socket, and real time communication to kind of pull it all together and give you that real time collaboration environment. And it’s very powerful if you think about it, because it’s not just a rich text editor. It’s a editor that you can collaborate on. And I think that’s really incredible. And something, you know, if, if you’re able to kind of fully understand the functionalities and features it, it’s very valuable as a full stack developer, because there’s nothing more nerve racking for us as web developers than something that’s happening in real time. And then there’s, of course, data serialization data storage. And you know, that’s kind of the final piece of the puzzle where there’s different strategies for serializing editor content and historical formats, whether it’s JSON, HTML, and how it’s going to get stored in your database schema design. So whether you’re storing it, or document based database, things like that, you will have to kind of know that. But I think there’s also a very niche piece on you can study kind of how they’ve learned to optimize data serializing. And fast retrieval. So it’s really interesting to study these things. So whether you’re a front end, developer, full stack developer, the rich text editors themselves, the components itself is so simple, yet behind the scenes, it’s so complex, and it has such valuable insights, and very cutting edge and best practices and best standards for development. So highly recommend checking these sort of open source data, open source projects, and getting a sense of how they work behind the scenes. So now, I’ve talked a lot about this. And, you know, let me talk a little bit about what’s next, which I think is, as we venture into, like, the world of web three and AI, I think we can anticipate that these WYSIWYG editors there today, you know, we think of them as collaborative, we think of them, What You See Is What You Get intuitive, but they’re gonna become smarter and more intuitive, if that’s even possible, right. And this is a screenshot of seek editors, collaboration features. So you can see two people working on the document. And I’m gonna demo this in a second. But you can also see their AI assistant is in work and the AI assistant was asked to write something. And today, the AI assistant is a kind of UI wrapper that connects to chat up at AWS, bedrock Azure AI. And it can write and make a suggestions and personalized tips. But in the future, I could even see it doing image generation, right, advanced content analysis, maybe automated SEO suggestions for some content creators, personalized design tips. So there’s, there’s so much more growth opportunity there just within the AI space. And then of course, within the web three space. There is very interesting ways in which you can think about digital content, kind of being simplified and moved into these spaces. And I just think overall, the future is just going to be simplifying this content creation,

Mrina Sugosh 38:58
content creation experience in very intelligent and context aware ways for the end user. So if your users, you know, have a need to write quicker, write better write faster, it’s going to be an assistant to them to do that. And that’s how I kind of see the future of WYSIWYG on tomorrow. With that said, I, of course, want to show you all a live demo. So here and I’m gonna ask Brian to actually post the CKEditor in link in the chat, but you can even go to the C CK or site. So here’s a quick example. So I’m on the way main site, this is accessible to everyone. And what you can do is you can go on the main site, click on real time collaboration, and it gives you this little link over here. You can copy the link, go to a new tab and then paste over and then you’re over here with this new link. So this person over here maybe disagrees that and data is not something they want, you will immediately see that that change has been made by Person B. And then maybe they disagree with that change, right. So you can track changes, discard changes, accept changes, so on and so forth. But I think what’s a little bit more interesting is let’s say I wanted a little bit more explanation. Or let’s say, I’m going to select this. Of course, it’s a live demo, it’s going to glitch out on me for a second. Let’s try this tab instead.

Mrina Sugosh 40:56
Let’s try this quickly. And let’s say we want to select this entire piece of text. And let’s say we would like to improve the writing, right? This is the AI system that’s currently connected to the chat GPT wrapper that has some pre built prompts within this document, so you can translate it, things like that. Or maybe we just want to change the style from legal to business. So maybe, maybe let’s select that change the style from legal to business. And then it does something for us. There’s some magic behind the scenes, you can insert it below try again, has a very familiar UI. But maybe we’ll want to say we write this in a legal tone. So you can even write like these custom prompts. And then you kind of get a new chance. And then let’s say you forgot what you wrote previously. And then you have some revision history over here and things like that. So it’s a very simple assistant. And you might say, Okay, that looks great right now. But why is this powerful, it’s because this really just integrates into your users workflow today, users, you know, who are writing this legal document, they’re already working through all of these steps. And you know, they’re collaborating on it, there’s two people, you know, making edits, giving feedback. And then, in the end, if they want to enhance the writing, they have writer’s block, or they need to change the tone slightly, and they just don’t have time, they can do that, you know, without having to go copy, paste it into chat, jpg or something, they can maybe even do that in their own private instance. So it’s really powerful in that sense. And you know, really just plugs right into their user flow, which is what is really big and key today about this rich text editor. So two powerful things. You can see this isn’t a website, right. I’m using this in a website in real time. And I’m able to use the ad assistant while collaborating with to three other people who are using the shareable link. So I think it’s a really powerful tool. And it goes just beyond the realms of what you see is what you get. Of course, let’s go into tinyMCE, if you go on their main website, I’ll ask Brian to post the link for this as well, you can actually see this. And again, it’s the same thing, you can choose to summarize a piece of content. And you’ll get some key points. And it does seem like a very basic UI wrapper on top that connects to charge UBT. But very powerful when in the context of your users and workflow, especially if they’re a content creator and writer today. So I will flip this back here. So Oh, no, if there’s anything you took away from this presentation and webinar today, it is that WYSIWYG is very powerful. It is a very key part of most of your users journeys. And you know, highly personalizing them simplifying content creation and enhancing it to work more intelligently in context aware, and to almost anticipate the needs of your users is where it’s going to be headed next. So I am renessa Goshen, that was my little spiel on WYSIWYG and why it’s important. Feel free to follow me for more technical details and articles and snippets on Twitter, LinkedIn, and feel free to follow us for tiny MCE and CKEditor content as well. And if you guys have any questions, yeah, I’m looking forward to chatting with Brian about that.

Brian Rinaldi 44:43
Thanks, Mrina. That was that, you know, it’s that was awesome because I have not really looked deeply at any of that editors in like, an a long time. I’ll be honest, I used to back in the day. I mean, I’ve been at this a long time. You know, and back. Many, many years ago, there wasn’t like a lot of great CMS options other than like big, expensive enterprise options. So like, I used to custom build like little content managers for like websites and stuff like that for clients. That was the last time I used to, I remember really digging into these editors, and it’s like, so much has changed, which is not surprising. I mean, it should have, right if it didn’t remain the same, we’d be in bad shape. But, but yeah, like, I hadn’t even thought about the fact that you might add an AI assistant in there. Yeah, that’s really cool.

Mrina Sugosh 45:41
I mean, I think adding an AI assistant is just sort of the first step right? There can be even image generation tomorrow. So that’s right.

Brian Rinaldi 45:50
Yes. So you know, with regard to the AI system, I’m assuming like, you know, this is something where you hook up, you have to hook it up with your own, like, account on one of those someone, other providers and things like that. So to say that, like, you know, any of those charges hit your account kind of thing. Is that? Is that how it is? It’s like, yes, that’s a setup where I tell it like all the details of how to connect to my, whatever API service I want to use.

Mrina Sugosh 46:19
Yeah, so essentially, like rich text editors, even like the data, you type into it, that we don’t like store any data, right? It’s a component. So at the end of the day, even with like your API, API key or anything, what it what it’s doing is it’s a simple UI wrapper. And we’ve taken care of all like the UI functionalities, like streaming your data, like if you connect to the completions API, and you know, you select stream, like, how do you want that input to be streamed so seamlessly back? Right, it has to render in a specific way. So we’ve taken care of all of the sort of UI considerations from that. But in the end of the day, you are connecting to your own chat, GBT instance, or Azure AI instance, or AWS, bedrock instance, right? If you’re using anthropic or one of those models, and you are using, you are developing this application, ideally, for your users who, you know, based on their needs, so we don’t dictate which model you connect to.

Brian Rinaldi 47:19
Alright, so in one of the exact like, examples that you gave you, you mentioned something about React framework integration, like is this is so what, what exactly is entailed in the React framework integrations, like I can embed, like, React components or something like that within the editing process? Or how does that work? Um,

Mrina Sugosh 47:41
well, essentially, you’re getting a React component, right? When you’re downloading the React integration, and you can embed that component, it’s composable. So you can embed it within your own application. So if you have a larger website, you basically take that react integration and put it into your existing app, and then you can pass it Okay. and stuff.

Brian Rinaldi 48:04
I get it, okay, my mind was going in the wrong direction. I was thinking more like, I wasn’t thinking like embedding the editor in the React application, I was thinking oh, can you do like, like MDX where you can have, if you have some kind of pre built components, you can drop into like the UI. And if you’ve ever used MDX, like, where it’s like I was thinking more like UI components, you could drop in to the editing blow

Mrina Sugosh 48:31
up, you can’t. So there is, as I said, it’s very highly customizable. So if you create like a plugin to be able to drop in something prebuilt or we’ve had users, you know, they’ve had like a prebuilt template. So a lot of our users like MailChimp, for example. They use the tiny MCE editor for you creating these pre built templates, advanced templates. So you have like high specific user dot name, and then you create a template for sending like a thank you email. And those sorts of templates is something you can definitely like embed into that component. Like pre okay. Okay,

Brian Rinaldi 49:10
that makes sense. So, so you can you can make a sort of like, they can kind of color outside the lines, too. Yes, too much. Yeah, that was, you know, back, back when I remember doing this, it was one of the problems just like, you know, you’d hand it over to some, somebody who’d like he’s like, you know, you have designed the site, and they’re like, throwing all different color text on there. And you’re like, what, we don’t want you to be able to do that. Yeah,

Mrina Sugosh 49:35
no, you can, you can make it as I think less custom. It really depends on what you want out of it at the end of the day. And, you know, as I mentioned, like, what’s very fascinating about something like CKEditor, for example, is even typing is customizable, right. You can literally say, you know, extend the Typing plugin, the prebuilt typing plug in that they provide and you can customize it render maybe longer. or shorter the cursor, or you wanted to like, Render, like a specific interval. So it’s very interesting to sort of play around with this and just understand how they work with a website in real time. And how customizable it really is today.

Brian Rinaldi 50:16
Right, right. Yeah, that makes sense. Because I mean, there’s some of the examples you showed, like, they look completely different. So it’s not even, you know, I, it’s not, you know, again, going back to my, my old many, many years ago, experience was always you can customize which buttons show up, but you couldn’t really change the look and feel of it. So it didn’t ever, like, feel like it was in your application. But these like, like the male editor you showed really blended nicely. Yeah. Look, like, you know, it’s not like I looked at that and go, Oh, hey, that CKEditor that’s tiny MCE. Exactly.

Mrina Sugosh 50:51
And you can do that, right? We have a lot of customers who do do that, who just want an a textbox out of the box, you know, out of the box. But we also have a lot of people who are like, no, we want this to have a certain look and feel and as they should. And we need to meet, you know, our users who are our customers at the end of the day, and we need to meet like some of these content creators and designers where they’re at, which is smarter, intuitive designs and technologies. And you know, we can’t sit there and be like, we’re giving you a text box, we also need to go with the time. Right?

Brian Rinaldi 51:25
Makes sense? Well, this is great. I really appreciate you coming out and talking to us about this. I think it’s like, you know, it’s it’s not a topic I see come come up that much. Which is why when, when new and new suggested I was like, Okay, I haven’t really explored these editors in forever. So like, it’s good to know, like, honestly, there’s serious, plenty of opportunities to like embed these kinds of things in your tooling, things a little bit easier. And there’s some of them that like I you know, you mentioned Dev and then like, I actually I’m curious really quickly, is there a way you can get it to support like markdown output or is it by HTML? Yeah.

Mrina Sugosh 52:04
So I believe CK editor actually has markdown support and Tiny MCE, well, you should keep calling us to learn about if we will have markdown support soon.

Brian Rinaldi 52:17
Okay, awesome. Well, I again, I really appreciate you coming out to speak. And that was really great. I’ve definitely learned a lot about it. So thank you.

Mrina Sugosh 52:29
Awesome. Thank you so much, Brian. And I really enjoyed my time here as well.

Brian Rinaldi 52:33
Well, thanks to everybody who came. I really appreciate you coming. Please join us. Next week Ray will be here. We’ve also got the week after we’ve got three events on that Tuesday, Wednesday and Thursday. So we’ve got a lot of stuff coming up the rest of the month. So please join us for those. Until then I will see you bye bye