AlpineJS Extension for Nova


This extension provides the AlpineJS Autocompletion + Snippets to Nova Editor!

This extension has been inspired by Jason Platts's AMAZING ๐Ÿ’ฏ TailwindCSS Nova extension and Adrian Wilczyล„ski's VSCode AlpineJS extension. In fact I used the dictionary from Adrain's repo, I tidied it up a bit to suit this project, and then made an extension around it utilising the informations from there.

Good luck with your projects & I hope you find the extension helpful! ๐Ÿš€


  • The Attribute Autocompletion are triggered in the Tags in supported languages.
  • The Snippets are triggered only in the HTML body to avoid confusion and name resolution issues.


  • You need to have the syntax highlighting extension of your choice installed for any of the languages below
  • The extension works in
  • HTML
  • Blade
  • PHP
  • Liquid
  • Twig
  • Looking for support in any other syntax? please raise an issue on GitHub and I will try to add them as soon as possible.


  • There are no requirements for the extension apart from having a Nova v3.0+ just plug and play ๐Ÿš€

Report a Bug or Feature Request

Please use the GitHub Repository for all requests. ๐Ÿ˜Š

To Do: ๐Ÿฅต

  1. Adding modifiers support โ˜‘๏ธ
  2. Getting JS Syntax highlighting working in the attribute (would be a killer feature!, not possible atm due to extension API limitation.) โŒ
  3. Better Documentations โ˜‘๏ธ
  4. Allowing user configuration โ˜‘๏ธ
  5. Bug fix as we go ๐Ÿž? โ˜‘๏ธ


version 1.1.2

New Syntax Support ๐ŸŽ‰

  • The extension now works in TWIG files/syntax highlighting โœ…

version 1.1.1

  • Bug Fix:
  • removed the autocompletion in the value scope.

version 1.1.0

Annoying pesky bug ๐Ÿž fix (the colon : bug) and new features addition:

  • Bug Fix:
  • Issue resulting in removal of (:) from the directives
  • Such as (:) in x-on:click (x-onclick โžก๏ธ x-on:click) etc...
  • Enhancement:

  • More sound directive expansion/snippet depending on the directive

  • e.g x-cloak x-ignore expand correctly
  • In x-bind: & x-on: the cursor falls in the correct position
  • better keyup and keydown insertion position/snippet
  • removed the keypress directive (Deprecated Event)

  • New Directives:

  • x-ignore
  • :style
  • x-modelable
  • x-teleport
  • x-id

version 1.0.7

New Directive: Support for Alpine Mask (x-mask & x-mask:dynamic)

version 1.0.6

Snippet Update: Alpine-CDN snippet has been updated to the lates version (3.x.x) โคด๏ธ

version 1.0.5

New Syntax Support ๐ŸŽ‰

  • The extension now supports Ruby on Rails html.erb files as well as .liquid files โœ…

Version 1.0.3

Bug fix: outputting double "@" sign or ":" for directives that start with them such as @click or :class

Version 1.0.2

Bug fix: The bracket autocompletion now only applies to the x-data attribute.

Version 1.0.1

fixed the broken photo link for md file

Version 1.0

Initial release