Awesome
Sliding Panes (Andy Matuschak Mode) Obsidian Plugin
Sliding Panes (Andy Matuschak Mode) as a plugin for Obsidian.
This plugin changes the way panes in the main workspace are handled — inspired by
the UI of Andy Matuschak's notes.
Instead of shrinking the workspace to fit panels, the panels will remain a fixed
width (but resizable) and stack so you can scroll between them. Note headers are rotated and added
to the left of the pane like a spine (optional), and will stack up as you scroll (also optional), allowing
easy navigation between them.
(Note: To open links in a new pane in Obsidian, ctrl/cmd click them)
Other Features
- Note headers stack up on the right as well as the left.
- Changing an active pane scrolls that pane into view.
- Togglable without having to copy CSS into your theme.
- Togglable features, such as the rotated headers and stacking
Settings
- Toggle Sliding Panes - Turns sliding panes on or off globally (also available via command/hotkey)
- Leaf Auto Width - If on, the width of the pane should fill the available space (also available via command/hotkey)
- Leaf Width - The default width of a single pane
- Toggle rotated headers - Rotates headers to use as spines (also available via command/hotkey)
- Swap rotated header direction - Swaps the direction of rotated headers (also available via command/hotkey)
- Toggle stacking - Panes will stack up to the left and right (also available via command/hotkey)
- Spine Width - The width of the rotated header (or gap) for stacking
Compatibility
Custom plugins are only available for Obsidian v0.9.7+.
The current API of this repo targets Obsidian v0.10.9.
Notes
This is all very expermental at the moment, so parts might not work, etc.
It still gets a bit slow if you're loading a lot of documents, so try not to load too many at once.
Installation
From within Obsidian
From Obsidian v0.9.8, you can activate this plugin within Obsidian by doing the following:
- Open Settings > Third-party plugin
- Make sure Safe mode is off
- Click Browse community plugins
- Search for this plugin
- Click Install
- Once installed, close the community plugins window and activate the newly installed plugin
Updates
You can follow the same procedure to update the plugin
From GitHub
- Download the Latest Release from the Releases section of the GitHub Repository
- Extract the plugin folder from the zip to your vault's plugins folder:
<vault>/.obsidian/plugins/
Note: On some machines the.obsidian
folder may be hidden. On MacOS you should be able to pressCommand+Shift+Dot
to show the folder in Finder. - Reload Obsidian
- If prompted about Safe Mode, you can disable safe mode and enable the plugin. Otherwise head to Settings, third-party plugins, make sure safe mode is off and enable the plugin from there.
Security
Third-party plugins can access files on your computer, connect to the internet, and even install additional programs.
The source code of this plugin is available on GitHub for you to audit yourself, but installing plugins into Obsidian is currently a matter of trust.
I can assure you here that I do nothing to collect your data, send information to the internet or otherwise do anything nefarious with your system. However, be aware that I could, and you only have my word that I don't.
Development
This project uses Typescript to provide type checking and documentation.
The repo depends on the latest plugin API in Typescript Definition format, which contains TSDoc comments describing what it does.
Note: The Obsidian API is still in early alpha and is subject to change at any time!
If you want to contribute to development and/or just customize it with your own tweaks, you can do the following:
- Clone this repo.
npm i
oryarn
to install dependenciesnpm run build
to compile.- Copy
manifest.json
,main.js
andstyles.css
to a subfolder of your plugins folder (e.g,<vault>/.obsidian/plugins/<plugin-name>/
) - Reload obsidian to see changes
Alternately, you can clone the repo directly into your plugins folder and once
dependencies are installed use npm run dev
to start compilation in watch mode.
You may have to reload obsidian (ctrl+R
) to see changes.
Pricing
Huh? This is an open-source plugin I made for fun. It's completely free. However, if you absolutely have to send me money because you like it that much, feel free to throw some coins in my hat via the following:
Version History
3.3.0
- Sliding panes should now work as expected in popout windows!
- Pane resizing is back (but not saved to the workspace)
- Some previous dodginess when toggling the plugin on and off and attempting to resize panes has been resolved
- (Some) optimisations to streamline and speed things up a little bit.
3.2.5
- Quick fix to prevent sliding panes in popout windows, as the experience is currently borked.
3.2.4
- Fixed some focus issues with Obsidian 0.15
- Added seperate options for desktop and mobile leaf width (thanks @Bevaz)
3.2.3
- Add an option to select text-orientation (thanks @yo-goto)
- Allow user to disable smooth animations (thanks @cfree3)
3.2.2
- Fixed closing notes activating the leftmost note
- Fixed position of search suggestions
- Properly remove custom styling when moving a pane into a sidebar
- Added the note title to the icon, so if your panes are stacked, but you're not rotating headers, you can hover over the icon to see the note title.
3.2.1
- Changed the name slightly to drop the "Matuschak". Sorry Andy, but your name's just a tad unwieldy...
- Styling tweaks to better center the elements of rotated headers
- Fixed the ugly shadow smudge introduced in the previous release
- Fixed a code typo which was causing issues with opening and closing background panes
3.2.0
- Added an "auto width" mode, where each pane will take up the available space between the spines on the left and right
- Fix suggestion container positioning for tags (and related console errors) - Thanks, yet again, Eric Hall
- Fixed orientation of emojis in rotated headers (thanks GreenChocho and NothingIsLost)
- Fixed an error when loading workspaces
- Fixed compatibility issues with MrJackphi's Backlinks into the document plugin
3.1.1
- Quick fix for rightmost header hiding and extra scrollbar
3.1.0
- Update the link suggestion container position (thanks again, @erichalldev)
- Add the option (and command palette command) to turn stacking off (i.e. slide-off mode, like the v1 of Andy's Mode CSS)
- Add the option (and command palette command) to make the rotated header titles face the other direction
- Add a command palette command to toggle rotated headers
- Allow pane resizing (except the last pane, because it doesn't have a handle currently)
- Fix an issue with switching to off-screen panes not animating correctly (can still jump without animation if you switch too far too quickly)
3.0.2
- Add a setting to disable rotated headers
- Update focusLeaf to scroll just far enough to make a leaf fully visible if it's out of view to the right (thanks @erichalldev)
- Activate adjacent leaf when active leaf is closed (thanks again, @erichalldev)
- Close leaves which happen to have a file open that is deleted
v3.0.1
- Quick fix to prevent the plugin from affecting sidebars
v3.0.0
New Features (vs the CSS-only version)
- Note headers stack up on the right as well as the left.
- Changing active pane scrolls that pane into view.
- Togglable without having to copy CSS into your theme.