Displaying sheets correctly when embedded in Excalidraw

[zsviczian]

Just discovered Sheets! I love it.

I tried embedding it into my Excalidraw scene, but it does not render correctly.
I can see sheets embeds into Obsidian Canvas correctly. Excalidraw uses the same obsidian Canvas node object, so it should be possible to embed sheets into Excalidraw similarly.

Currently, since viewType === "excel-pro-view" is not recognized by Excalidraw, sheets is rendered in a workspace leaf:

https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/403467c1349d19fc2623aad1e76e9594e25e091e/src/view/components/CustomEmbeddable.tsx#L523-L530

However, even if I modify the code and render sheets as a canvas node, I get an empty sheet

Interestingly, even if I embed sheet into a markdown note, and embed that note to Excalidraw, I get the same empty view.

2026-03-24.08-10-31.mp4

My hunch is, this is some css issue, but can't find the solution.

Would appreciate if you'd collaborate to help make sheet work in Excalidraw.

[ljcoder2015]

I installed Excalidraw version 2.21.2 and found that it works well.
However, the rendered width and height are somewhat incorrect.

[zsviczian]

Yes. I was not clear enough. The example I shared above comes from my attempt of embedding Sheets into a canvas node instead of a workspace leaf (not 2.21.2, but rather 2.22.0-beta)
It is not clear why sheets is rendered incorrectly in a workspace leaf (like the screen recording you shared). I looked at css, but couldn't see what is driving the sizing.
Are you doing anything specific in your code to display sheets correctly in Obsidian Canvas? If yes, where and what?

[ljcoder2015]

I didn’t apply any special handling; I’ll look into it and see how to fix it.

[ljcoder2015]

I found the issue. The content rendered in the canvas node is generated via markdownPostProcessor, while Excalidraw inserts a workspace node. In my styles, I used 100vh, which is likely causing the incorrect height.

Excalidraw could consider using markdownPostProcessor to render nodes, or I’ll plan to update the styles later to remove the use of vh units.

[zsviczian]

The workspace leaf used for sheets is only a catch all fallback for views I can't otherwise handle.

Here's the Excalidraw main.js that I am using to test. The difference between this and 2.21.2 is that viewType === "excel-pro-view" is rendered in a canvas node, that triggers markdown post processing. However, that is likely some timing issue, because the spreadsheet is not rendered, only the placeholder.

main.zip

Can you try to see if you can figure out why the sheet is not loaded with this?
Also this main.js includes debug codemap that should help with understanding what is going on.

[zsviczian]

I compared the HTML within the canvas node between Obsidian canvas and using Excalidarw main.js (in the zip above). There is one key difference: canvas width. The left side is the canvas node DOM structure in Excalidraw, the right side is the same in Canvas.
The question, where does the width come from?

Left side is Excalidraw, right side is Obsidian Canvas.
Manually changing the width value solves nothing.
I can imagine this is an issue with rendering sequence, maybe in canvas the canvas node is first created, then the contents is rendered, where as in Excalidraw the container is size 0 at time of rendering, however in this case resizing the embeddable should trigger resize observer.

[ljcoder2015]

I used a 1-second timer to delay the rendering.

obsidian-sheet-plus/src/post-processor/univer.ts

Line 24 in 4035704

setTimeout(() => {

[zsviczian]

Solved it partially by adding two variables to the Excalidraw Embeddable node, and adding this css to Excalidraw:

.excalidraw__embeddable__outer .lj-content-view {
	width: var(--embeddable-width);
	height: var(--embeddable-height);
}

.excalidraw__embeddable__outer #sheet-box {
	height: calc(var(--embeddable-height) - var(--lj-toolbar-height) + 40px);
}

.excalidraw__embeddable__outer .lj-univer .univer-relative.univer-grid {
    width: var(--embeddable-width);
}

However, there is still an issue with how the cell editor is displayed. The cell editor offset and size depend not only on where I click in the sheet, but on the zoom factor of the Excalidraw scene, and the scale factor of the sheet. If I resize the sheet with SHIFT+Resize, it will scale the sheet. If I resize it just be resizing the embeddable element, then scale does not change.

Desktop-2026-03-25.21-05-15.mp4

Excalidraw allows embeddables to have a light or dark theme independent of Obsidian's theme. Sheet Plus handles theming differently. The theme is always aligned with Obsidian theme, not the canvas theme.

All the styling, including the zoom factor and element scale, is available on

<div
  class="theme-light canvas-node transparent"
  style="width: 100%; height: 100%; border-radius: var(--embeddable-radius); color: var(--text-normal); touch-action: auto; --embeddable-width: 1029.786px; --embeddable-height: 537.742px; --embeddable-scaleX: 1.708; --embeddable-scaleY: 1.708; --scene-zoom: 0.592; --canvas-background: transparent; --background-primary: transparent; --canvas-border: #FF740000; --canvas-color: #FF740000;"
>

which hosts the canvas node that hosts sheet plus.

Excalidraw 2.22.0-beta-1, available via BRAT includes these changes.

[ljcoder2015]

That’s great—this issue was fixed so quickly.

Dark mode can be switched manually in the plugin settings. I implemented a feature that listens for Obsidian’s dark mode changes and switches automatically.
https://docs.ljcoder.com/guide/features/dark-mode.html#dark-mode

As for the input field issue, I don’t have any clues for now.

[zsviczian]

Would be great to find a better solution for dark/light mode switch, such as following theme-light, theme-dark in the DOM tree. I force switch markdown embeddable to dark/light as the user switches the Excalidraw scene from dark to light by adding theme-light, theme-dark to the .canvas-node element. Setting dark/light mode in plugin settings is not an ideal solution. You may want light mode during the day, dark mode during the evening. But in case of Excalidraw, as you open different drawings some might be in light mode, others in dark mode, depending on your needs. Ideally sheets should adjust.

Maybe you could add a 3rd option in settings for theme management called "Adapt to theme". In this case you could get theme with this function:

export function getTheme(el: HTMLElement): "dark" | "light" {
  const themedAncestor = el.closest(".theme-dark, .theme-light");
  if (themedAncestor?.classList.contains("theme-dark")) return "dark";
  if (themedAncestor?.classList.contains("theme-light")) return "light";

  // fallback if no themed ancestor
  if (document.body.classList.contains("theme-dark")) return "dark";
  return "light";
}

const darkMode = getTheme(univerEl) === 'dark'
const { univerAPI } = createUniver(plugin.availableFonts, options, id, plugin.settings.mobileRenderMode, darkMode, true);

what do you think?

---

The popout offset is a css transformation issue. The same issue impacts canvas, if I embed an Obsidian canvas into Excalidraw as an embeddable. I've tried resolving it couple of times, but did not get far... but also didn't try very hard, since I simply never use Canvas. But with sheets I might actually have the incentive to figure out how to ensure embedded nodes work properly.

[ljcoder2015]

Regarding dark mode switching, adding a “follow theme” option can be confusing, because it already follows Obsidian’s theme changes automatically. Users will only notice the effect of this option when embedding a sheet in Excalidraw.

In most cases, users expect it to stay consistent with Obsidian’s theme. Otherwise, a light page suddenly appearing in dark mode can be quite jarring.

[zsviczian]

what is the purpose of this?

[ljcoder2015]

The initial version only supported manual switching.

Perhaps I could add a special handling: when used in Excalidraw, set it to follow the theme. Currently, the configuration is applied globally, so it’s not possible to have different themes on different pages.

[zsviczian]

If you use the suggested solution

const darkMode = getTheme(univerEl) === 'dark'
const { univerAPI } = createUniver(plugin.availableFonts, options, id, plugin.settings.mobileRenderMode, darkMode, true);

That should result in no change to normal markdown files, and should work well with Excalidraw. If I understand your code correctly, you shouldn't need any other special handling.

[ljcoder2015]

Dark mode following the theme has been implemented in version 2.8.9.