{"id":24970177,"url":"https://github.com/phyohtetarkar/tiptap-block-editor","last_synced_at":"2026-05-06T13:11:51.676Z","repository":{"id":275408539,"uuid":"925990037","full_name":"phyohtetarkar/tiptap-block-editor","owner":"phyohtetarkar","description":"Notion style AI-powered block editor.","archived":false,"fork":false,"pushed_at":"2025-02-02T10:10:41.000Z","size":1712,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T10:27:00.196Z","etag":null,"topics":["ai-editor","block-editor","notion","reactjs","shadcn-ui","tailwindcss","tiptap-editor","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phyohtetarkar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-02T09:09:29.000Z","updated_at":"2025-02-02T10:10:44.000Z","dependencies_parsed_at":"2025-02-02T10:37:22.477Z","dependency_job_id":null,"html_url":"https://github.com/phyohtetarkar/tiptap-block-editor","commit_stats":null,"previous_names":["phyohtetarkar/tiptap-block-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phyohtetarkar%2Ftiptap-block-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phyohtetarkar%2Ftiptap-block-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phyohtetarkar%2Ftiptap-block-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phyohtetarkar%2Ftiptap-block-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phyohtetarkar","download_url":"https://codeload.github.com/phyohtetarkar/tiptap-block-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246140589,"owners_count":20729802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-editor","block-editor","notion","reactjs","shadcn-ui","tailwindcss","tiptap-editor","wysiwyg-editor"],"created_at":"2025-02-03T15:56:31.049Z","updated_at":"2026-05-06T13:11:51.657Z","avatar_url":"https://github.com/phyohtetarkar.png","language":"TypeScript","funding_links":[],"categories":["Open source projects using Tiptap"],"sub_categories":[],"readme":"# Block Editor\n\nNotion 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/).\n\n**Demo**: [https://tiptap-block-editor.web.app/](https://tiptap-block-editor.web.app/)\n\n\u003cimg src=\"images/block-editor-2.png\"\u003e\n\n## Custom extensions\n\n- `code-block`: Syntax highlighted code block \n- `mathematics`: Mathematical symbols with LaTeX expression using [KaTeX](https://katex.org/)\n- `table`: Notion style table manipulation\n- `ai-writer`: Generate or modify contents with the help of LLM using [Vercel AI SDK](https://sdk.vercel.ai)\n- `mermaid`: Render diagram as a code using [Mermaid](https://mermaid.js.org/)\n- `chart`: Render charts using [Chart.js](https://www.chartjs.org/)\n\n## Usage\n\nThis 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).\n\n```javascript\n// main.tsx\n\n// import necessary styles\nimport \"katex/dist/katex.min.css\";\nimport \"./components/editor/styles/block-editor.css\";\n\nimport App from \"./App.tsx\";\n\n// Setup mermaid\nmermaid.initialize({\n  startOnLoad: false,\n  theme: \"default\",\n});\n\nmermaid.registerIconPacks([\n  {\n    name: \"logos\",\n    loader: () =\u003e import(\"@iconify-json/logos\").then((module) =\u003e module.icons),\n  },\n]);\n\n// Setup chart.js\nChart.register(/* register plugins */);\n\ncreateRoot(document.getElementById(\"root\")!).render(\n  \u003cStrictMode\u003e\n    \u003cApp /\u003e\n  \u003c/StrictMode\u003e\n);\n```\n\n```javascript\n// App.tsx\n\nimport { BlockEditor } from \"./components/editor\";\n\nexport default function App() {\n  const [editor, setEditor] = useState\u003cEditor\u003e();\n  return (\n     \u003cBlockEditor \n      onCreate={setEditor}\n      onUpdate={setEditor}\n     /\u003e\n  )\n}\n```\n\nAll the editor specific codes are inside `/src/components/editor` .\n```bash\n.\n├── src                   \n│   ├── assets     \n│   └── components    \n│       ├── editor        \n│       └── ui       \n│   ├── hooks     \n│   └── lib       \n└── ...\n```\n\nRequired `.env` variables\n```bash\nVITE_GOOGLE_GENERATIVE_AI_API_KEY= # Your Gemini API Key\n```\n\n## Run locally\n```bash\nnpm install\nnpm run dev\n```\n\n## License\n\nLicensed under the [MIT license](https://github.com/phyohtetarkar/tiptap-block-editor/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphyohtetarkar%2Ftiptap-block-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphyohtetarkar%2Ftiptap-block-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphyohtetarkar%2Ftiptap-block-editor/lists"}