Generated by Code IQ · v1.0

novel
Knowledge Tutorial

Novel is a Notion-style WYSIWYG editor framework built on top of Tiptap and React. It utilizes a headless architecture to decouple the core editing engine from the user interface, allowing developers to seamlessly integrate advanced capabilities like AI-powered autocompletion, interactive slash commands, and optimistic image uploads into their applications.

7
Chapters
-
Subsystems
∞
Rabbit Holes
▶ Start Reading ⎇ View on GitHub
System Architecture

How the pieces fit

novel is organized as connected concepts and components. Start broad, then drill down chapter by chapter.

⚙️
Consumer Application Implementation
Consumer Application Implementation
🔧
Headless Editor Wrapper
Headless Editor Wrapper
⚙️
Custom Tiptap Extensions
Custom Tiptap Extensions
🔧
Slash Command System
Slash Command System
⚙️
AI Autocompletion Pipeline
AI Autocompletion Pipeline
⚙️
Floating Context Menu (Bubble Menu)
Floating Context Menu (Bubble Menu)
⚙️
Optimistic Image Uploads
Optimistic Image Uploads
novel — bash
➜open tutorial
◆ Scanning numbered chapters
◆ Building navigation and Mermaid diagrams
◆ Generating chapter and subsystem pages
✓ 7 chapter pages built
✓ Theme toggle enabled
➜
Repository Overview

Intro and Architecture Diagram

Novel is a Notion-style WYSIWYG editor framework built on top of Tiptap and React. It utilizes a headless architecture to decouple the core editing engine from the user interface, allowing developers to seamlessly integrate advanced capabilities like AI-powered autocompletion, interactive slash commands, and optimistic image uploads into their applications.

Source Repository: https://github.com/steven-tey/novel

flowchart TD A0["Headless Editor Wrapper"] A1["Slash Command System"] A2["AI Autocompletion Pipeline"] A3["Custom Tiptap Extensions"] A4["Floating Context Menu (Bubble Menu)"] A5["Optimistic Image Uploads"] A6["Consumer Application Implementation"] A6 -->|"Instantiates and configures"| A0 A6 -->|"Defines commands for"| A1 A6 -->|"Integrates UI for"| A2 A6 -->|"Renders selectors in"| A4 A6 -->|"Binds handlers to"| A5 A0 -->|"Loads and manages"| A3 A1 -->|"Tunnels UI through"| A0 A2 -->|"Applies highlight mark"| A3
Tutorial Chapters

All 7 chapters

Follow sequentially or jump to any topic. Start with Consumer Application Implementation.

Ch.01 CORE
Consumer Application Implementation
Welcome to the Novel project tutorial!
↗
Ch.02 TOOLS
Headless Editor Wrapper
In the previous chapter, Consumer Application Implementation, we built a Next.js page that renders our editor. We used two key components:…
↗
Ch.03 CORE
Custom Tiptap Extensions
In the previous chapter, Headless Editor Wrapper, we built the chassis of our car. We have a working editor engine connected to our React a…
↗
Ch.04 TOOLS
Slash Command System
In the previous chapter, Custom Tiptap Extensions, we created powerful custom blocks like Tweet embeds and Highlighting.
↗
Ch.05 CORE
AI Autocompletion Pipeline
In the previous chapter, Slash Command System, we built a menu that lets users insert headings, images, and lists. We gave the user a "Magi…
↗
Ch.06 CORE
Floating Context Menu (Bubble Menu)
In the previous chapter, AI Autocompletion Pipeline, we built a powerful AI assistant that helps users write content.
↗
Ch.07 CORE
Optimistic Image Uploads
In the previous chapter, Floating Context Menu (Bubble Menu), we polished the text editing experience by bringing menus directly to the cur…
↗
About This Project

Generated by Code IQ

This tutorial was automatically generated by Code IQ and rendered with the shared tutorial site builder. It can be produced for any repository tutorial folder that follows the numbered markdown chapter layout.

View Code IQ ↗
python build_site.py '/home/runner/work/Code-IQ/Code-IQ/output/novel'

// → 7 chapters
// → source: steven-tey/novel