Novel Howto
Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions for efficient and intelligent writing.
View MoreHow to Use Novel
Install Novel: Install Novel in your project by running 'npm i novel' in your terminal.
Set up environment variables: Set up the required environment variables: OPENAI_API_KEY for OpenAI integration and BLOB_READ_WRITE_TOKEN for Vercel Blob access.
Import Novel components: Import the necessary Novel components in your React code, such as EditorContent and EditorRoot.
Create editor component: Create a component that uses the Novel editor, wrapping EditorContent inside EditorRoot.
Configure initial content: Set the initial content for the editor using the initialContent prop on EditorContent.
Handle content updates: Use the onUpdate prop on EditorContent to handle changes to the editor content.
Customize appearance: Customize the editor's appearance using Tailwind CSS classes or your preferred styling method.
Implement AI features: Utilize the AI-powered autocompletions by configuring the OpenAI integration.
Add additional features: Implement additional features like image uploading or collaborative editing as needed for your project.
Test and refine: Test the editor thoroughly and refine its functionality and appearance based on your specific requirements.
Novel FAQs
Novel is a Notion-style WYSIWYG (What You See Is What You Get) editor with AI-powered autocompletions. It's built with Tiptap, OpenAI, and Vercel AI SDK.
Related Articles
Popular Articles
Microsoft Ignite 2024: Unveiling Azure AI Foundry Unlocking The AI Revolution
Nov 21, 2024
10 Amazing AI Tools For Your Business You Won't Believe in 2024
Nov 21, 2024
7 Free AI Tools for Students to Boost Productivity in 2024
Nov 21, 2024
OpenAI Launches ChatGPT Advanced Voice Mode on the Web
Nov 20, 2024
View More