+ {/* 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 */} + + Partner with us + β + +
+ {/* Glow effect */}
+
+
+
+
+
+
+ {/* Play button overlay */}
+ {!isPlaying && (
+
+ )}
+
+
+
+
+
+
+ + Questions? +
+
+ {faqs.map((faq, index) => (
+
+
+
+ ))}
+ + {faq.question} +
++ {faq.answer} +
+
+ {/* 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..e1fa0893a4
--- /dev/null
+++ b/docs/app/(home)/_components/FeatureUX.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { FeatureSection } from "./FeatureSection";
+import { ContentItem, FeatureWindow } from "./ui/FeatureWindow";
+export const FeatureUX: React.FC = () => {
+ const [activeTab, setActiveTab] = useState<"components" | "ai" | "blocks">(
+ "components",
+ );
+
+ const content: Record
+
+
+ {/* 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}
+
+
+ {icon || }
+ {name}
+
+);
diff --git a/docs/app/(home)/_components/Hero.tsx b/docs/app/(home)/_components/Hero.tsx
new file mode 100644
index 0000000000..1db7cc7898
--- /dev/null
+++ b/docs/app/(home)/_components/Hero.tsx
@@ -0,0 +1,70 @@
+"use client";
+import Link from "next/link";
+import React from "react";
+import { HeroVideo } from "./HeroVideo";
+import { TextLoop } from "./TextLoop";
+
+export const Hero: React.FC = () => {
+ const BADGES = [
+ { icon: "βοΈ", text: "100k+ weekly installs" },
+ { icon: "π‘οΈ", text: "100% Open source & self-hostable" },
+ { icon: "β¨", text: "AI Ready" },
+ ];
+
+ return (
+
+ {/* Hero Section */}
+
+ {/* Passive Neural Background */}
+
+
+ );
+};
diff --git a/docs/app/(home)/_components/HeroVideo.tsx b/docs/app/(home)/_components/HeroVideo.tsx
new file mode 100644
index 0000000000..a36cccbe73
--- /dev/null
+++ b/docs/app/(home)/_components/HeroVideo.tsx
@@ -0,0 +1,77 @@
+"use client";
+import Link from "next/link";
+import React from "react";
+
+export const HeroVideo: React.FC = () => {
+ return (
+ <>
+
+
+ {/* Badge */}
+
+ {BADGES.map((badge, index) => (
+
+
+
+
+
+ {badge.icon}
+ {badge.text}
+
+
+ ))}
+ + Build a Notion-style{" "} + 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 */}
+
+
+
+ );
+};
diff --git a/docs/app/(home)/_components/HomeContent.tsx b/docs/app/(home)/_components/HomeContent.tsx
new file mode 100644
index 0000000000..22cca52f8c
--- /dev/null
+++ b/docs/app/(home)/_components/HomeContent.tsx
@@ -0,0 +1,180 @@
+"use client";
+import React from "react";
+import { BlockCatalog } from "./BlockCatalog";
+import { DigitalCommons } from "./DigitalCommons";
+import { FeatureAI } from "./FeatureAI";
+import { FeatureCollab } from "./FeatureCollab";
+import { FeatureDX } from "./FeatureDX";
+import { FeatureUX } from "./FeatureUX";
+import { Hero } from "./Hero";
+import { OpenSource } from "./OpenSource";
+import { Pricing } from "./Pricing";
+import { Sponsors } from "./Sponsors";
+import { SpotlightCard } from "./SpotlightCard";
+
+type HomeContentProps = {
+ code: {
+ realtime: string;
+ theming: string;
+ extend: string;
+ };
+};
+
+export const HomeContent: React.FC
+
+
+
+ {/* Browser Chrome */}
+
+ {/* Video Content */}
+
+
+
+
+ {/* 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 (
+
+
+
+
+ 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..b00ec614d6
--- /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're excited to build with these technologies.",
+ },
+ // {
+ // 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 layer, 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." +
+ +
+ {/* 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 */}
+ 
+ // 
+ //
+ // ),
+ // },
+ {
+ 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: "Lemni",
+ // logo: ,
+ // },
+ // {
+ // name: "Claimer",
+ // logo: 
,
+ // },
+ {
+ name: "Juma",
+ logo: 
,
+ },
+ {
+ name: "Atuin",
+ logo: 
,
+ },
+ {
+ name: "Cella",
+ logo: 
,
+ },
+ {
+ name: "Illumi",
+ logo: 
,
+ },
+ {
+ name: "Agree",
+ logo: 
,
+ },
+];
+
+export const Sponsors = (props: { title?: string }) => {
+ return (
+
+ {props.title && (
+
+ {sponsors.map((sponsor, index) => (
+
+
+ );
+};
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+ {props.title} +
+ )} +
+ {sponsor.logo ? (
+ sponsor.logo
+ ) : (
+
+ {sponsor.name}
+
+ )}
+
+ ))}
+
+
+
+ );
+};
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)/_components/ui/FeatureWindow.tsx b/docs/app/(home)/_components/ui/FeatureWindow.tsx
new file mode 100644
index 0000000000..6c93fbd9c4
--- /dev/null
+++ b/docs/app/(home)/_components/ui/FeatureWindow.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import { WindowChrome } from "./WindowChrome";
+
+// Content definitions
+export type ContentItem =
+ | { type: "code"; file: string; code: string }
+ | { type: "image"; src: string; alt: string; className?: string }
+ | {
+ type: "video";
+ src: string;
+ className?: string; // object-cover etc
+ }
+ | { type: "component"; component: React.ReactNode; chrome?: boolean }; // fallback
+
+interface FeatureWindowProps {
+ content: ContentItem;
+ theme?: "light" | "dark";
+ className?: string;
+}
+
+export const FeatureWindow: React.FC
+ {/* Chrome */}
+
+ );
+};
diff --git a/docs/app/(home)/_components/ui/WindowChrome.tsx b/docs/app/(home)/_components/ui/WindowChrome.tsx
new file mode 100644
index 0000000000..da386b79a6
--- /dev/null
+++ b/docs/app/(home)/_components/ui/WindowChrome.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+interface WindowChromeProps {
+ title?: string;
+ theme?: "light" | "dark";
+}
+
+export const WindowChrome: React.FC
+ {content.type === "video" && (
+
+ )}
+ {content.type === "code" && (
+
+ )}
+ {content.type === "component" && content.component}
+
+
+
+ );
+};
diff --git a/docs/app/(home)/code-samples.ts b/docs/app/(home)/code-samples.ts
new file mode 100644
index 0000000000..40bee8cf66
--- /dev/null
+++ b/docs/app/(home)/code-samples.ts
@@ -0,0 +1,52 @@
+export const codeSamples = {
+ // FeatureDX: "Bring your Design System"
+ theming: `import { useCreateBlockNote } from "@blocknote/react";
+import { ShadCNComponents } from "@blocknote/shadcn";
+
+const editor = useCreateBlockNote();
+
+return (
+
+
+
+
+
+ {title && (
+
+ {title}
+
+ )}
+ {/* Spacer for centering */}
+
+ {props.contentRef}
+
+ ),
+});`,
+
+ // FeatureCollab: "Real-time Sync"
+ realtime: `import * as Y from "yjs";
+import { WebsocketProvider } from "y-websocket";
+
+const doc = new Y.Doc();
+const provider = new WebsocketProvider(
+ "ws://localhost:1234", "room-id", doc);
+
+const editor = useCreateBlockNote({
+ collaboration: {
+ fragment: doc.getXmlFragment("document"),
+ user: { name: "Alice", color: "#ff0000" },
+ provider,
+ }
+});
+
+// Cursors and presence included`,
+};
diff --git a/docs/app/(home)/page.tsx b/docs/app/(home)/page.tsx
index 8728ad7a73..ea9e626098 100644
--- a/docs/app/(home)/page.tsx
+++ b/docs/app/(home)/page.tsx
@@ -1,30 +1,31 @@
-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 { createHighlighter } from "shiki";
+import { HomeContent } from "./_components/HomeContent";
+import { codeSamples } from "./code-samples";
+
+export default async function Home() {
+ const highlighter = await createHighlighter({
+ themes: ["github-dark"],
+ langs: ["typescript", "tsx"],
+ });
+
+ const highlightedCode = {
+ realtime: highlighter.codeToHtml(codeSamples.realtime, {
+ lang: "typescript",
+ theme: "github-dark",
+ }),
+ theming: highlighter.codeToHtml(codeSamples.theming, {
+ lang: "tsx",
+ theme: "github-dark",
+ }),
+ extend: highlighter.codeToHtml(codeSamples.extend, {
+ lang: "tsx",
+ theme: "github-dark",
+ }),
+ };
-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();
+ 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]);
+
+ const editor = useCreateBlockNote(
+ {
+ // Schema with MultiColumn & PageBreak
+ // schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
+ // dropCursor: multiColumnDropCursor,
+ schema: BlockNoteSchema.create().extend({
+ blockSpecs: {
+ codeBlock: createCodeBlockSpec(codeBlockOptions),
+ },
+ }),
+
+ // 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..d4882496ac
--- /dev/null
+++ b/docs/app/demo/_components/styles.css
@@ -0,0 +1,20 @@
+/* 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;
+}
+
+/*
+(for recording demo video, also needs bn-ai-prompt on combo)
+.bn-ai-prompt {
+ width: 350px;
+} */
diff --git a/docs/app/demo/_components/utils.ts b/docs/app/demo/_components/utils.ts
new file mode 100644
index 0000000000..c69c63e3e8
--- /dev/null
+++ b/docs/app/demo/_components/utils.ts
@@ -0,0 +1,80 @@
+export const HARDCODED_USERS = [
+ {
+ id: "user-1",
+ username: "Kev",
+ color: "#9810fa",
+ avatarUrl: "/avatars/avater2-m.jpg",
+ },
+ {
+ id: "user-2",
+ username: "Matt",
+ color: "#00ff00",
+ avatarUrl: "/avatars/avatar3-m.jpg",
+ },
+ {
+ id: "user-3",
+ username: "Sef",
+ color: "#ababffff",
+ avatarUrl: "/avatars/avater5-m.jpg",
+ },
+ {
+ id: "user-4",
+ username: "Nicky",
+ color: "#ff00ff",
+ avatarUrl: "/avatars/avatar1-f.jpg",
+ },
+ {
+ id: "user-5",
+ username: "Sam",
+ color: "#00ffff",
+ avatarUrl: "/avatars/avatar7-m.jpg",
+ },
+ {
+ id: "user-6",
+ username: "Walter",
+ color: "#ffff00",
+ avatarUrl: "/avatars/avatar10-m.jpg",
+ },
+ {
+ id: "user-7",
+ username: "Amanda",
+ color: "#ffa500",
+ avatarUrl: "/avatars/avatar4-f.jpg",
+ },
+ {
+ id: "user-8",
+ username: "Sara",
+ color: "#800080",
+ avatarUrl: "/avatars/avatar6-f.jpg",
+ },
+];
+
+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 +
+
+
+ ) : null}
+
+
+ Try the Demo →
+
+ + Interactive Playground +
++ Try all features combined in our full-featured demo editor. +
+
-
- Upgrade your BlockNote experience
- | string;
features: React.ReactNode[];
href?: string;
+ cta?: "get-started" | "buy" | "contact";
};
-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 +163,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..70702d76ec 100644
--- a/docs/app/pricing/tiers.tsx
+++ b/docs/app/pricing/tiers.tsx
@@ -11,55 +11,30 @@ 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) => (
+
+
+
+ {/* Startup Discounts */}
+ + Trusted by teams building the future of collaboration +
+
+ 
+
+ ))}
+
+
+
+ {/* FAQ */}
+ Discounts for Startups +
++ Building the next big thing? We love supporting early-stage + companies. If you're a seed-stage startup or non-profit, get in + touch for special pricing on our Business plan. +
+ + Apply for Startup Program + +- {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}
; -} - function TierCTAButton({ tier }: { tier: Tier }) { const { data: session } = useSession(); - let text = "Sign up"; + let text = + tier.cta === "get-started" + ? "Get Started" + : tier.cta === "buy" + ? "Sign up" + : tier.cta === "contact" + ? "Contact us" + : "Sign up"; - if (session) { + if (session && tier.cta === "buy") { if (session.planType === "free") { text = "Buy now"; } else { @@ -69,19 +44,38 @@ 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 }); + if (tier.cta !== "buy") { + return; + } + 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 +85,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 +114,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} + {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..15094b1e2b 100644
--- a/docs/components/Footer.tsx
+++ b/docs/components/Footer.tsx
@@ -1,4 +1,3 @@
-import { ThemeToggle } from "@/components/fumadocs/layout/theme-toggle";
import { cn } from "@/lib/fumadocs/cn";
import LogoDark from "@/public/img/logos/banner.dark.svg";
import LogoLight from "@/public/img/logos/banner.svg";
@@ -9,7 +8,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 +24,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 +70,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 +147,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. +