Block editor in Next.js using BlockNote and UploadThing
In this video, we're going to create a Notion-inspired block editor in Next.js. We'll use the BlockNote library for the editor and UploadThing to support custom image uploads.
💾 Starter code: https://github.com/Built-With-Code/wy...
⏭️ Watch This Next: • Minimalist video player (Apple-inspired) u...
📱 Follow online: / built_with_code
Have a question about anything in this video? Drop it in the comments!
BlockNote: https://www.blocknotejs.org/
UploadThing: https://uploadthing.com/
⏰ Timecodes ⏰
0:00 - Intro + Preview
0:22 - Note headline title
1:51 - Block editor
6:23 - Dynamic importing
7:45 - Inline image uploads with UploadThing
12:02 - Cover image
15:03 - Button for toggling cover
18:08 - (Un)fixing image caching
18:58 - Cover image uploads with UploadThing
23:27 - Outro
-------------------------------
Welcome to Built With Code, a channel focused on intermediate/advanced frontend web development topics. Some of my favorite tools are Next.js, TailwindCSS, and Framer Motion. If you find value from the videos, a like and/or subscribe is much appreciated!