§ Extensions

Hyperscript is designed to be extended. You can add your own commands, expressions, and features to the language, and several useful extensions ship with the project.

§ Built-In Extensions

These extensions are available in the src/ext/ directory and can be included separately:

• EventSource — Server-Sent Events (see Networking)
• Socket — WebSockets (see Networking)
• Tailwind — Support for Tailwind CSS classes with special characters (:, /) in class operations
• HDB Debugger — Interactive in-browser debugger

§ HDB Debugger

The HDB extension adds a breakpoint command that opens an interactive in-browser debugger, letting you step through hyperscript execution, inspect variables, and evaluate expressions:

on click
  set x to 10
  breakpoint
  put x into #output

§ Writing Your Own

Hyperscript's parser is extensible via the grammar API. You can register new commands, expressions, and features.

A simple custom command:

_hyperscript.addCommand("greet", function(parser, runtime, tokens) {
  // parse the command
  if (!tokens.matchToken("greet")) return;
  var name = parser.requireElement("expression");

  return {
    args: [name],
    op: function(context, name) {
      alert("Hello, " + name + "!");
      return runtime.findNext(this);
    }
  };
});

<button _="on click greet 'World'">Say Hello</button>

See the advanced docs for the full extension API.