Canvas Support

[ohmygaugh-crypto]

Is your feature request related to a problem? Please describe.
Just want to be able to present my digital garden in a canvas format for coding tutorials.

Describe the solution you'd like
Support Obsidian.canvas files

Describe alternatives you've considered
BrainPress

Obsidian-webpage-export

Additional context

I might just utilize the aforementioned plugin in conjunction with quartz.

[ahmed2m]

Obsidian just released the JSON canvas blog post and the spec.

However no word yet if they are going to release their own renderer for it.

[saberzero1]

Obsidian canvas type definitions:

https://github.com/obsidianmd/obsidian-api/blob/master/canvas.d.ts

I'll see if I can throw something together.

[metruzanca]

Been using quartz for a while now, very pleased. With jsoncanvas spec being open sourced and very little things being made with it so far, it seems so fresh and fun to make something cool with it.

@saberzero1 I would also be interested in helping with this feature. Though I'm not sure what is exactly feasible with quartz; beyond plugins, I've not really looked into its internals too much (I just patched a few things for personal use).

In obsidian the canvas is a full page thing (that can of course like other pages, be embedded). In quartz, AFAIK, there's currently only a markdown renderer, so I believe to add canvas support we'd need to add a different type of page that can be rendered.

[saberzero1]

Been using quartz for a while now, very pleased. With jsoncanvas spec being open sourced and very little things being made with it so far, it seems so fresh and fun to make something cool with it.

@saberzero1 I would also be interested in helping with this feature. Though I'm not sure what is exactly feasible with quartz; beyond plugins, I've not really looked into its internals too much (I just patched a few things for personal use).

In obsidian the canvas is a full page thing (that can of course like other pages, be embedded). In quartz, AFAIK, there's currently only a markdown renderer, so I believe to add canvas support we'd need to add a different type of page that can be rendered.

I'm working on a proof of concept for now. I have a very barebones version that turns the JSON content inside a .canvas files into basic html. Then, parses that html to a Element tree. It then adds that to the data as canvas. Then, I present it to the Obsidian Flavored Markdown renderer as markdown, which will render it as a "canvas" pages if data.canvas !== undefined.

I'll open a draft pull request later to keep track of progress and to allow feedback. The goal for now is not to get it all perfect. It's just to see how feasible it is. Once we have a working proof of concept, then we can discuss semantics/styling/etc.

[jackyzha0]

@saberzero1 how are you displaying it on the web side? just HTML elements or are you doing something with D3 or canvas?

[saberzero1]

@saberzero1 how are you displaying it on the web side? just HTML elements or are you doing something with D3 or canvas?

Currently in plain html with absolute positioning html elements. The canvas specification gives x and y coordinates as well as width and height, all in pixels. I'll have to look some more into connecting the elements with lines similar as canvas.

D3 is an option, as well as canvas, but I am unsure about the performance of a larger/populated canvas. Obsidian's implementation in-app is based on plain html and four anchor points on every element. Every connection has a four values: the source node, the target node, the side to start from (up, down, left, or right) on the source node, and the side to connect in the target.

Furthermore, we might want some changes on the sidebar displays when in canvas, especially on mobile. But that is something we'll tackle when we get there I guess.

[jackyzha0]

Does the Obsidian Canvas implementation allow panning and zooming of the canvas? If not, perfectly happy going down the HTML route

[saberzero1]

Does the Obsidian Canvas implementation allow panning and zooming of the canvas? If not, perfectly happy going down the HTML route

Sort of.

Obsidian canvas is not exactly a canvas, although it behaves as one. Obsidian's canvas allows panning and zooming, but it is all divs, no <canvas> element.

They achieve this by applying css transforms: translates for the panning and scale for zooming. This give the illusion of a canvas, but with the performance of plain html.

[jackyzha0]

<canvas> is actually much more performant for large boards so the perf tradeoff is a bit weird there (though I doubt people have enough things on their canvas where it matters anyways)

[saberzero1]

<canvas> is actually much more performant for large boards so the perf tradeoff is a bit weird there (though I doubt people have enough things on their canvas where it matters anyways)

I guess another consideration is that Obsidian allows markdown embedding inside nodes. As in, transcluding markdown files, as well as websites (as iframe). A html-based approach would allow for more familiar Quartz functionality (popovers mostly), while keeping behavior consistent with Obsidian.

I'll look more into the canvas element after I have a basic implementation of the full Obsidian Canvas specification down.

[saberzero1]

There is an ongoing discussion inside the JSON Canvas specification repository about a proper JSON schema specification for JSON Canvas.

obsidianmd/jsoncanvas#10

@jackyzha0 Obsidian has an implementation of (a part) of their JSON Canvas specification inside their documentation. It looks promising. I could propose an implementation in Quartz based on their implementation, but theirs is Javascript-based, not Typescript-based. There are several pull request in the same repository aimed at a full JSON schema, which would allow for proper Typescript typings. I feel like it would be wise to wait for a consensus on the JSON schema specification before fully integrating in Quartz. What are your thoughts on this?

https://github.com/obsidianmd/jsoncanvas/blob/main/assets/canvas.js

https://github.com/obsidianmd/jsoncanvas/blob/main/.layouts/canvas.html

[franciscoabenza]

how can I find your branch @saberzero1 ?

[ThatTakashi]

This would be a great feature to see as part of quartz!

[zkhan96]

Whats the current workaround to rendering canvases?

[saberzero1]

Whats the current workaround to rendering canvases?

https://github.com/KosmosisDire/obsidian-webpage-export

Quartz currently does not support JSON Canvas. I want to eventually implement this, but there are several large milestones that I am currently focusing on first and the full specification for JSON Canvas has still not been fully decided on.

[cyber-arsenull]

Is there any tutorial around or resource on how to integrate a canvas exported through https://github.com/KosmosisDire/obsidian-webpage-export into quartz?

Edit:
I was able to get pretty far with:

1. Generating HTML file using obsidian-webpage-export plugin from a canvas file
2. Copying the HTML file to the same path in the contents/
3. Copying over the lib folder generated by the plugin into contents/
4. Put an iframe referencing the HTML file in a markdown file

The only issue is that I can't get the links in the canvas to correctly open in the browser rather than the iframe.
Even with target="_parent" in the <a> tag that has the link.

[gracchen]

any updates?

[franciscoabenza]

+1

…

On Sat, 22 Feb 2025 at 22:08, Grace Chen ***@***.***> wrote: any updates? — Reply to this email directly, view it on GitHub <#927 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFIHMR5CGI6YCQIRTRM6NXD2RDROPAVCNFSM6AAAAABQOMSVB6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZWGM4TMMZVHE> . You are receiving this because you commented.Message ID: ***@***.***> [image: gracchen]*gracchen* left a comment (jackyzha0/quartz#927) <#927 (comment)> any updates? — Reply to this email directly, view it on GitHub <#927 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFIHMR5CGI6YCQIRTRM6NXD2RDROPAVCNFSM6AAAAABQOMSVB6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNZWGM4TMMZVHE> . You are receiving this because you commented.Message ID: ***@***.***>

[DeanLemans]

bump