docs: Update exporter examples

[matthewlipski]

This PR unifies and cleans up the code across the export/import examples, and overhauls the styling so that each of them have a clean & matching look.

[vercel]

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

Project	Deployment	Preview	Updated (UTC)
blocknote	Error		Sep 12, 2025 3:57pm
blocknote-website	Ready	Preview	Sep 12, 2025 3:57pm

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1989

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1989

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1989

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1989

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1989

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1989

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1989

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@1989

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1989

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@1989

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1989

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1989

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1989

commit: 84be051

[nperez0111]

I'm not sure about this part of the change:

I've also changed the PDF and Email examples to just have a download file button

It demos well and shows the output immediately which is very useful for comparison, I'd prefer to keep it as it was.

[nperez0111]

I'm not sure that I get the motivation behind this change?

[nperez0111]

Sorry to do this to you again, but why is this not just the side-by-side diff? I feel like I'm missing why the change was made.

[matthewlipski]

If you look at the website currently, there's not really enough space to do a side-by-side view properly in the demos. We could make them stacked vertically instead (the editor and email/pdf view) but again it's not great because of the limited space. So I think having a toggle makes the most sense. Ofc for the playground, side-by-side would be better as we have almost the whole viewport to work with.

[nperez0111]

Ok, yea I get what you mean, I just worry about the discovery of it...

Is there an in-between here, where if we have the space it does a side-by-side? I'm not sure what the best thing to do is here.

[matthewlipski]

Hmm I think maybe if we switch between vertically stacked and side-by-side depending on available space that could work

[matthewlipski]

@nperez0111 I ended up doing the suggestion from my previous comment, and ended up overhauling the styling for all import/export examples since they were ugly as all hell. The stacked view is still really cramped for the PDF and email demos in the docs section, but everything looks a lot better now in the examples section.

[nperez0111]

Looks good now. Good fix to have