docs: add read-only example

[matthewlipski]

Summary

This PR adds a basic read-only editor example to make testing easier.

Rationale

See above.

Changes

See above.

Impact

N/A

Testing

N/A

Screenshots/Video

N/A

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

Summary by CodeRabbit

• New Features

  • Added a new "Read-only Editor" example demonstrating how to configure a BlockNote editor in read-only mode while displaying all content types.

• Documentation

  • Added documentation for the read-only editor example with links to editor setup and schema reference guides.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	Apr 1, 2026 0:10am
blocknote-website	Ready	Preview	Apr 1, 2026 0:10am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: dd7ff1f3-1b2a-48e3-a432-c8340b8881ef

📥 Commits

Reviewing files that changed from the base of the PR and between a9e8db6 and 0830db3.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (1)

• examples/01-basic/16-read-only-editor/README.md

✅ Files skipped from review due to trivial changes (1)

• examples/01-basic/16-read-only-editor/README.md

---

📝 Walkthrough

Walkthrough

Adds a new "Read-only Editor" example with full project files (App component, entry points, build/config), documentation, and package metadata. The playground registry was updated to include the new example and a shadowdom example path was corrected.

Changes

Cohort / File(s)	Summary
Example Metadata & Build Setup examples/01-basic/16-read-only-editor/.bnexample.json, examples/01-basic/16-read-only-editor/package.json, examples/01-basic/16-read-only-editor/tsconfig.json, examples/01-basic/16-read-only-editor/vite.config.ts	Added example metadata enabling playground/docs, package.json with dependencies and scripts, TypeScript config, and Vite config with conditional aliases for local development.
Entrypoints examples/01-basic/16-read-only-editor/index.html, examples/01-basic/16-read-only-editor/main.tsx	Added HTML mount point and React 18 root initialization that renders the App component.
Application examples/01-basic/16-read-only-editor/src/App.tsx	New default-exported React App that creates a BlockNote editor instance with extensive initial content and renders BlockNoteView with editable={false} (read-only).
Documentation examples/01-basic/16-read-only-editor/README.md	Added README describing the read-only example and links to relevant BlockNote docs.
Playground Registry playground/src/examples.gen.tsx	Inserted new read-only-editor example entry (path examples/01-basic/16-read-only-editor) and corrected the shadowdom example pathFromRoot from examples/01-basic/14-shadowdom to examples/01-basic/15-shadowdom.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I hopped in to show content, calm and clear,
A view that's frozen, gentle, and sincere,
No keys to press, just pages to admire,
Read-only blossoms, quiet as a briar.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The description follows the template structure but lacks substantive detail in critical sections, using placeholder text ('See above') for Rationale and Changes, which undermines clarity.	Expand Rationale and Changes sections with specific details about why this example is needed and what files/components were added to implement it.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: Read-only example' clearly and concisely describes the main change: adding a new read-only editor example to the codebase.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch read-only-example

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/01-basic/16-read-only-editor/index.html`:
- Line 1: Add the HTML5 DOCTYPE declaration before the existing <html> tag in
the document by inserting <!DOCTYPE html> at the very top of the file so the
page validates with HTMLHint and browsers render in standards mode; ensure the
DOCTYPE appears immediately above the existing <html lang="en"> element.
- Around line 6-8: Replace the invalid HTML comment inside the <script> block in
the file by removing the <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY --> or
converting it to a valid JavaScript comment; locate the <script> tag in
examples/01-basic/16-read-only-editor/index.html and either delete the commented
line entirely or change it to a JS comment using // or /* */ so the script
contains only valid JavaScript.
In `@examples/01-basic/16-read-only-editor/vite.config.ts`:
- Around line 22-29: The alias mappings for "@blocknote/core" and
"@blocknote/react" in vite.config.ts point to "../../packages/..." but are one
level too shallow; update the path.resolve calls used in the alias object (the
entries for "@blocknote/core" and "@blocknote/react") to use
"../../../packages/..." so they correctly resolve from
examples/01-basic/16-read-only-editor to the repository root.
- Line 17: The path check using fs.existsSync(path.resolve(__dirname,
"../../packages/core/src")) is using the wrong relative depth; update the string
"../../packages/core/src" to "../../../packages/core/src" so it correctly
resolves from examples/01-basic/16-read-only-editor to the repo root packages
directory (i.e., change the path literal used in the fs.existsSync/path.resolve
call in vite.config.ts).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a9791640-7ad8-494c-9557-ee50b161520a

📥 Commits

Reviewing files that changed from the base of the PR and between a850078 and a9e8db6.

📒 Files selected for processing (18)

• examples/01-basic/15-shadowdom/.bnexample.json
• examples/01-basic/15-shadowdom/README.md
• examples/01-basic/15-shadowdom/index.html
• examples/01-basic/15-shadowdom/main.tsx
• examples/01-basic/15-shadowdom/package.json
• examples/01-basic/15-shadowdom/src/App.tsx
• examples/01-basic/15-shadowdom/src/vite-env.d.ts
• examples/01-basic/15-shadowdom/tsconfig.json
• examples/01-basic/15-shadowdom/vite.config.ts
• examples/01-basic/16-read-only-editor/.bnexample.json
• examples/01-basic/16-read-only-editor/README.md
• examples/01-basic/16-read-only-editor/index.html
• examples/01-basic/16-read-only-editor/main.tsx
• examples/01-basic/16-read-only-editor/package.json
• examples/01-basic/16-read-only-editor/src/App.tsx
• examples/01-basic/16-read-only-editor/tsconfig.json
• examples/01-basic/16-read-only-editor/vite.config.ts
• playground/src/examples.gen.tsx

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2612

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2612

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2612

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2612

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2612

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2612

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2612

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2612

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2612

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2612

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2612

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2612

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2612

commit: 0830db3