Build a Rich Text Editor in Next 13 Tutorial

Check out my web dev courses below🔥
developedbyed.com
-------------------------------------------------------------------------------------------------
Have you ever wanted to implement a rich text editor in your react or next 13 apps. You can do that easily with TipTap and react hook form. In this tutorial I will show you how you can build one out that looks and copies the same styles as shadcns UI.
-------------------------------------------------------------------------------------------------
👨‍💻Connect with me
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
-------------------------------------------------------------------------------------------------
🎶 Dope tracks🔥
Leavv - Roam chll.to/15c396e0
Leavv, Midan - Bloom chll.to/0b3ee665
Leavv, dennisivnvc - Coast chll.to/e77956eb
C Y G N - Sunset Drive chll.to/d66020b5
#react #tailwindcss #shadcn

[@therealdevopsintern]

You never cease to amaze me with your humor: "Do we have a sponsor for this video- No"😅😅

[@pirateg3cko]

*cease to amaze

[@games4fun538]

WHERE IS THE GITHUB REPO PLEASE SHARE

[@licokr]

When I think of implementing rich editor, my headache starts but wow, of course, there are still many things to do but it's way easier than I thought. There are so many libraries. I learned a lot. I also didn't know hook form validation with zod. Awesome, thank you!!

[@joaomarcelofurtadoromero8277]

such a glow up of a content, fr man, been watching you for a while your videos deserve recognition. You sure have mine, congrats

[@misap123]

If youre getting a error like context can only be used in client components or useform is not a function, add "use client" to the form component and the page.tsx

[@NlaakALD]

You definatly know what your doing but you where zipping around the editor so fast and the right side of the code was cutoff that i could not follow. I tried going to your github as last resort and out of 75 repositories did not find this one.

[@frackinfamous6126]

On IPhone or mac screenshot and select text. On windows, screen shot, get windows power tools. Press ‘win shift t’ . Watch video at 75 or 50% speed on parts that are too fast. Hope that helps some. 😀 Also with typescript, VSCode and copilot the line will usually autocomplete once you type a few words.

[@selfmotivation77736]

❤️Thank you for teaching us how to make our content better ❤️😊

[@joaofreire1478]

Great videos! Nice work. Any particular reason you're not using Yup schema for validations?

[@datoubi]

Hahahahahaha. Do we have a sponsor for this episode? No. Absolutely hilarious

[@sherumov6472]

Some fixes: Do not import extensions like heading if you are using starter kit, you should configure all extensions right in the starter kit, because if you adding seperate extension it creates duplicates and you're getting this error - [tiptap warn]: Duplicate extension names found example: extensions: [ StarterKit.configure({ heading:{ HTMLAttributes: { class: 'text-xl font-bold', levels: [2] } }, ...

[@GuilhermeSiebert]

Awesome contento man!

[@scientificshiv]

This is amazing!

[@emmanuel8944]

Please can you make a tutorial on how to integrate Redux toolkit with Next13 app directory. You could make a simple e-commerce cart. Much love from Nigeria! all my developer friends are your fans, Ed❤

[@DejayClayton]

Will the text editor be so rich that it can lend me money?

[@maskman4821]

Great intro 👍

[@matt3441]

Is the course coming out anytime soon?

[@dannjohnrem]

Question why we don't need src directory in next js?

[@nmdpa3]

Nice overview thanks. Struggling to clear the rich text field after a form submit. Anyone have a solution for that?

[@stanleychukwu7424]

men. you're such a funny guy, almost all of your intro's are funny!! what a guy, you're wife is damm lucky!

[@user-bx3jy6xe2s]

I like your desktop wallpaper. Can you please share the source?

[@aarongregory1806]

Nice video! I noticed the validation doesn't truly work because the output of the editor will not be the length you would expect, unless you are taking into account the format it's returning. You would have to return `editor.getText()` instead of `editor.getHTML()` and of course this results in you not receiving the formatted text which defeats the purpose. You can see this at the 09:45 mark where there are only 2 characters in the input when the constraints specify at least 5, and the same later when the maximum character length of 100 is exceeded with less visible characters than that. There's ways around it though, of course. Unless I've missed a section of the video that addresses this :D

[@migaratennakoon5439]

Thank you.

[@pushkarkathayat7893]

is it possible to add images & videos?

[@user-lz4uw5vu6o]

Thank you

[@jellyfish1772]

Hihi.learned a few stuff while smiling.❤

[@user-kj4ii8tt6n]

Can u show the source code ?😃

[@timeforrice]

Has the course he motioned in the video out yet?

[@melvinrex9151]

Can you share the code

[@YannAriell]

Does it exist for react native?

[@abdallahissaal-kass9092]

which font are you using for vscode? I loved it.

[@aarongregory1806]

Looks like Fira Code to me

[@irfansaeedkhan7242]

please make video on lexical rich text editor with mentions and hashtags please

[@Ashish_singh_dev]

How can we make this with editorjs?

[@memesserfully]

Please bro, would do a tut on how to upload a file and/or an image file wih next js 14 server actions, typescript, shadcn ui, tanstack and postgressql (supabase), using zod for validation along with react hook form, the goal here is to build an onboarding page that contain multistep form to onboard the user. getting their information to update several db tables related, like profiles, subscribing to tags, etc... Plesae I really like the way you present your videos very informative

[@abuzeralaca]

Hi thanks for sharing this great vieo. Can you share the source code as well?

[@ameykhandar889]

Hello, Could you please create yarn or npm tutorial

[@ivankraev4264]

Can you please share the code ?

[@eliaspaulinho8435]

magnificent!! would have been even better with a link to a repo for this code 😅

[@developedbyed]

whoops added it now!

[@hubesh716]

need redux toolkit tutorial plz make a playlist or a complete video

[@pranshusati5818]

How to integrate it with formik?

[@dwisetyoaji5007]

Anyone know how to upload an image to a storage like S3 in Next, Is it same like form?

[@vampirekabir]

looking for it for a long time, everyone skips this critical feature, all youtuber are similar

[@LotsOfFunyoutubechannel]

Next 13 tutorial in 13 min

[@ilkou]

great video! btw already has a in it

[@developedbyed]

Whoops! Well done for catching that!

[@ahmeddotgg]

But why chadcn using both in his docs 🤔

[@euanmorgann]

@@ahmeddotgg is actually a from react-hook-form. It doesn't render a native tag but just provides context which react-hook-form uses so you do need both

[@vzdev9978]

How about lexical?

[@anshulsoni653]

Small components tutorial are better bring em

[@badr9032]

please put source code next time

[@64revolt]

Do we have a sponsor for this episode? No. HAHA

[@tareqmahmud3902]

you do somewhat look like jack harlow you know that right? Btw, good content!

[@andrewsjose4228]

0:04 😂😂

[@andrewwoodward5274]

My bulletList and orderList is not working. Everything else works

[@janipartanen3162]

you just have to pay $149+ VAT every month for tiptap so that your app doesn't pause every now and then 😅

[@apjs77]

source code please ?

[@monstarbog3049]

code source?

[@games4fun538]

PLEASE REPLY WITH A GITHUB REPO WITH CODE PLEASEEE

[@2an_sound]

the prints. I'm dead.

[@dude101cool]

how do i clear the tiptap form after submit

[@arupdey5811]

same question. During edit, I found this issue. Once I prefill the data and submit it, the editor data is not getting cleared.

[@nmdpa3]

@@arupdey5811 Same question here as well, have tried everything I can think of and no luck.

[@nmdpa3]

@@arupdey5811 Found it...look at react "useImperativeHandle" and "forwardRef" ...works great.

[@user-zw9st4px2q]

which vs code theme

[@xen.sky_8674]

Tokyo Night

[@milodevs]

Sure they are 😏

[@senorfavorita7457]

What about lexical? Have anyone tried lexical before?

[@nagato6819]

I'm thinking to try implement, if you already try it please let me know how you find it, good, bad, not good and not bad ?

[@senorfavorita7457]

@@nagato6819 I'm planning to do it soon. Maybe next week. If i did, I'll paste the repo-link here...

[@nagato6819]

@@senorfavorita7457 okey thank and if I implement it, i'm gonna past the repo link here for you.

[@arukigaming2621]

source code please

[@__________________________6910]

Hello there, how are you ?

[@anshulsoni653]

Hmm

[@sanjeevkumar-wf5lr]

First viewer of this video 😊

[@kacperkepinski4990]

zooming code is annoying

[@games4fun538]

PLEASE

[@amritadas1128]

Hiii

[@vinniv6806]

yeah... tiptap is asking for 999$/month :) so .....

[@douglascolin3562]

Right. And the free tier is limited to one user, so for personal projects only. Alternatives that I've worked with (free & open-source): Plate- a plugin system for Slate RTE; headless but has shadcn components if you'd like. Powerful, feature-rich, pretty; documentation can be challenging, boilerplate. MDXeditor- Markdown editor with WYSIWIG formatting built on Lexical (from Meta so seamless with React). Good docs, lighter package. Less boilerplate, simpler to work with. No shadcn but it looks good. Toolbar features images & code editing plus live coding environment.

[@codeneverlies1010]

I am first

[@developedbyed]

blame serverless cold boots ✌️

[@NickAtNet]

NSFW

[@klkiessertggksmsmsjfldd]

english humor