Notion-style Rich Text Editor

Novel is a Notion-style WYSIWYG editor with AI-powered autocompletion. Built with Tiptap + Vercel AI SDK .

{"type":"doc","content":[{"type":"youtube","attrs":{"src":"https://www.youtube.com/watch?v=hP0TcRcr95Q","start":0,"width":640,"height":480}},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Installation"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"npm i novel"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Usage"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"import { Editor } from \"novel\";\n\nexport default function App() {\n return (\n <Editor />\n )\n}"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Features"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slash menu & bubble menu"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI autocomplete (type "},{"type":"text","marks":[{"type":"code"}],"text":"++"},{"type":"text","text":" to activate, or select from slash menu)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image uploads (drag & drop / copy & paste, or select from slash menu) "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add tweets from the command slash menu:"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mathematical symbols with LaTeX expression:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"math","attrs":{"latex":"E = mc^2"}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"math","attrs":{"latex":"a^2 = \\sqrt{b^2 + c^2}"}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"math","attrs":{"latex":"\\hat{f} (\\xi)=\\int_{-\\infty}^{\\infty}f(x)e^{-2\\pi ix\\xi}dx"}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"math","attrs":{"latex":"A=\\begin{bmatrix}a&b\\\\c&d \\end{bmatrix}"}}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"math","attrs":{"latex":"\\sum_{i=0}^n x_i"}}]}]}]}]}]},{"type":"image","attrs":{"src":"https://public.blob.vercel-storage.com/pJrjXbdONOnAeZAZ/banner-2wQk82qTwyVgvlhTW21GIkWgqPGD2C.png","alt":"banner.png","title":"banner.png","width":null,"height":null}},{"type":"horizontalRule"},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Learn more"}]},{"type":"taskList","content":[{"type":"taskItem","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"type":"text","text":"Star them on "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/steven-tey/novel","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"}}],"text":"GitHub"}]}]},{"type":"taskItem","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"type":"text","text":"Install the "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://www.npmjs.com/package/novel","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"}}],"text":"NPM package"}]}]},{"type":"taskItem","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"https://vercel.com/templates/next.js/novel","target":"_blank","rel":"noopener noreferrer nofollow","class":"text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"}}],"text":"Deploy your own"},{"type":"text","text":" to Vercel"}]}]},{"type":"taskItem","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"type":"text","text":"Demo "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://novel.sh/","target":"_blank","rel":"noopener noreferrer nofollow","class":null}}],"text":"Text Editor"},{"type":"text","text":" from Novel"}]}]}]},{"type":"paragraph"}]}