hypra

Hypra for VS Code

Support for Hypra, the markup language that compiles to HTML for people and to Markdown and JSON for AI agents. Works in VS Code, Cursor and other editors built on VS Code.

  • Highlighting for .hypra files, including the JavaScript, CSS and JSON inside script and style.
  • Errors and warnings as you type, with the rule code, how to fix it, and a link to where the docs explain it. Files you import are checked too, as you edit them.
  • Go to Definition (Ctrl+click or F12) on components, layouts, use paths, props and loop variables, also in imported files. Ctrl+click on a definition lists where it's used.
  • Find All References (Shift+F12) and Rename (F2), across every .hypra file in the folder: renaming a component also renames its calls, and renaming a parameter renames the arguments that set it.
  • Hover over a name to see where it's defined, or over an element or field type to see what it does, with an example.
  • Format Document, the same as hypra fmt.

Install

In Cursor, VSCodium and other editors that install from Open VSX, search for "Hypra" in the Extensions view. In VS Code, download hypra-<version>.vsix from the latest release, then in the Extensions view choose … → Install from VSIX….

Settings

Everything except highlighting comes from hypra lsp, the language server in the hypra compiler. Put the compiler on your PATH, or set hypra.path to where it is.

Setting Default
hypra.path hypra the compiler: a command on your PATH or a full path