Shreya Taneja, Project ManagerNot four minutes of typing. Four minutes of watching an AI tool do it.
The app is an event management system. It has a notes section. That section is a plain field today. No bold. No lists. No images.
Paste formatted content into it and everything flattens. Headings become sentences. Lists become runs of text.
This walkthrough fixes that on a live app.
Nothing is mocked. The app is real. The notes save.
Run time is six minutes. The install itself takes under four.
Rich text editor integration used to mean reading docs. You would wire the component. You would handle the paste. You would test the toolbar.
Now the quick start gives you a prompt. You copy it. Your AI tool reads it and writes the integration.
You still do two things by hand. You create the license key. You paste it in. That is the whole manual part.
There is a manual walkthrough too, if you would rather see every line yourself. Both routes end in the same place.
This is the part most people miss on first watch.
Every toolbar feature is toggled from the license key. At runtime. In the dashboard.
In the video, 55 features are on. Turning one off is a switch, not a deploy.
That matters more than it sounds. Your writers want tables. Your comment box does not. Same package, two keys, two feature sets. No conditional rendering in your code.
Create your first key on the license key page.
The editor stores structure. Not a flat string.
Paste a heading and it stays a heading. Paste a list and the bullets hold. Drop an image in and its alignment travels with it.
That is where the time goes back. It is not the toolbar. You stop owning the path between what someone types and what a reader sees.
That path is where the bugs live. A stray tag. A list that lost its bullets. A quote that arrived as plain text. Every one of those is a ticket.
bash
That is the list. There is a Laravel package on Packagist as well.
React and Next.js. Vue. Angular. Svelte. Plain JavaScript. Laravel.
The quick start has a prompt for each one. Pick yours, copy it, paste it into your tool.
The editor runs on Lexical, the editor framework from Meta. It ships from npm.
Notes are the example here. They are not the point.
Anywhere a user types more than a sentence is a candidate. Event descriptions. Internal notes. Ticket bodies. Product copy. Help articles. Comments.
If the field currently strips formatting, someone on your team is already working around it. Usually by pasting into a doc first, then pasting the result, then fixing what broke.
You can build one. Teams do.
You will need paste handling. Then image upload. Then alignment. Then undo. Then a sanitiser, because someone will paste from Word. Then mobile.
None of that is hard alone. Together it is a quarter of engineering that is not your product. And it never quite finishes, because there is always one more format someone pastes.
Rich text editor integration through a package moves that work off your board.
Do I have to rewrite the form? No. You swap one field.
Will existing entries break? No. They render as they do now.
Can I change features later? Yes, from the license key, at runtime.
Do I need the AI tool? No. The manual route is documented.
Is there a free tier? Yes. Start there.
Minute one goes on the license key. Name it, pick your features, create it.
Minute two is the prompt. Open the quick start. Pick your framework. Copy.
Minute three is the AI tool working. You watch. It installs the package, adds the provider, and wires the component into the page you pointed it at.
Minute four is the key. Paste it where the tool asks. Save.
Then the editor is on screen. That is the whole clock.
They stop asking you for things.
No more "can you make this bold." No more "the spacing broke again." No more writing in a doc and pasting the result in and hoping.
They get a toolbar. Bold, lists, links, tables, images. Everything stays where they put it.
You get your afternoon back.
Open one old entry and one new entry.
Old entries render as they always did. Nothing migrates. Nothing breaks on deploy.
New entries carry structure from the first keystroke. Over a few weeks the field fills up with the second kind.
That is the migration plan. There is no cutover day and no backfill script.
The video sits above. Six minutes, start to finish, on a live app.
Plans and limits are on the pricing page.
00:00:00,100 --> 00:01:03,950 [Speaker 0] [soft upbeat music] Hey. Hi there. On this video, we are going to see, like, how you can use editor on different use cases. For, for here, we have a event management system where we have this on the front end that have the detailings regarding the, the event which is happening, and we have a text which is... which can be, like, made more richer over here with a lot of images and stuff. So if I just go back here, so on this section, let's say we'll start with the note section over here. So, like, if I have to create any note, this is where I have, like, no options, like the bold and stuff. And if I see my... the existing note over here, I do not have anything to manage over here. So as an example, if I have to write some rich content, let's say we'll just open this example, and we'll grab some content here. And if I go and paste this content over here, this is how it looks. So this is, like, all normal text, which is just copied and pasted over here. Have no leverage of, uh, keeping the, the text and the content the way we had copied from here. So I'll do one thing. I'll just... we'll just 1st see how we can integrate editor. So for integrating the editor, 00:01:05,820 --> 00:01:07,520 [Speaker 0] let's do that part. 00:01:08,640 --> 00:01:41,360 [Speaker 0] So once you sign in into the portal there, this is where you will be landing in. And this is just for the demonstration purpose, like how editor can work for you. This is where we have the toolbar there. But this is not the, the place where you actually need to use this, because this is a demo mode for just for the demonstration purpose what editor can do for you. So once you be a part of, or be a user on this particular system, the, the editor SDK, now you have your license key section there. You can create yourself a license key. Let's say we have this as Eventide. So just name it as 00:01:43,080 --> 00:02:03,660 [Speaker 0] Eventide. And all the features that you are currently seeing over the editor can be managed on the runtime right from here. You can enable and disable these features. So for me, it's like 55 features are turned on over here. I'll just create the license key. [upbeat music] So this is my license key over here. If you just open, open this up, you'll see the key. I'll just copy the key there, and 00:02:04,880 --> 00:02:08,640 [Speaker 0] this is the, the creation of the key section. And then you can also go to the live demo 00:02:09,660 --> 00:02:21,280 [Speaker 0] or quick start. Over the quick start, you can see, like, we have these language support as of today. Now, as this is a Next.js project I'm showing you, so I can just simply copy the prompt from there and then give it to your 00:02:22,920 --> 00:02:36,320 [Speaker 0] AI tool. Or even though if you want to do it yourself, we have a different video where it's manually shown there as well, so you can do that part. And it's, uh, 201, so we just try to plug in the editor over here. Let's see how long it takes. 00:02:43,920 --> 00:02:49,260 [Speaker 0] [upbeat music] 00:02:52,120 --> 00:02:56,120 [Speaker 0] Okay, so it, it actually have plugged in the editor over here. Now we have to paste our key. So 00:02:57,440 --> 00:03:03,860 [Speaker 0] just grab your key, which is there on the license key section that you had created. I'll just copy the key here and then 00:03:06,700 --> 00:03:09,500 [Speaker 0] paste the key over there. 00:03:12,440 --> 00:03:17,120 [Speaker 0] [upbeat music] Okay, so now where we need it, we need it on the note section. Just simply go, 00:03:19,080 --> 00:03:20,420 [Speaker 0] call to be shown over here. 00:03:24,400 --> 00:04:02,640 [Speaker 0] [upbeat music] Okay, so right over here, you can see, like, we have, uh, the editor up and working here, which is, like, only in, like, around 4 minutes or less than 4 minutes that we have, uh, the editor up and running right over here on the note section we have. 00:04:03,840 --> 00:04:06,220 [Speaker 0] So let it still, it complete, and then, yeah, we will 00:04:07,800 --> 00:04:14,060 [Speaker 0] check for the other sections there. You can, you can also see, like, this is also there on the editing of our notes. So we have this part over here. 00:04:15,200 --> 00:04:25,700 [Speaker 0] [upbeat music] 00:04:31,120 --> 00:04:57,260 [Speaker 0] So if I go and now copy the same content again and then try to paste it over here, so this is how that starts to show up, because it actually carries whatever HTML is there running behind that scene. So it carries everything in the exact correct format, which is... which was there already. So I'll just move it to the, the multiple lines over here. So this is how we have. Now if I'll just have it, let's say, copy comment, 00:04:59,540 --> 00:05:34,860 [Speaker 0] and I'll add this note right over here. So now I have this note which is there. Now if I just open this up, you can see I have the same exact replica of the theming and the, the way the, the content was written earlier. So this is how it shows up there for you. So this is how you can sh- use it for any of your notes. It is, like, less than 5 minutes of a process where you can have a full and up integrated, uh, editor right into your system because we handle it all on our end. So now we just tap, click there, and then the editor is ready for you to keep working there. Now even though if I have to take copy and paste the content, let's say if I just 00:05:37,820 --> 00:05:59,610 [Speaker 0] want to copy this content here and move it to the editor, I just go and write it up here. So this is also grabbing the images which was there in the path, so that's also here. And, and you can, you can squeeze this image. You can move it, like, center line, left line. You can also do a lot of things with that part. So this is how you can keep on adding your different, different notes there. 00:06:01,880 --> 00:06:23,410 [Speaker 0] [upbeat music] So that was a quick demonstration of, like, how you can integrate editor to any of your, any of your web applications. And we are covering multiple use cases that we're going to show on this series of the next videos that we'll be posting. Thank you for watching this one. We'll catch you on the next one. [upbeat music]
Around four minutes in this walkthrough. You create a license key, hand the quick-start prompt to an AI coding tool, and paste the key in. The manual route is documented if you prefer to write it yourself.
Yes. Every toolbar feature is toggled from the license key at runtime, from the dashboard. No redeploy. 55 features were enabled in this demo.
No. You replace one field. The rest of the form stays as it is, and existing entries render exactly as they do now.
React, Next.js, Vue, Angular, Svelte, plain JavaScript, and Laravel via a Packagist package. The quick start has a setup prompt for each.
Next.js, React, Rich Text Editor, Integration, AI
Publish a blog post with a plain textarea, then republish the same post with a real editor. Formatting survives, images align, and the AI generates a header image without leaving the page. React, Next.js, Vue and Angular — about 10 minutes of setup.
What is Eddyter? A modern AI-powered rich text editor built for developers. Install in 3 steps, skip the infrastructure, and ship faster. Full 2026 guide inside.
