Learn Freak Build a Notion-Style AI Markdown Editor with Next.js, Claude, & Vercel AI SDK
Explore courses Sign in
Module 1: The Canvas Setup — Next.js App Router, Tailwind CSS, and React-Markdown Preview Panels.

Setting Up the Edge-Native UI Canvas

Overview
In this foundational lesson, we initialize our Next.js workspace and build a premium, distraction-free split-screen layout. We use Tailwind CSS for a dark-mode aesthetic and integrate react-markdown to transform raw text into formatted previews instantly.


Key Takeaways

  • Project Initialization: Setting up a modern Next.js App Router workspace with TypeScript and Tailwind CSS.

  • Dual-Column Architecture: Creating a side-by-side view featuring a borderless markdown textarea input and a rendered preview panel.

  • Markdown Parsing: Utilizing the ReactMarkdown component to dynamically parse headings, bold text, lists, and code blocks on the client side.

🔗 Lesson Resources