{"id":18789041,"url":"https://github.com/gapmiss/obsidian-alpinejs","last_synced_at":"2025-09-09T21:35:19.052Z","repository":{"id":166825316,"uuid":"578061619","full_name":"gapmiss/obsidian-alpinejs","owner":"gapmiss","description":"Alpine.js framework for Obsidian","archived":false,"fork":false,"pushed_at":"2022-12-14T08:16:29.000Z","size":16957,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T09:12:07.059Z","etag":null,"topics":["alpinejs","obsidian-md","obsidian-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/gapmiss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-14T06:53:57.000Z","updated_at":"2024-04-04T21:43:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"c8330fc9-7b5b-4527-9ef5-e4e674616fc3","html_url":"https://github.com/gapmiss/obsidian-alpinejs","commit_stats":null,"previous_names":["gapmiss/obsidian-alpinejs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gapmiss/obsidian-alpinejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fobsidian-alpinejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fobsidian-alpinejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fobsidian-alpinejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fobsidian-alpinejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gapmiss","download_url":"https://codeload.github.com/gapmiss/obsidian-alpinejs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fobsidian-alpinejs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273233072,"owners_count":25068725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["alpinejs","obsidian-md","obsidian-plugin"],"created_at":"2024-11-07T21:06:31.131Z","updated_at":"2025-09-02T04:30:44.858Z","avatar_url":"https://github.com/gapmiss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# obsidian-alpinejs\n\nObsidian plugin that imports the [Alpine.js](https://alpinejs.dev/) node [package](https://www.npmjs.com/package/alpinejs).\n\n## notice\n\n\u003e ⚠️ NOTICE\n\u003e \n\u003e This plugin grants access to Obsidian's API and all of it's methods. Misuse (i.e. ignorance of the effects of running certain commands) could have detrimental effects, including, but not limited to, the loss of data. THIS PLUGIN IS FOR ADVANCED USE ONLY. \n\u003e \n\n\n## config\n\nThe plugin (`onload`) sets the `prefix` for Alpine's custom attribute.\n\n`Alpine.prefix(\"data-x-\")`\n\ne.g. `\u003cspan data-x-data=\"{}\"\u003e`\n\n## example\n\n```html\n\u003cdiv data-x-data=\"{ open: false }\"\u003e\n  \u003cbutton data-x-on:click=\"open = true\"\u003eExpand\u003c/button\u003e\n  \u003cdiv data-x-show=\"open\"\u003elorem ipsum dolor sit amet ...\u003c/div\u003e\n\u003c/div\u003e\n```\n\n![](assets/CleanShot–{Obsidian}-(example%20-%20obsidian-alpinejs%20-%20Obsidian%20v1.1.3)–[2022-12-13-23.26.25].gif)\n\n## plugin installation\n\n### clone this repo\n\n```bash\ncd /path/to/your/vault/.obsidian/plugins\ngit clone https://github.com/gapmiss/obsidian-alpinejs.git\ncd obsidian-alpinejs\n```\n\n### install packages and run\n\n```bash\nnpm i\nnpm run dev\n```\n\n### enable plugin\n\n1. open `Settings` → `Community plugins`\n2. enable the `Alpine.js` plugin.\n\n## caveats\n\n1. Javascript errors after adding new or editing current `Alpine.js` HTML blocks\n\t- solution: run command `reload app without saving`\n\t- or: close (`⇧` + `⌘` + `W`) and re-open vault window\n\n## examples\n\n#### accessing Obsidian's API\n\n```html\n\u003cbutton data-x-data=\"{ label: 'I ❤️ Alpine' }\"\n  data-x-text=\"label\"\n  data-x-on:click=\"new Notice('I ❤️ Alpine', 3377);\n    var a = this.app;\n    console.log(a);\n    console.log(a.workspace.containerEl);\n    console.log(a.vault.getName());\n    var vault = a.vault.getName();\n    new Notice('Vault name: ' + vault, 0);\n    var path = a.workspace.getActiveFile().path;\n    var root = a.vault.getRoot();\n    console.log(path);\n    console.log(root);\n    new Notice('Note path: ' + path, 3377);\"\u003e\n\u003c/button\u003e\n```\n\n![](assets/CleanShot–{Obsidian}-(example%20-%20obsidian-alpinejs%20-%20Obsidian%20v1.1.3)–[2022-12-13-23.37.50].gif)\n\n#### theme mode toggle\n\n```html\n\u003cbutton data-x-data=\"{ state: false, label: (this.app.vault.getConfig('theme') == 'moonstone') ? 'dark' : 'light' }\"\n  data-x-init=\"console.log('init');\"\n  data-x-on:click=\"\n    state = !state;\n    this.app.changeTheme( (this.app.vault.getConfig('theme') == 'moonstone') ? 'obsidian' : 'moonstone' );\"\n  data-x-bind:class=\"{ 'dark': state }\"\n  id=\"theme-toggler\"\u003e\n\u003c/button\u003e\n```\n\n![](assets/CleanShot–{Obsidian}-(example%20-%20obsidian-alpinejs%20-%20Obsidian%20v1.1.3)–[2022-12-14-00.15.04].gif)\n\n#### fetch remote JSON\n\n```html\n\u003cdiv data-x-data=\"{users: []}\" \n  data-x-init=\"await fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response =\u003e response.json())\n    .then(data =\u003e users = data)\"\u003e\n  \u003cdiv\u003e\n    \u003ctemplate data-x-for=\"user in users\"\n      :key=\"user.id\"\u003e\n      \u003cdiv style=\"display:inline-block; \n        width:50%;\n        padding: .77em;\"\u003e\n        \u003cdiv style=\"border-radius:10px; \n          padding: .77em;\n          border: 1px solid #47A477;\n          border-radius: 1em;\"\u003e\n          \u003cdiv\u003e\n            \u003cdiv data-x-text=\"user.name\"\u003e\u003c/div\u003e\n            \u003cdiv data-x-text=\"user.company.name\"\u003e\u003c/div\u003e\n            \u003cdiv data-x-text=\"user.phone\"\u003e\u003c/div\u003e\n            \u003ca data-x-bind:href=\"'mailto:' + user.email\" \n              data-x-text=\"user.email\"\u003e\u003c/a\u003e     \n            \u003ca data-x-bind:href=\"'https://' + user.website\" \n              data-x-text=\"user.website\"\u003e\u003c/a\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n![](assets/CleanShot–{Obsidian}-(example%20-%20obsidian-alpinejs%20-%20Obsidian%20v1.1.3)–[2022-12-14-01.09.36].gif)\n\n#### HTML \n\n```html\n\u003ch1 data-x-data=\"{ \n    self: '\u003cspan class=self\u003eI\u003c/span\u003e',\n    palette: '\u003cspan style=color:red\u003e❤️\u003c/span\u003e',\n    framework: '\u003cstrong\u003e\u003cem\u003eAlpine\u003c/em\u003e\u003c/strong\u003e'}\" \n  style=\"font-size:3.77em;\"\u003e\n    \u003cspan data-x-html=\"self\"\u003e\u003c/span\u003e \n    \u003cspan data-x-html=\"palette\"\u003e\u003c/span\u003e \n    \u003cspan data-x-html=\"framework\"\u003e\u003c/span\u003e\n\u003c/h1\u003e\n```\n\n![](assets/CleanShot–{Obsidian}-(example%20-%20obsidian-alpinejs%20-%20Obsidian%20v1.1.3)–[2022-12-14-01.27.25].png)\n\n## why\n\n- [ ] express a statement of intent \u0026 motivation for creating the plugin #task\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapmiss%2Fobsidian-alpinejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgapmiss%2Fobsidian-alpinejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapmiss%2Fobsidian-alpinejs/lists"}