Alpine.js framework for Obsidian

[gapmiss]

I’ve put together an Obsidian plugin that imports the Alpine.js node package.

For those unfamiliar with Alpine.js (from https://alpinejs.dev):

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.

This is to be considered an alpha level plugin. It has had only very limited testing. I would appreciate any and all feedback regarding usability, features, and most especially, use-case scenarios. Please check the README for more details.

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.

GitHub - gapmiss/obsidian-alpinejs: Alpine.js framework for Obsidian

[gapmiss]

Example HTML embed code, screenshot & gif … see the README for more examples.

---

<h1 data-x-data="{ 
    self: '<span class=self>I</span>',
    palette: '<span style=color:red>❤️</span>',
    framework: '<strong><em>Alpine</em></strong>'}" 
  style="font-size:3.77em;">
    <span data-x-html="self"></span> 
    <span data-x-html="palette"></span> 
    <span data-x-html="framework"></span>
</h1>

---

<button data-x-data="{ state: false, label: (this.app.vault.getConfig('theme') == 'moonstone') ? 'dark' : 'light' }"
  data-x-init="console.log('init');"
  data-x-on:click="
    state = !state;
    this.app.changeTheme( (this.app.vault.getConfig('theme') == 'moonstone') ? 'obsidian' : 'moonstone' );"
  data-x-bind:class="{ 'dark': state }"
  id="theme-toggler">
</button>