https://github.com/phyohtetarkar/tiptap-block-editor

Notion style AI-powered block editor.
https://github.com/phyohtetarkar/tiptap-block-editor

ai-editor block-editor notion reactjs shadcn-ui tailwindcss tiptap-editor wysiwyg-editor

Last synced: 6 days ago
JSON representation

Notion style AI-powered block editor.

• Host: GitHub
• URL: https://github.com/phyohtetarkar/tiptap-block-editor
• Owner: phyohtetarkar
• License: mit
• Created: 2025-02-02T09:09:29.000Z (7 days ago)
• Default Branch: main
• Last Pushed: 2025-02-02T10:10:41.000Z (7 days ago)
• Last Synced: 2025-02-02T10:27:00.196Z (7 days ago)
• Topics: ai-editor, block-editor, notion, reactjs, shadcn-ui, tailwindcss, tiptap-editor, wysiwyg-editor
• Language: TypeScript
• Homepage:
• Size: 1.63 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Block Editor

Notion style AI-powered block editor build with [Tiptap](https://tiptap.dev/) + [Vercel AI SDK](https://sdk.vercel.ai/) + [Shadcn](https://ui.shadcn.com/) + [Tailwindcss](https://tailwindcss.com/).

**Demo**: [https://phyohtetarkar.github.io/tiptap-block-editor/](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](https://aistudio.google.com/) as AI model provider. You can change any provider supported by [Vercel AI SDK models](https://sdk.vercel.ai/docs/foundations/providers-and-models).

```javascript

// 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 (

     

  )

}

```

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

```bash

.

├── src                   

│   ├── assets     

│   └── components    

│       ├── editor        

│       └── ui       

│   ├── hooks     

│   └── lib       

└── ...

```

Required `.env` variables

```bash

VITE_GOOGLE_GENERATIVE_AI_API_KEY= # Your Gemini API Key

```

## Run locally

```bash

pnpm install

pnpm run dev

```

## License

Licensed under the [MIT license](https://github.com/phyohtetarkar/tiptap-block-editor/blob/main/LICENSE).