https://github.com/gapmiss/obsidian-alpinejs
Alpine.js framework for Obsidian
https://github.com/gapmiss/obsidian-alpinejs
alpinejs obsidian-md obsidian-plugin
Last synced: 9 months ago
JSON representation
Alpine.js framework for Obsidian
- Host: GitHub
- URL: https://github.com/gapmiss/obsidian-alpinejs
- Owner: gapmiss
- License: mit
- Created: 2022-12-14T06:53:57.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-14T08:16:29.000Z (over 3 years ago)
- Last Synced: 2025-04-03T09:12:07.059Z (about 1 year ago)
- Topics: alpinejs, obsidian-md, obsidian-plugin
- Language: JavaScript
- Homepage:
- Size: 16.2 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# obsidian-alpinejs
Obsidian plugin that imports the [Alpine.js](https://alpinejs.dev/) node [package](https://www.npmjs.com/package/alpinejs).
## notice
> ⚠️ NOTICE
>
> 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.
>
## config
The plugin (`onload`) sets the `prefix` for Alpine's custom attribute.
`Alpine.prefix("data-x-")`
e.g. ``
## example
```html
Expand
lorem ipsum dolor sit amet ...
```
–[2022-12-13-23.26.25].gif)
## plugin installation
### clone this repo
```bash
cd /path/to/your/vault/.obsidian/plugins
git clone https://github.com/gapmiss/obsidian-alpinejs.git
cd obsidian-alpinejs
```
### install packages and run
```bash
npm i
npm run dev
```
### enable plugin
1. open `Settings` → `Community plugins`
2. enable the `Alpine.js` plugin.
## caveats
1. Javascript errors after adding new or editing current `Alpine.js` HTML blocks
- solution: run command `reload app without saving`
- or: close (`⇧` + `⌘` + `W`) and re-open vault window
## examples
#### accessing Obsidian's API
```html
```
–[2022-12-13-23.37.50].gif)
#### theme mode toggle
```html
```
–[2022-12-14-00.15.04].gif)
#### fetch remote JSON
```html
```
–[2022-12-14-01.09.36].gif)
#### HTML
```html
```
–[2022-12-14-01.27.25].png)
## why
- [ ] express a statement of intent & motivation for creating the plugin #task