obsidian-tab-panels

Obsidian plugin to easily create tab panels to organize content into sections.

Install link: https://obsidian.md/plugins?id=tab-panels

Getting Started

Preview

https://github.com/user-attachments/assets/0eff7ace-bea9-4c7d-9a24-18d1b08f3e9c

Left - How it looks when it's rendered out (Live Preview/Reading mode)
Right - The markdown used to render it (Source mode)

Markdown used in the video.
Try copying it to view how it looks like in your vault!

Syntax

```tabs
--- Tab 1
Content for tab 1

--- Tab 2
Content for tab 2
```

[!Tip] Add (default) to the tab name to open it automatically
Example: --- Default tab (default)

Additional Features

These features are off by default. Go to settings to enable them.

Cache (Experimental)

The cache feature enables Obsidian to process data inside the tab panels, just like it does for regular markdown content. This means that links, headings, and tags within tab panels are now fully integrated with Obsidian's core functionality.

What this enables (similar to Obsidian's standard behaviour, but now works in tab panels):

• Backlinks and Outgoing links works.
• Renaming linked files updates markdown links in tab panels automatically.
• Headings in tab panels appear in the Outline (Table of Contents).
• Tags within tab panels are searchable and visible in the Tags view.
• Plugins like Dataview can query and use data within tab panels.

[!TIP] Enabling caching for the first time

To update the cache on the file, do one of these

• Edit the file. It can be anything, adding a space, deleting a character, etc. Note that this only updates the cache for the edited file only.
• Running "Rebuild cache" from the settings. This goes through your whole vault, finds all the data inside the tab panel code blocks and adds it to Obsidian's cache.

[!WARNING] This feature is marked as experimental due to its complexity and recent release. While testing has shown it works as intended, there may still be edge cases or unexpected issues.

• If you encounter any problems, please report them.
• This feature does not modify your files, so even if something goes wrong, your data is safe.
• To remove all cache from this plugin:
  1. Disable caching
  2. Reload Obsidian

Editing content (Experimental)

Click on the content to edit it.

Left - Live Preview
Right - Source mode

[!WARNING] Since this feature will modify the vault and is experimental, it's recommended to have a backup of the vault.
It works on my vault but I'm not sure how well it works with different themes and plugins.

Known Issues & Limitations

Adding code blocks inside the tab contents

If you use ``` tabs to define the code blocks, Obsidian will assume you would want to close the tab panels when you use ``` again when you want to open a markdown code block.

To solve this, do one of these:

• Use a different number of backticks for each code block.

```` tabs
--- Tab 1
``` python
print("Hello world!")
```
````

• Switch between ~~~ and ``` for declaring the tab panels block and for the markdown code block inside the tab contents.

~~~ tabs
--- Tab 1
``` python
print("Goodbye world!")
```
~~~

Interactivty with content

The plugin will only display a read-only version of the notes. Any interactivity will be lost. For example, checking a checkbox will not work.

Caching - Footnotes

To use footnotes inside tabs, ensure that both the footnote reference ([^1]) and the footnote definition ([^1]: definition) are placed within the same tabs codeblocks. If either the footnote reference or its definition is located outside the tabs codeblock, Obsidian won't register it and will just display it as text instead of a footnote.

[!NOTE] This doesn't apply for inline footnotes (^[Inline footnote]) as they combine the footnote reference and definition together.

Roadmap

• Add more settings to control styling

Please suggest any features you want!

Feedback

Have some feedback? Create a GitHub issue: Bug report or Feature request Questions (e.g. unsure how to use the plugin): GitHub discussions

Credits

• Syntax was inspired by Obsidian HTML Tabs, made by ptournet