+ {/* Asymmetric layout: content + video (vertically centered) */}
+
+
+ {/* Left: Editorial content */}
+
+
+ {/* Eyebrow with EU flag only */}
+
+ Three nations choose
+
+
+ {/* Short punchy copy */}
+
+
+ {/* Right: Video - vertically centered */}
+
+ 🇪🇺
+
+ Digital Commons
+
+
+
+ {/* Headline - editorial style */}
+
+ Three nations choose
+
+
+ open source
+ {" "}
+ to power
+
+ their digital future.
+
+
+ {/* Short punchy copy */}
+ + France, Germany, and the Netherlands partner to build{" "} + Docs — a collaborative + writing tool for thousands of public servants.{" "} + BlockNote is the engine. +
+ + {/* Compelling social proof - simpler */} ++ "Building Digital Commons means better tools, data sovereignty, + and shared progress." +
+ + {/* CTA */} + + Watch the story + → + +
+ {/* Glow effect */}
+
+
+
+
+
+
+ {/* Play button overlay */}
+ {!isPlaying && (
+
+ )}
+
+
+
+
+
+
+ + Questions? +
+
+ {faqs.map((faq, index) => (
+
+
+
+ ))}
+ + {faq.question} +
++ {faq.answer} +
+
+ AI Suggestion: Improved
+ version of your text...
+
+
+
+
+
+
+ ),
+ cursorVisible: false,
+ aiSelection: false,
+ aiPopupVisible: false,
+ };
+ default:
+ return {};
+ }
+ };
+
+ const editorState = getEditorState();
+
+ return (
+
+
+
+ {/* Code */}
+
+
+
+
+
+
+ {content[activeTab].file}
+
+
+
+
+
+
+
+ {content[activeTab].code}
+
+
+ {props.contentRef}
+
+ ),
+});`,
+ },
+ };
+
+ const tabs = [
+ {
+ id: "types",
+ icon: 📐,
+ label: "Type-Safe",
+ description: "Full autocompletion and type inference for custom schemas.",
+ },
+ {
+ id: "theming",
+ icon: 🎨,
+ label: "Use Your Stack",
+ description: "Works with Mantine, Shadcn/ui, or go headless.",
+ },
+ {
+ id: "extend",
+ icon: 🔧,
+ label: "Extend Everything",
+ description: "Create custom blocks, inline content, and plugins.",
+ },
+ ];
+
+ return (
+
+
+
+ {/* Code */}
+
+
+
+
+
+
+ {content[activeTab].file}
+
+
+
+
+
+
+
+ {content[activeTab].code}
+
+
+ {/* Left Text & Tabs */}
+
+ );
+};
diff --git a/docs/app/(home)/_components/FeatureUX.tsx b/docs/app/(home)/_components/FeatureUX.tsx
new file mode 100644
index 0000000000..7e0e9c878d
--- /dev/null
+++ b/docs/app/(home)/_components/FeatureUX.tsx
@@ -0,0 +1,100 @@
+"use client";
+import React, { useState } from "react";
+import { FeatureSection } from "./FeatureSection";
+import { MockEditor } from "./Shared";
+
+export const FeatureUX: React.FC = () => {
+ const [activeTab, setActiveTab] = useState<"components" | "ai" | "blocks">(
+ "components",
+ );
+
+ const tabs = [
+ {
+ id: "components",
+ icon: ⚡️,
+ label: "Ready to Use",
+ description:
+ "Slash menus, formatting toolbars, and drag handles work instantly.",
+ },
+ {
+ id: "ai",
+ icon: ✨,
+ label: "AI Assistance",
+ description: "Select text, ask AI. Completions and edits built-in.",
+ },
+ {
+ id: "blocks",
+ icon: 🧱,
+ label: "Block-Based",
+ description: "Drag, drop, and nest content blocks.",
+ },
+ ];
+
+ const getEditorState = () => {
+ switch (activeTab) {
+ case "components":
+ return {
+ body: (
+ <>
+ Type '/' for commands...
+
+ ),
+ cursorVisible: true,
+ aiSelection: false,
+ aiPopupVisible: false,
+ };
+ case "ai":
+ return {
+ body: (
+ <>
+
+ BlockNote is a text editor.
+
+
+ ),
+ cursorVisible: false,
+ aiSelection: true,
+ aiPopupVisible: true,
+ };
+ case "blocks":
+ return {
+ body: (
+ <>
+
+
+
+ {/* Right Visual */}
+ + {title} +
++ {description} +
+ +
+ {tabs.map((tab) => {
+ const isActive = activeTabId === tab.id;
+ // Dynamic styles based on active state could be passed or handled here
+ // For simplicity, we'll use a generic active style or specific color logic if needed.
+ // But CodePlayground had specific colors (purple, amber, blue).
+ // Let's rely on the parent or use a generic active style here for now,
+ // or we can add a 'color' prop to FeatureTab if we want distinct colors per tab.
+
+ return (
+
+ );
+ })}
+
+
+
+
+
+ {children}
+
+
+ ⋮⋮
+ Drag blocks to reorder content.
+
+ Nest blocks to create structure.
+
+ ),
+ cursorVisible: false,
+ aiSelection: false,
+ aiPopupVisible: false,
+ };
+ default:
+ return {};
+ }
+ };
+
+ const editorState = getEditorState();
+
+ return (
+
+ {icon || }
+ {name}
+
+);
diff --git a/docs/app/(home)/_components/HomeContent.tsx b/docs/app/(home)/_components/HomeContent.tsx
new file mode 100644
index 0000000000..2c326a0380
--- /dev/null
+++ b/docs/app/(home)/_components/HomeContent.tsx
@@ -0,0 +1,248 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import { BlockCatalog } from "./BlockCatalog";
+import { DigitalCommons } from "./DigitalCommons";
+import { FAQ } from "./FAQ";
+import { FeatureAI } from "./FeatureAI";
+import { FeatureCollab } from "./FeatureCollab";
+import { FeatureDX } from "./FeatureDX";
+import { FeatureUX } from "./FeatureUX";
+import { Letter } from "./Letter";
+import { Marquee } from "./Marquee";
+import { OpenSource } from "./OpenSource";
+import { Pricing } from "./Pricing";
+import { SpotlightCard } from "./SpotlightCard";
+import { Testimonials } from "./Testimonials";
+import { TextLoop } from "./TextLoop";
+
+export const HomeContent: React.FC = () => {
+ const BADGES = [
+ { icon: "⭐️", text: "100k+ weekly installs" },
+ { icon: "🛡️", text: "100% Open source & self-hostable" },
+ { icon: "✨", text: "AI Ready" },
+ ];
+
+ return (
+
+ {/* Styles for custom animations */}
+
+
+
+
+ {/* Feature Grid with Spotlight Effect */}
+
+
+
+ {/* Digital Commons */}
+
+ );
+};
diff --git a/docs/app/(home)/_components/Letter.tsx b/docs/app/(home)/_components/Letter.tsx
new file mode 100644
index 0000000000..6817789316
--- /dev/null
+++ b/docs/app/(home)/_components/Letter.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+
+export const Letter: React.FC = () => {
+ return (
+
+ {/* Hero Section */}
+
+ {/* Passive Neural Background */}
+
+
+
+ {/* Tech Stack Marquee */}
+
+ {/* Badge */}
+
+ {BADGES.map((badge, index) => (
+
+
+
+
+
+
+ {badge.icon}
+ {badge.text}
+
+
+ ))}
+ + Build a Notion-quality{" "} + editor in minutes. +
++ The AI-native, open source rich + text editor for React. Add a{" "} + fully customizable modern block-based editing + experience to your product that users will love. +
+ +
+
+ View Demo
+
+ →
+
+
+
+ Documentation
+
+
+
+ {/* Editor Placeholder */}
+ {/* Editor Preview */}
+
+
+
+
+
+
+
+
+
+ Integrates with your stack (TBD)
+
+
+
+
+
+
+
+
+ + ?? The editor you'd build, if you had the time. +
++ BlockNote combines a premium editing experience with the + flexibility of open standards. Zero compromise. +
+
+
+
+
+
+
+
+
+
+
+
+ ✨
+
+ + ?? Notion-Quality UX +
++ Give your users the modern, block-based experience they expect. + Slash commands, drag-and-drop, and real-time collaboration. +
+
+ /image
+
+ Uploading... +
+ + Uploading... +
+ 🛡️
+
+ + ?? Sovereign Infrastructure +
++ ?? 100% open source and self-hostable. Own your data, extend the + core, and never worry about platform risk. +
+
+
+ MIT / MPL
+
+
+ Local-First
+
+
+
+ 🧠
+
+ + ?? Intelligence You Own +
++ Add AI features like autocomplete and rewriting without leaking + data. Bring your own model, run it anywhere. +
+
+
+
+
+
+
+
+ {/* Testimonials */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Let's build. +
+
+
+
+
+
+
+
+ + Building a rich text editor is one of the hardest engineering + challenges on the web. It used to take months of specialized + work. +
++ We believe that great tools should be{" "} + sovereign by default. You shouldn't have to + choose between a cohesive UX and owning your infrastructure. +
++ That's why we built BlockNote. A{" "} + batteries-included editor that gives you a + Notion-quality experience in minutes, while staying grounded + in open standards like{" "} + + ProseMirror + {" "} + and Yjs. +
+
+
+ + Whether you're a startup or a public institution, you deserve + software that lasts. Join us to{" "} + + shape the future + + {" "} + of the open web. +
+
+ {/* Floating "Card" for Impact - DARK MODE */}
+
+
+
+
+
+
+
+
+ + Enter BlockNote. +
++ Forget low-level details. Work with a strongly typed API. + Get modern UI components out-of-the-box. +
+
+
+
+
+
+
+
+
+
+
+ The Team
+
+
+ BlockNote Creators
+
+
+
+
+);
diff --git a/docs/app/(home)/_components/OpenSource.tsx b/docs/app/(home)/_components/OpenSource.tsx
new file mode 100644
index 0000000000..bc6961ab38
--- /dev/null
+++ b/docs/app/(home)/_components/OpenSource.tsx
@@ -0,0 +1,126 @@
+"use client";
+import React from "react";
+
+const pillars = [
+ {
+ icon: "🏛️",
+ title: "Built on Giants",
+ description:
+ "ProseMirror and Yjs are battle-tested foundations trusted by teams worldwide. We build on top of them, not around them.",
+ },
+ {
+ icon: "🤝",
+ title: "Community First",
+ description:
+ "We collaborate closely with the Yjs team and contribute back to the ecosystem. Open source thrives on shared innovation.",
+ },
+ {
+ icon: "🔓",
+ title: "Yours to Own",
+ description:
+ "No vendor lock-in. Self-host, fork, extend. Your editing infrastructure, under your control.",
+ },
+ {
+ icon: "🇪🇺",
+ title: "Digital Autonomy",
+ description:
+ "Partnering with DINUM (France) and Zendis (Germany) to build open European alternatives — reducing dependencies on big tech.",
+ },
+ {
+ icon: "⬆️",
+ title: "Contributing Upstream",
+ description:
+ "We're significant contributors to Yjs, Hocuspocus, and Tiptap. When we improve the ecosystem, everyone benefits.",
+ },
+ {
+ icon: "🌱",
+ title: "Sustainable by Design",
+ description:
+ "Bootstrapped and independent. We're building for the long term, not the next funding round.",
+ },
+];
+
+export const OpenSource: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Committed to open source. +
++ Document editing is foundational infrastructure for the modern + workforce. We believe the tools we use to create and share knowledge + should be open, transparent, and free from lock-in. That's why + everything we build is open source. +
+
+ {pillars.map((pillar, index) => (
+
+
+ {/* Founder Quote */}
+
+
+ ))}
+ {pillar.icon}
+ {pillar.title}
++ {pillar.description} +
+
+
+
+
+ +++ "Here we could put a quote about our open source commitment." +
+ +
+
+
+
+ Design A — Three Tiers
+
+
+
+ {/* Header */}
+
+
+
+ {/* Tiers */}
+ + Pricing +
++ 100% open source. Fair pricing. +
++ Everything is open source. Use it free under GPL-3.0, or get a + commercial license for closed-source projects. +
+
+ {tiersA.map((tier, index) => (
+
+
+ {/* No limits note */}
+
+ {tier.highlight && (
+
+ ))}
+
+
+ Commercial
+
+
+ )}
+ {tier.icon}
+ + {tier.name} +
++ {tier.tagline} +
++ {tier.description} +
+-
+ {tier.features.map((feature, featureIndex) => (
+
- + + {feature} + + ))} +
+ {tier.license} +
++ No limits on documents, users, or features across all plans. +
+ + {/* CTA */} +
+
+ View Pricing
+
+
+
+ Licensing FAQ
+
+
+ 
+ 
+
+ ),
+ },
+ {
+ name: "NLnet",
+ logo: (
+ <>
+ 
+ 
+
+ ),
+ },
+ {
+ name: "DINUM",
+ logo: (
+ <>
+ 
+ 
+
+ ),
+ },
+ {
+ name: "ZenDiS",
+ logo: 
,
+ },
+ {
+ name: "OpenProject",
+ logo: (
+ 
+ ),
+ },
+ {
+ name: "Poggio",
+ logo: (
+ <>
+ 
+ 
+
+ ),
+ },
+ {
+ name: "Capitol",
+ logo: (
+ <>
+ 
+ 
+
+ ),
+ },
+ {
+ name: "Twenty",
+ logo: (
+ <>
+ 
+ 
+
+ ),
+ },
+ {
+ name: "Deep Origin",
+ logo: (
+ 
+ ),
+ },
+ {
+ name: "Krisp",
+ logo: 
,
+ },
+ {
+ name: "Claimer",
+ logo: 
,
+ },
+ {
+ name: "Atlas",
+ logo: 
,
+ },
+ {
+ name: "Juma",
+ logo: 
,
+ },
+ {
+ name: "Atuin",
+ logo: 
,
+ },
+ {
+ name: "Cella",
+ logo: 
,
+ },
+ {
+ name: "Illumi",
+ logo: 
,
+ },
+ {
+ name: "Agree",
+ logo: 
,
+ },
+];
+
+const PricingDesignB: React.FC = () => {
+ return (
+
+ {/* Header */}
+
+
+
+
+ {/* Two-part explainer */}
+ + Transparent pricing +
++ Subscribe to BlockNote XL. +
++ BlockNote is 100% open source. Here's how licensing works. +
+
+ {/* Core */}
+
+
+ {/* CTA */}
+
+
+
+ {/* XL */}
+
+ 💚
+
+ + Core Editor +
++ The majority of BlockNote (including all blocks, real-time + collaboration, comments, and UI components) are liberally + licensed. +
++ Free to use in any project; personal, open source, or commercial. +
++ ✓ Free for everyone +
+
+
+
+ ⚡
+
+ + XL Packages +
++ Advanced features like AI integration,{" "} + PDF / Word / ODT exports, and{" "} + multi-column layouts. +
++ Free for open source projects under GPL-3.0. Closed source + projects require a subscription. +
++ ✓ Free for open source +
+
+
+ View Pricing
+
+
+
+
+ {/* Sponsors */}
+
+
+ {sponsors.map((sponsor, index) => (
+
+
+ + Thanks to our supporters for helping us build sustainable open + source software. +
+
+ {sponsor.logo ? (
+ sponsor.logo
+ ) : (
+
+ {sponsor.name}
+
+ )}
+
+ ))}
+
+
+ );
+};
diff --git a/docs/app/(home)/_components/SpotlightCard.tsx b/docs/app/(home)/_components/SpotlightCard.tsx
new file mode 100644
index 0000000000..8ee0b46adf
--- /dev/null
+++ b/docs/app/(home)/_components/SpotlightCard.tsx
@@ -0,0 +1,40 @@
+"use client";
+import React, { useRef, useState } from "react";
+
+export const SpotlightCard: React.FC<{
+ children: React.ReactNode;
+ className?: string;
+}> = ({ children, className = "" }) => {
+ const divRef = useRef
+
+
+
+
+
+
+ {title}
+
+
+
+
+ {body}
+
+ {cursorVisible && (
+
+ )}
+
+ {aiPopupVisible && (
+
+
+
+ )}
+
+ ✨ AI Assistant
+
+
+
+
+ Fix grammar
+
+
+ Make shorter
+
+
+ Change tone...
+
+
+
+
+ );
+};
diff --git a/docs/app/(home)/_components/Testimonials.tsx b/docs/app/(home)/_components/Testimonials.tsx
new file mode 100644
index 0000000000..e48dc43bbe
--- /dev/null
+++ b/docs/app/(home)/_components/Testimonials.tsx
@@ -0,0 +1,101 @@
+"use client";
+import Link from "next/link";
+import React from "react";
+
+interface Testimonial {
+ company: string;
+ quote: string;
+ author: string;
+ role: string;
+}
+
+const testimonials: Testimonial[] = [
+ {
+ company: "Acme Corp",
+ quote:
+ "BlockNote let us ship a polished editor in days instead of months. Our users love it.",
+ author: "Sarah Chen",
+ role: "VP Engineering",
+ },
+ {
+ company: "Startup Inc",
+ quote:
+ "We evaluated every rich text editor on the market. BlockNote was the only one that felt modern.",
+ author: "Marcus Johnson",
+ role: "CTO",
+ },
+ {
+ company: "Enterprise Co",
+ quote:
+ "The TypeScript support is exceptional. Our team was productive from day one.",
+ author: "Elena Rodriguez",
+ role: "Lead Developer",
+ },
+];
+
+import { SpotlightCard } from "./SpotlightCard";
+
+const TestimonialCard: React.FC<{ testimonial: Testimonial }> = ({
+ testimonial,
+}) => (
+ {children}
+
+ {testimonial.company}
+
+ + "{testimonial.quote}" +
+
+
+
+ {testimonial.author
+ .split(" ")
+ .map((n) => n[0])
+ .join("")}
+
+
+
+
+ {testimonial.author}
+
+
+ {testimonial.role}, {testimonial.company}
+
+
+
+
+
+
+ + Trusted by teams everywhere. +
++ From startups to enterprises, teams choose BlockNote to build their + document experiences. +
+
+ {testimonials.map((testimonial, index) => (
+
+
+
+
+ See who's using BlockNote
+
+ →
+
+
+
+
+
+
+ {items[currentIndex]}
+
+
+
+ );
+}
diff --git a/docs/app/(home)/page.tsx b/docs/app/(home)/page.tsx
index 8728ad7a73..d1d48e5b2e 100644
--- a/docs/app/(home)/page.tsx
+++ b/docs/app/(home)/page.tsx
@@ -1,30 +1,9 @@
-import { FadeIn } from "@/components/FadeIn";
-import { FAQ } from "./faq/FAQ";
-import { Community } from "./community/Community";
-import { Features } from "./features/Features";
-import { Hero } from "./hero/Hero";
-import { Letter } from "./letter/Letter";
+import { HomeContent } from "./_components/HomeContent";
export default function Home() {
return (
+ {}}
+ user={HARDCODED_USERS[0]}
+ setUser={() => {}}
+ sidebarOpen={true}
+ onToggleSidebar={() => {}}
+ disabled={true}
+ />
+
+ ) : (
+
+
+ Loading...
+
+
+ );
+}
+
+function DemoEditorInner({
+ roomId,
+ isNewRoom,
+}: {
+ roomId: string;
+ isNewRoom: boolean;
+}) {
+ const { resolvedTheme } = useTheme();
+ // const [mounted, setMounted] = useState(false);
+ const [activeUser, setActiveUser] = useState(HARDCODED_USERS[0]);
+ const [sidebarOpen, setSidebarOpen] = useState(true);
+
+ const { doc, provider } = useMemo(() => {
+ const doc = new Y.Doc();
+ console.log("open room", "demo/" + roomId);
+ const provider = new YPartyKitProvider(
+ "blocknote-dev.yousefed.partykit.dev",
+ "demo-" + roomId,
+ doc,
+ );
+ return { doc, provider };
+ }, [roomId, activeUser]);
+ // Thread Store
+ const threadStore = useMemo(() => {
+ return new YjsThreadStore(
+ activeUser.id,
+ doc.getMap("threads"),
+ new DefaultThreadStoreAuth(activeUser.id, "editor"),
+ );
+ }, [activeUser, doc]);
+
+ console.log(activeUser);
+ const editor = useCreateBlockNote(
+ {
+ // Schema with MultiColumn & PageBreak
+ // schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
+ // dropCursor: multiColumnDropCursor,
+
+ // Locales
+ dictionary: {
+ ...locales.en,
+ // multi_column: multiColumnLocales.en,
+ ai: aiEnFile,
+ },
+
+ // Collaboration
+ collaboration: {
+ provider,
+ fragment: doc.getXmlFragment("blocknote"),
+ user: { color: activeUser.color, name: activeUser.username },
+ },
+
+ // Extensions: AI, Comments
+ extensions: [
+ AIExtension({
+ transport: new DefaultChatTransport({
+ api: AI_API_URL,
+ }),
+ }),
+ CommentsExtension({ threadStore, resolveUsers }),
+ ],
+
+ uploadFile,
+ },
+ [activeUser, threadStore, provider, doc],
+ );
+
+ const getSlashMenuItems = useMemo(
+ () => async (query: string) =>
+ filterSuggestionItems(
+ combineByGroup(
+ getDefaultReactSlashMenuItems(editor),
+ // getPageBreakReactSlashMenuItems(editor),
+ // getMultiColumnSlashMenuItems(editor),
+ getAISlashMenuItems(editor),
+ ),
+ query,
+ ),
+ [editor],
+ );
+
+ useEffect(() => {
+ if (editor && isNewRoom) {
+ editor.replaceBlocks(editor.document, [
+ {
+ type: "heading",
+ content: "Welcome to BlockNote!",
+ },
+ {
+ type: "paragraph",
+ },
+ {
+ type: "paragraph",
+ content: [
+ {
+ type: "text",
+ text: "This is a demo of BlockNote with ",
+ styles: {},
+ },
+ {
+ type: "text",
+ text: "multi-cursor collaboration",
+ styles: { bold: true },
+ },
+ {
+ type: "text",
+ text: ", ",
+ styles: {},
+ },
+ {
+ type: "text",
+ text: "live comments",
+ styles: { bold: true },
+ },
+ {
+ type: "text",
+ text: ", and ",
+ styles: {},
+ },
+ {
+ type: "text",
+ text: "AI features",
+ styles: { bold: true },
+ },
+ {
+ type: "text",
+ text: ".",
+ styles: {},
+ },
+ ],
+ },
+ {
+ type: "paragraph",
+ },
+ {
+ type: "paragraph",
+ content: "Share the URL above to collaborate with others ⚡️",
+ },
+ {
+ type: "paragraph",
+ },
+ ]);
+ }
+ }, [editor, isNewRoom]);
+
+ const handleExport = async (format: "pdf" | "docx" | "odt") => {
+ let blob: Blob;
+ let filename = `blocknote-export.${format}`;
+
+ if (format === "pdf") {
+ const exporter = new PDFExporter(editor.schema, pdfDefaultSchemaMappings);
+ const pdfDocs = await exporter.toReactPDFDocument(editor.document);
+ blob = await pdf(pdfDocs).toBlob();
+ } else if (format === "docx") {
+ const exporter = new DOCXExporter(
+ editor.schema,
+ docxDefaultSchemaMappings,
+ );
+ blob = await exporter.toBlob(editor.document);
+ } else if (format === "odt") {
+ const exporter = new ODTExporter(editor.schema, odtDefaultSchemaMappings);
+ blob = await exporter.toODTDocument(editor.document);
+ } else {
+ return;
+ }
+
+ const link = document.createElement("a");
+ link.href = window.URL.createObjectURL(blob);
+ link.download = filename;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+
+ if (!editor) {
+ return null;
+ }
+
+ return (
+
+
+ ⚡️ Collaborate live! Share this URL:
+
+
+
+ {content}
+
+
+
+ e.currentTarget.select()}
+ />
+
+
+
+
+ );
+}
diff --git a/docs/app/demo/_components/EditorMenu.tsx b/docs/app/demo/_components/EditorMenu.tsx
new file mode 100644
index 0000000000..df7c23b64b
--- /dev/null
+++ b/docs/app/demo/_components/EditorMenu.tsx
@@ -0,0 +1,118 @@
+import { Download, PanelRight, Share, User } from "lucide-react";
+import { HARDCODED_USERS } from "./utils";
+
+interface EditorMenuProps {
+ onExport: (format: "pdf" | "docx" | "odt") => void;
+ user: { id: string; username: string; color: string };
+ setUser: (user: {
+ id: string;
+ username: string;
+ color: string;
+ avatarUrl: string;
+ }) => void;
+ sidebarOpen: boolean;
+ onToggleSidebar: () => void;
+ disabled?: boolean;
+}
+
+export function EditorMenu({
+ onExport,
+ user,
+ setUser,
+ sidebarOpen,
+ onToggleSidebar,
+ disabled,
+}: EditorMenuProps) {
+ return (
+
+ setSidebarOpen(!sidebarOpen)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Comments
+
+
+
+
+
+ );
+}
diff --git a/docs/app/demo/_components/styles.css b/docs/app/demo/_components/styles.css
new file mode 100644
index 0000000000..dfa306fbc8
--- /dev/null
+++ b/docs/app/demo/_components/styles.css
@@ -0,0 +1,14 @@
+/* Custom scrollbar for sidebar */
+.bn-threads-sidebar {
+ height: 100%;
+}
+
+/* Ensure editor content takes full height */
+.bn-editor {
+ min-height: 100%;
+}
+
+.bn-threads-sidebar .bn-thread {
+ /* todo: fix in blocknote */
+ min-width: auto !important;
+}
diff --git a/docs/app/demo/_components/utils.ts b/docs/app/demo/_components/utils.ts
new file mode 100644
index 0000000000..385318cd43
--- /dev/null
+++ b/docs/app/demo/_components/utils.ts
@@ -0,0 +1,80 @@
+export const HARDCODED_USERS = [
+ {
+ id: "user-1",
+ username: "Kev",
+ color: "#ff0000",
+ avatarUrl: "https://github.com/shadcn.png",
+ },
+ {
+ id: "user-2",
+ username: "Matt",
+ color: "#00ff00",
+ avatarUrl: "https://github.com/shadcn.png",
+ },
+ {
+ id: "user-3",
+ username: "Sef",
+ color: "#0000ff",
+ avatarUrl: "https://github.com/shadcn.png",
+ },
+ {
+ id: "user-4",
+ username: "Nicky",
+ color: "#ff00ff",
+ avatarUrl: "https://github.com/shadcn.png",
+ },
+ {
+ id: "user-5",
+ username: "Sam",
+ color: "#00ffff",
+ avatarUrl: "https://github.com/shadcn.png",
+ },
+ {
+ id: "user-6",
+ username: "Walter",
+ color: "#ffff00",
+ avatarUrl: "https://github.com/shadcn.png",
+ },
+ {
+ id: "user-7",
+ username: "Amanda",
+ color: "#ffa500",
+ avatarUrl: "https://github.com/shadcn.png",
+ },
+ {
+ id: "user-8",
+ username: "Sara",
+ color: "#800080",
+ avatarUrl: "https://github.com/shadcn.png",
+ },
+];
+
+export const getRandomUser = () => {
+ return HARDCODED_USERS[Math.floor(Math.random() * HARDCODED_USERS.length)];
+};
+
+// The resolveUsers function fetches information about your users
+// (e.g. their name, avatar, etc.). Usually, you'd fetch this from your
+// own database or user management system.
+// Here, we just return the hardcoded users
+export async function resolveUsers(userIds: string[]) {
+ // fake a (slow) network request
+ await new Promise((resolve) => setTimeout(resolve, 500));
+
+ return HARDCODED_USERS.filter((user) => userIds.includes(user.id));
+}
+
+// Uploads a file to tmpfiles.org and returns the URL to the uploaded file.
+export async function uploadFile(file: File) {
+ const body = new FormData();
+ body.append("file", file);
+
+ const ret = await fetch("https://tmpfiles.org/api/v1/upload", {
+ method: "POST",
+ body: body,
+ });
+ return (await ret.json()).data.url.replace(
+ "tmpfiles.org/",
+ "tmpfiles.org/dl/",
+ );
+}
diff --git a/docs/app/demo/layout.tsx b/docs/app/demo/layout.tsx
new file mode 100644
index 0000000000..be4a00255b
--- /dev/null
+++ b/docs/app/demo/layout.tsx
@@ -0,0 +1,6 @@
+import { HomeLayout } from "@/components/fumadocs/layout/home";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default function Layout({ children }: LayoutProps<"/">) {
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Try BlockNote +
+
-
- Upgrade your BlockNote experience
- | string;
features: React.ReactNode[];
href?: string;
+ cta?: string;
};
-function TierTitle({ tier }: { tier: Tier }) {
- return (
-
-
- {feature}
-
- );
-}
+ const isSubFeature =
+ typeof feature === "object" &&
+ feature !== null &&
+ "props" in feature &&
+ (feature as { props?: { className?: string } }).props?.className?.includes(
+ "ml-4",
+ );
-function TierFeatures({ tier }: { tier: Tier }) {
return (
-
+ {!isSubFeature && (
+
);
}
@@ -170,21 +159,82 @@ export function Tiers({
frequency: Frequency;
}) {
return (
-
- BlockNote Pro -
-
- Get direct support from the maintainers, access Pro Examples
-
and get your commercial license for XL Packages such as
- BlockNote AI.
-
- Your subscription helps us to maintain and develop BlockNote.
-
+
diff --git a/docs/app/pricing/tiers.tsx b/docs/app/pricing/tiers.tsx
index 1dd63e8039..dc67426726 100644
--- a/docs/app/pricing/tiers.tsx
+++ b/docs/app/pricing/tiers.tsx
@@ -11,57 +11,32 @@ type Frequency = "month" | "year";
export type Tier = {
id: string;
mostPopular?: boolean;
+ theme?: "green" | "purple" | "default";
+ badge?: string;
+ icon?: string;
title: string;
- description: string;
+ tagline?: string;
+ description: React.ReactNode;
price: Record
+ {/* Header */}
+
+
+ 100% Open Source.
+
+
+
+ {/* Pricing Tiers */}
+ Pricing +
+
+ 100% Open Source.
+
+
+ Fair Pricing.
+
+
+ + The majority of BlockNote is liberally licensed and free to use for + any purpose. The dual-licensed XL features (like AI) are free for + open source projects, but require a commercial license for + closed-source applications. +
+- BlockNote is 100% open source software that organizations of all sizes - are using to add polished editing experiences to their apps. -
+ + {/* Social proof */} +
+
+ {sponsors.map((sponsor) => (
+
+
+
+ {/* FAQ */}
+ Trusted by teams building the future of collaboration +
+
+ 
+
+ ))}
+ - {tier.title} -
- ); -} - -function TierPrice({ tier, frequency }: { tier: Tier; frequency: Frequency }) { - return ( -- {typeof tier.price === "string" - ? tier.price - : `$${tier.price[frequency]} / ${frequency}`} -
- ); -} - -function TierHeader({ tier, frequency }: { tier: Tier; frequency: Frequency }) { - return ( -
-
- );
-}
-
-function TierDescription({ tier }: { tier: Tier }) {
- return {tier.description}
; -} +// ... (TierCTAButton and TierFeature remain unchanged, I'll use context to skip them or just target the Tier definition and Tiers component if possible, but replace_file_content is convenient for small files) +// Wait, replace_file_content replaces a contiguous block. I need to replace Tier type AND the rendering. They are far apart. +// I'll use multi_replace_file_content or just replace the Tier type first, then the rendering. +// tiers.tsx is small enough, maybe I can do it in one go if I include everything between. +// But Tier rendering is at the bottom. +// I will use multi_replace_file_content. function TierCTAButton({ tier }: { tier: Tier }) { const { data: session } = useSession(); - let text = "Sign up"; + let text = tier.cta || "Sign up"; if (session) { if (session.planType === "free") { - text = "Buy now"; + text = tier.cta || "Buy now"; } else { text = session.planType === tier.id @@ -69,19 +44,34 @@ function TierCTAButton({ tier }: { tier: Tier }) { : "Update subscription"; } } + + // Theme-based button styles + const isGreen = tier.theme === "green"; + const isPurple = tier.mostPopular; // Keep purple for most popular + + const buttonClasses = cn( + "group inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl py-3.5 text-center text-sm font-semibold transition-all shadow-sm", + isPurple && + "bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-purple-500/25 hover:shadow-xl hover:shadow-purple-500/30", + isGreen && + "bg-white border-2 border-green-200 text-green-700 hover:border-green-300 hover:shadow-md hover:shadow-green-500/10", + !isPurple && + !isGreen && + "bg-white border border-stone-300 text-stone-900 hover:border-purple-300 hover:text-purple-600", + ); + return ( { - // This event is deprecated, but we keep it to use as a baseline for analytics track("Signup", { tier: tier.id }); - + // ... rest of analytic logic kept simple for brevity in replacement, + // in real implementation we keep the existing logic. + // Re-injecting existing analytics logic below to ensure no regression. if (!session) { Sentry.captureEvent({ message: "click-pricing-signup", level: "info", - extra: { - tier: tier.id, - }, + extra: { tier: tier.id }, }); track("click-pricing-signup", { tier: tier.id }); return; @@ -91,33 +81,25 @@ function TierCTAButton({ tier }: { tier: Tier }) { Sentry.captureEvent({ message: "click-pricing-buy-now", level: "info", - extra: { - tier: tier.id, - }, + extra: { tier: tier.id }, }); track("click-pricing-buy-now", { tier: tier.id }); e.preventDefault(); e.stopPropagation(); - await authClient.checkout({ - slug: tier.id, - }); + await authClient.checkout({ slug: tier.id }); } else { if (session.planType === tier.id) { Sentry.captureEvent({ message: "click-pricing-manage-subscription", level: "info", - extra: { - tier: tier.id, - }, + extra: { tier: tier.id }, }); track("click-pricing-manage-subscription", { tier: tier.id }); } else { Sentry.captureEvent({ message: "click-pricing-update-subscription", level: "info", - extra: { - tier: tier.id, - }, + extra: { tier: tier.id }, }); track("click-pricing-update-subscription", { tier: tier.id }); } @@ -128,37 +110,44 @@ function TierCTAButton({ tier }: { tier: Tier }) { }} href={tier.href ?? (session ? undefined : "/signup")} aria-describedby={tier.id} - className={cn( - tier.mostPopular - ? "text-fd-background dark:text-fd-foreground bg-indigo-600 shadow-sm hover:bg-indigo-500" - : "text-indigo-600 ring-1 ring-inset ring-indigo-600 hover:text-indigo-500 hover:ring-indigo-500", - "mt-8 block cursor-pointer rounded-md px-3 py-2 text-center text-sm font-semibold leading-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", - )} + className={buttonClasses} > - {tier.id === "enterprise" ? "Get in touch" : text} + {tier.id === "enterprise" ? tier.cta || "Contact us" : text} + + → + ); } function TierFeature({ feature }: { feature: React.ReactNode }) { - return ( --
- {tier.features.map((feature, index) => (
-
+
+ )}
+ {feature}
+
- {tiers.map((tier) => (
-
-
- ))}
+
+ {tiers.map((tier) => {
+ const isGreen = tier.theme === "green";
+ const isPurple = tier.mostPopular;
+
+ return (
+
);
}
diff --git a/docs/components/Footer.tsx b/docs/components/Footer.tsx
index 5d9c683e59..7313cb1374 100644
--- a/docs/components/Footer.tsx
+++ b/docs/components/Footer.tsx
@@ -9,7 +9,7 @@ import ThemedImage from "@/components/ThemedImage";
function FooterLink({ href, children }: { href: string; children: ReactNode }) {
const classes =
- "text-sm text-fd-muted-foreground no-underline transition hover:text-fd-foreground";
+ "text-sm text-stone-500 no-underline transition-colors hover:text-purple-600 block py-1";
if (href.startsWith("http")) {
return (
@@ -25,7 +25,9 @@ function FooterLink({ href, children }: { href: string; children: ReactNode }) {
}
function FooterHeader({ children }: { children: ReactNode }) {
- return
+ {/* Popular badge */}
+ {tier.mostPopular && (
+
+ );
+ })}
+
+ {tier.badge ?? "Most Popular"}
+
+
+ )}
+
+ {/* Header */}
+
+ {tier.icon &&
+
+ {/* Price */}
+ {tier.icon}
}
+ + {tier.title} +
+ {tier.tagline && ( ++ {tier.tagline} +
+ )} +
+ {typeof tier.price === "string" ? (
+
+ {tier.price}
+
+ ) : (
+
+
+ {/* Description */}
+
+
+ ${tier.price[frequency]}
+
+
+ /{frequency}
+
+
+ )}
+ + {tier.description} +
+ + {/* CTA */} +
+
+
+ {/* Features */}
+ -
+ {tier.features.map((feature, index) => (
+
{children}
; + return ( +{children}
+ ); } const navigation = { @@ -69,86 +71,75 @@ export function FooterContent() {
-
- {/* Subscribe to our newsletter */}
+
+
BlockNote is an extensible React rich text editor with support for - block-based editing, collaboration and comes with ready-to-use - customizable UI components. + block-based editing, real-time collaboration, and comes with + ready-to-use customizable UI components.
- {/*
-
@@ -157,19 +148,10 @@ export function FooterContent() {
export function Footer({ menu }: { menu?: boolean }): ReactElement {
return (
-
-
-
- Learn
-
- -
- {navigation.general.map((item) => (
-
-
-
{item.name} -
- ))}
-
- Collaborate
-
- -
- {navigation.collaborate().map((item) => (
-
-
-
{item.name} -
- ))}
-
- Community
-
- -
- {navigation.community.map((item) => (
-
-
-
{item.name} -
- ))}
-
- Legal
-
-
-
-
-
- Terms & Conditions - +++++Learn +-
+ {navigation.general.map((item) => (
+
-
+
{item.name}
- -
-
- Privacy Policy - + ))} +
+-Collaborate +-
+ {navigation.collaborate().map((item) => (
+
-
+
{item.name}
-
-+Theme --
-
-
-
+ ))} +
++ ))} + +Community +-
+ {navigation.community.map((item) => (
+
-
+
{item.name}
-
+Legal & Theme +-
+
-
+
+ Terms & Conditions + +
+ -
+
+ Privacy Policy + +
+ -
+
+
+
-
+
-
-
+ - © {new Date().getFullYear()} BlockNote maintainers. All - rights reserved. -
-
+
+ © {new Date().getFullYear()} BlockNote maintainers. All rights + reserved. +