Move backlinks from sidepanel into the document section (as in Roam)

Share & showcase
,
36

I’m usually run this snippet

(function() {
	const backlinks = document.querySelector('.backlink-pane')
	const doc = document.querySelector('.mod-root .CodeMirror-lines');
	doc.appendChild(backlinks);
})()

in a console (which could be opened using Ctrl+Shift+I

:warning: But be careful. It’s a hacky way which can break your experience with obsidian and cause unpredictable behavior.

This will bring backlinks section at the bottom of the root document only. You can restore Obsidian’s default behavior by refreshing the page (using Ctrl+R)

image
image1265×1022 97.4 KB

6 Likes
37

Love it :pray::pray::pray:

38

Great! So far the best approximation to how Roam works*. Any idea on how to make this piece of code run automatically every time I open Obsidian?

( * yeah, I get that Obsidian doesn’t want to copy Roam just for the sake of it, but I truly think Roam FOR NOW handles backlinks better, while Obsidian is WAY BETTER in all the other fronts - that’s why I’m here, although I got a Roam believer plan as a gift.)

1 Like
39

What platform(s) are you on?

40

Mac OS X.

41

Just tweaked @mrjackphil original code to include buttons from the backlinks panel, since they are useful to me:

(function() {
	const backlinks = document.querySelector('div[data-type="backlink"] > .view-content')
	const doc = document.querySelector('.mod-root .CodeMirror-lines');

    backlinks.setAttribute("style", "margin-top: 50px;");

	doc.appendChild(backlinks);
})()

This is the end result of my editor panel (using the “clutter free markdown” custom css altogether):

2880×1800 369 KB

I’m close to the perfect setup for my personal use case. The only thing missing is more/better context for backlinks but I can totally live with that.

As long as I have backlinks easily spottable, I don’t actually mind about the need to click on them to get context.

Next step is figure out how to make this piece of code run by itself :slight_smile:

4 Likes
42

I would love to have this (back again), but I get this error…

})()

Uncaught TypeError: Cannot read property ‘setAttribute’ of null at :5:15 at :8:3

Any idea what I can do about it?

43

I don’t know enough about JavaScript and JavaScript for Automation to know how to set this up offhand, but Keyboard Maestro would provide an easy way of running JXA whenever you activate Obsidian:
https://wiki.keyboardmaestro.com/action/Execute_a_JavaScript_For_Automation

44

Any idea what I can do about it?

You need to have the backlinks panel activated somewhere, otherwise the JS snipped does not find it. I have it in the collapsed sidebar on the right. Do a F5 or CMD+R before running the code just to make sure.

45

Boom! Did the trick, nicely nice. Thanks @mark1nhu

1 Like
46

Just wanted to say this is insane.
Wow.

I played around with the CSS a bit to make it a bit more inline with the document. Looks even better. The CSS below is smart enough to apply this only to this hacked view, so if you want to keep your regular styles for sidebar viewing you can

Cheers

.CodeMirror-lines > .view-content > .backlink-pane > .side-dock-collapsible-section-header {
    padding-left: 0px;
    font-size: 20px;
    font-weight: 700;
}
.CodeMirror-lines >.view-content > .backlink-pane .search-result-container {
  padding: 0px !important;
}

.CodeMirror-lines >.view-content > .nav-header > .nav-buttons-container {
  position: relative;
  float: right;
}

.CodeMirror-lines > .view-content > .backlink-pane {
  clear: both;
}

image
image762×638 57.4 KB

3 Likes
47

A post was split to a new topic: Need help formatting button CSS in Obsidian

48

Did anybody of you find a way to enable this in multiple panels? I’m on Andy v2 and would love to have this hacky workaround under every note.

Would appreciate any hints!

1 Like
49

Do the backlinks disappear for anyone else after entering the graph view?

50

hey guys,

Does this still work for version 0.9.7 I’m aware the javascript version is no longer working

I tried the css method, but pressing the button in preview mode doesn’t do anything for editing mode in my case.

Thanks

51

Did a plugin for it. Should be a part of Community Plugins soon.

Yep, it’s already in Community Plugins

4 Likes
52

Are Community Plug-ins available directly in the Obsidian ‘app’ or to be downloaded from GitHub?

1 Like
53

They are available directly from app. Obsidian 0.9.9

1 Like
54

The plugin works great! Thanks!

55

Do you think it’d be possible to make the backlinks stay in preview mode too?

1 Like