Tiptap Editor For React and NextJS: Advanced Quick Start Tutorial

00:00 Intro: using the tiptap template from other projects
02:26 The tiptap templates github repo and .npmrc file
05:18 Code walkthrough of tiptap template
06:55 Dark mode
08:25 Needed changes for multiple editors per page
14:55 The extensions directory
17:10 Page router needs immediatelyRender false, SSR implications
19:51 The ExtensionKit ie extension config setup
22:45 Moving the template code into another project
32:20 Eslint and tsconfig changes for the template code
34:33 Next steps, notes on changing css and initial editor state, readonly
36:38 Using a .npmrc file from github actions, vercel
37:49 Page router differences, Server side rendering in page router

Tiptap is a rich text editor (WYSIWYG) for javascript and typescript which works with react and nextjs. This video demonstrates how to use the template example project by modifying and copying the code into another codebase. Also discussed are special considerations for when using the tiptap template from the nextjs page router and in other contexts with server side rendering (SSR). Nextjs is not required to use the template code but tailwind is required for the template code. If tailwind can't be used as a build step from your target project, then another option is to create a new npm package. Use a tool like rollup to create a package which exports the BlockEditor component (https://ryanschiang.com/rollup-js-tai.... You can then import the BlockEditor component without needing a tailwind build step.

Tiptap Documentation:
https://tiptap.dev/docs/editor/gettin...

Discord:   / discord