Block Editor

Notion style AI-powered block editor build with Tiptap + Vercel AI SDK + Shadcn + Tailwindcss.

Demo: https://phyohtetarkar.github.io/tiptap-block-editor/

Usage

This is just a template Editor in React. You can clone the repository and copy components as you need. This template used Gemini as AI model provider. You can change any provider supported by Vercel AI SDK models.

// These styles should be imported inside root layout
import "katex/dist/katex.min.css";
import "./components/editor/styles/block-editor.css";

import { BlockEditor } from "./components/editor";

export default function App() {
  return (
     <BlockEditor />
  )
}

All the editor specific codes are inside /src/components/editor .

.
├── src                   
│   ├── assets     
│   └── components    
│       ├── editor        
│       └── ui       
│   ├── hooks     
│   └── lib       
└── ...

Required .env variables

VITE_GOOGLE_GENERATIVE_AI_API_KEY= # Your Gemini API Key

Run locally

pnpm install
pnpm run dev

License

Licensed under the MIT license.