Setting z-index in canvas (with workaround)

What I’m trying to do

I would like a way to quickly set the z-index of nodes while in canvas so that I can stack them in a predictable way.

Things I have tried

Currently, I add a cssclass in the nodes frontmatter with a value of Z0, Z1, Z2, ect. With the following css snippet enabled, it works.

css snippet
.canvas-node:has(.Z0) {
    z-index:0 !important;
.canvas-node:has(.Z1) {
    z-index:1 !important;
... and on

The issue is, editing the cssclass in the yaml of each node manually is a bit of a pain. I thought templater template below might be able to streamline the process, but I get the error message below.

templater script

//const file = app.workspace.getActiveFile(); <- didn't work either
let file = tp.file.title+".md";
const cssclass = tp.frontmatter.cssclass;

const {update, autoprop, createYamlProperty, getPropertyValue} = app.plugins.plugins["metaedit"].api;

if (cssclass === undefined) {
	let z = await tp.system.prompt("z-index value?","Z");
	await createYamlProperty("cssclass",z,file);
} else {
	let z = await tp.system.prompt("z-index value?",String(cssclass));
	await update("cssclass",z,file);


It seems that within canvas, templater can’t see the active file, even I insert the template while editing the node. It works just fine if I’m editing the note in the editor.

Ideal workflow

In a perfect world, canvas would include send back and bring forward commands that could be bound to a hotkey.

Any suggestions? I’m fine with my workaround but wish it was a bit more streamlined.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.