Learn how to process and transform static HTML in a React application using rehype. We'll learn how to set up a unified pipeline using rehype plugins, add dynamic IDs to all of the headers, create a table of contents based on those headers, and add bookmark links like on GitHub. Demo Starter https://github.com/colbyfayock/demo-html-posts-starter 🧐 What's Inside 00:00 - Intro to transforming static HTML with rehype 00:11 - Tools we'll use like rehype and Next.js 02:10 - Creating a new Next.js app from a Starter demo 04:25 - Starting a unified HTML processing pipeline with rehype plugins 08:36 - Filtering and working with a syntax tree with unist-util-visit 10:59 - Adding dynamic IDs to H2 headers with parameterize 13:35 - Rendering a dynamic table of contents based on static HTML 15:18 - Adding bookmark links to each header 22:00 - Outro ⚙️ Demo Code https://github.com/colbyfayock/my-rehype-html/ 🗒️ Read More https://spacejelly.dev/posts/how-to-add-a-dynamic-table-of-contents-to-static-html-in-react-with-rehype/ 🔔 Subscribe for more tech and developer videos null 🐦 Get updates straight to your Twitter @colbyfayock https://twitter.com/colbyfayock 📸 Catch the next stream live on Twitch @colbyfayock https://twitch.tv/colbyfayock ✉️ Or a newsletter right to your inbox! https://www.colbyfayock.com/newsletter/ 💝 Sponsor me for more free content like this! GitHub: https://github.com/sponsors/colbyfayock Other: hello@colbyfayock.com 👨‍🚀 Brought to by colbyfayock.com https://www.colbyfayock.com/ 🎥 Want to know what A/V equipment I use? https://www.colbyfayock.com/uses 🧰 More Resources Rehype https://github.com/rehypejs/rehype Parameterize https://www.npmjs.com/package/parameterize Rehype React https://github.com/rehypejs/rehype-react 🎼 Music Music from Uppbeat (free for Creators!): https://uppbeat.io/t/bosnow/night-freedom License code: B5FIAZNHKJT1FTJX #colbyfayock #react #html #nextjs #statichtml #jamstack #webdevelopment