Novel

Novel is a powerful, open-source, Notion-style WYSIWYG (What You See Is What You Get) editor component designed for developers. It provides a beautiful and intuitive editing experience out-of-the-box, complete with AI-powered autocompletions. Built on a modern tech stack including Tiptap, Next.js, and the Vercel AI SDK, Novel enables developers to rapidly integrate a feature-rich text editor into their web applications, saving significant development time. The editor's interface is heavily inspired by Notion, featuring familiar elements like slash commands for quick actions, a floating bubble menu for contextual formatting, and seamless media embedding. Its core strength lies in its native AI integration, which allows end-users to generate, edit, and refine text by simply typing '++' or selecting an AI command from the menu. This makes it an ideal solution for building next-generation content creation platforms, knowledge bases, or any application requiring sophisticated text input capabilities.

How to use Novel

Novel is a developer component, not a standalone application. To use it, developers need to install it into their project via npm.
1. Installation: Run the command npm i novel in your project's terminal.
2. Integration: Import the Editor component into your React/Next.js application: import { Editor } from "novel";.
3. Implementation: Render the component in your app: export default function App() { return ( <Editor /> ) }.
4. End-User Interaction: Once integrated, users can interact with the editor intuitively. Type / to open the slash command menu for inserting elements like images, tweets, or LaTeX formulas. To trigger the AI, type ++ followed by a prompt, or highlight text and use the AI options in the bubble menu. Images can be added via the slash command or by simply dragging and dropping them into the editor.

Core Features of Novel

• AI-Powered Autocompletions: Natively integrated with the Vercel AI SDK, offering intelligent text generation, summarization, and editing capabilities on the fly.
• Notion-Style UI/UX: Provides a familiar and polished user experience with slash commands, a floating bubble menu for text formatting, and block-based editing.
• Rich Media Support: Effortlessly handle image uploads via drag-and-drop or copy-paste. Embed external content like tweets directly within the editor.
• LaTeX for Mathematical Equations: Includes support for rendering complex mathematical symbols and formulas using LaTeX syntax.
• Developer-Friendly & Extensible: Built on top of Tiptap, a highly customizable and extensible rich-text editor framework for the web.
• Open Source: The entire codebase is open-source, offering transparency and the freedom to customize and contribute.
• Modern Tech Stack: Utilizes a robust stack including Tiptap, TypeScript, RadixUI, and Cmdk for a reliable and high-performance experience.

Use Cases for Novel

As a versatile component, Novel can be the foundation for various applications:
• Blogging Platforms & CMS: Build a custom content management system with a superior writing experience for bloggers and content creators.
• AI Writing Assistants: Create dedicated tools for copywriting, marketing, or creative writing that leverage the built-in AI features.
• Knowledge Management Systems: Develop internal wikis, documentation sites, or personal note-taking apps similar to Notion or Confluence.
• SaaS Application Features: Integrate into project management tools, CRMs, or customer support platforms to allow users to write detailed notes, descriptions, and messages.

Advantages of Novel

Novel offers a significant competitive edge for developers. It drastically reduces the time and complexity required to build a modern text editor. The pre-built AI integration is a key differentiator, allowing developers to offer advanced features without the hassle of setting up complex AI pipelines. Its open-source nature ensures there are no licensing fees and provides full control over customization. By using a proven and popular foundation like Tiptap, it guarantees a stable, extensible, and high-quality editing experience for the end-user.

Pricing and Plans

Novel is a completely free, open-source NPM package distributed under the MIT license. Developers can use, modify, and distribute it in their projects without any cost. However, it's important to note that while the Novel component itself is free, the AI features rely on the Vercel AI SDK, which in turn connects to various large language models (LLMs). Using these LLMs will incur costs based on the pricing of the specific AI provider (e.g., OpenAI, Anthropic) you choose to configure.