{"id":44315871,"url":"https://github.com/ptournet/obsidian-html-tabs","last_synced_at":"2026-02-11T05:08:59.474Z","repository":{"id":196789555,"uuid":"686904637","full_name":"ptournet/obsidian-html-tabs","owner":"ptournet","description":"Obsidian plugin allowing the creation and rendering of Tabs and tab panels in your notes. ","archived":false,"fork":false,"pushed_at":"2023-12-08T17:42:36.000Z","size":371,"stargazers_count":22,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-12-08T18:40:21.517Z","etag":null,"topics":["obsidian","obsidian-md","obsidian-plugin","tabs","tabs-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ptournet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["ptournet"],"custom":["https://paypal.me/ptournet"]}},"created_at":"2023-09-04T07:40:25.000Z","updated_at":"2023-12-06T09:55:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"4c06ff87-3dd5-47c6-a664-ad86f108f3b9","html_url":"https://github.com/ptournet/obsidian-html-tabs","commit_stats":null,"previous_names":["ptournet/obsidian-html-tabs"],"tags_count":3,"template":null,"template_full_name":null,"purl":"pkg:github/ptournet/obsidian-html-tabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptournet%2Fobsidian-html-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptournet%2Fobsidian-html-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptournet%2Fobsidian-html-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptournet%2Fobsidian-html-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ptournet","download_url":"https://codeload.github.com/ptournet/obsidian-html-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptournet%2Fobsidian-html-tabs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29327113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T03:52:29.695Z","status":"ssl_error","status_checked_at":"2026-02-11T03:52:23.094Z","response_time":97,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["obsidian","obsidian-md","obsidian-plugin","tabs","tabs-component"],"created_at":"2026-02-11T05:08:59.418Z","updated_at":"2026-02-11T05:08:59.469Z","avatar_url":"https://github.com/ptournet.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ptournet","https://paypal.me/ptournet"],"categories":[],"sub_categories":[],"readme":"# Obsidian HTML-Tabs\n\nThis plugin allows you to easily embed tab controls in your notes.\n\n## Example\n![HTML Tabs Demo](docs/images/HTML%20Tabs%20Demo.gif)\n\n## Installation\n\n### Download from Github\n\nThis is the only way to install the plugin pending its validation to appear on the list of official community plugins:\n1. Go to https://github.com/ptournet/obsidian-html-tabs/releases\n2. Download the latest release.\n3. Extract and put the three files (`main.js`, `style.css`, `manifest.json`) to folder `{{obsidian_vault}}/.obsidian/plugins/html-tabs`\n4. In `Settings \u003e Community plugins`, activate **HTML Tabs**\n\n### Install from Plugin Store\n\nFollow the steps below to install **HTML Tabs**:\n1. Open `Settings \u003e Community plugins`\n2. Click `Browse` in the Community plugins section\n3. Search for `HTML Tabs`\n4. Clink `Install` and then `Enable`\n\n## Usage\n\nThe definition of a tab control containing 3 tabs has the following structure:\n```markdown\n~~~tabs\n---tab \u003clabel-of-first-tab\u003e\n\u003ccontent-of-first-tab\u003e\n---tab \u003clabel-of-second-tab\u003e\n\u003ccontent-of-second-tab\u003e\n---tab \u003clabel-of-third-tab\u003e\n\u003ccontent-of-third-tab\u003e\n~~~\n```\nor:\n~~~markdown\n```tabs\n---tab \u003clabel-of-first-tab\u003e\n\u003ccontent-of-first-tab\u003e\n---tab \u003clabel-of-second-tab\u003e\n\u003ccontent-of-second-tab\u003e\n---tab \u003clabel-of-third-tab\u003e\n\u003ccontent-of-third-tab\u003e\n```\n~~~\n\nThe `\u003clabel\u003e` of a tab is in plain text (no markdown allowed), while its `\u003ccontent\u003e` can use the full Obsidian Markdown syntax. It's particularly possible to embed antother note (with the syntax `![[Note-to-embed]]`) or have a fenced code block.\n\nIn this case, you have to be careful not to use the same characters as the ones for defining your tabs: if you used \n```\n~~~tabs\n~~~\n```\nthe code blocks in your tabs should be defined as:\n~~~\n```\u003clang\u003e\n```\n~~~\nbut if you're used to defining you code blocks as:\n```\n~~~\u003clang\u003e\n~~~\n```\nthen you should define your tabs as: \n~~~\n```tabs\n```\n~~~\n\n## Customization\n\nFor the time being, if you want to change the way your tabs look, you have to use a `CSS Snippet`.\n\nFor that, you'll first need to create a `html-tabs.css` file in your `snippets` directory. If you don't know where it lives on your hard drive, you can locate it at the bottom of the `Appearance` page in your Obsidian `Settings`.\n\nYou can then ovveride the `html-tab*` classes defined in the `styles.css` file in the plugin directory.\n\n## Contributing\n\nYou are welcome to contribute to this plugin via bug reports, bug fixes, documentation, or general improvements. For a major feature, please make an issue about your idea / reach out to me so I can decide if and how to best implement it.\n\n## Pricing\n\nThis plugin is provided to everyone for free, however if you would like to say thanks or help support continued development, feel free to send a little my way through one of the following methods:\n\n[![GitHub Sponsors](https://img.shields.io/github/sponsors/ptournet?style=social)](https://github.com/sponsors/ptournet)\n[![Paypal](https://img.shields.io/badge/paypal-ptournet-yellow?style=social\u0026logo=paypal)](https://paypal.me/ptournet)\n\n## Credits\n\nThanks to `gapmiss/obsidian-alpinejs` which helped me integrating Alpine.js to get the tab switching working.\n\n## Limitations\n\nAs of now, there is no interaction between Obsidian and the content of the tabs. For instance, if there is a task in a tab and you check it, its status won't persist if you switch to another tab and come back... And this task won't be found by a query (datatview or tasks plugin). A heading on a tab won't show in the note Outline either.\n\n## Todo\n- [x] First version of README\n- [x] Validate on Android\n- [x] Create a test-vault and modify *dev* script\n- [x] Releasing v1.0.0\n- [x] Markdown rendering of label\n- [ ] Updating Obsidian cache\n  - [x] for Links (in order to have backlinks working)\n  - [ ] for Headings (in order to have the note Outline working)\n  - [ ] for Lists (in order to have Tasks woring)\n  - [ ] for Tags\n  - [ ] for Embeds\n  - [ ] for Sections\n- [ ] Create first Settings\n- [ ] Integrate labels in note outline\n- [ ] Ability to open note on a specific label/tab\n- [ ] Improve standard editing experience (place cursor in the right place in the right tab)\n- [ ] Improve embedded editing experience (if tab content is in another note, allow editing that note instead)\n- [ ] Buttons to easily create/edit tabs\n- [ ] More visual configuration (for people who don't master CSS)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fptournet%2Fobsidian-html-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fptournet%2Fobsidian-html-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fptournet%2Fobsidian-html-tabs/lists"}