### Install Dependencies and Serve Website

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/README.md

Run these commands in your terminal to install project dependencies and start the local development server for the hyperscript.org website. Ensure you have Node.js 15 installed.

```bash
npm install
```

```bash
npx eleventy --serve
```

--------------------------------

### Run Manual Test Server

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/test/manual/README.md

Execute this command to start the Node.js server required for testing WebSockets and EventSource. Ensure the `ws` package is installed (`npm install ws`).

```sh
# requires the `ws` package: npm install ws
node test/manual/server.js
# then open http://localhost:3000/test/manual/connections.html
```

--------------------------------

### 2 Second Wait Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/test/commands/fetch/scratch.html

A basic example demonstrating a 2-second delay before executing an action. No specific setup is required beyond Hyperscript initialization.

```html
<button _=
```

```html
wait 2s
```

```html
>Get It</button>
```

--------------------------------

### Install Namespaced Behavior

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/install.md

Demonstrates installing a behavior defined under a namespace.

```hyperscript
behavior My.UI.Removable
  on click remove me
end
```

```html
<div _="install My.UI.Removable">...</div>
```

--------------------------------

### Load Example from Dropdown

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/playground.html

Handles the change event for the examples dropdown. Loads selected example code into the editor and runs it.

```javascript
document.getElementById('examples').addEventListener('change', function () {
  var val = this.value;
  if (!val) return;
  this.value = '';
  if (BUILTIN_EXAMPLES[val]) {
    cm.setValue(BUILTIN_EXAMPLES[val]);
    run();
    return;
  }
  // Fet
```

--------------------------------

### Hello World Example in ///_hyperscript

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/getting-started.md

A basic 'Hello World' example demonstrating how to put text into an element on click using ///_hyperscript embedded in an HTML attribute.

```html
<button _="on click put 'Hello World' into me">
Click Me!
</button>
```

--------------------------------

### Install Draggable Behavior

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Use the 'install' feature to apply a predefined behavior, such as 'Draggable', to the current element.

```hyperscript
install Draggable
```

--------------------------------

### Basic transition example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/transition.md

A simple example of using the `transition` command to fade out an element and then remove it from the DOM upon clicking.

```html
<div _="on click transition my *opacity to 0 then remove me">
  Fade then remove me
</div>
```

--------------------------------

### Start View Transition

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/_includes/commands_table.md

Wraps DOM mutations in a View Transition for animated state changes. Example: `start a view transition using "fade" ... end`.

```hyperscript
start a view transition using "fade" ... end
```

--------------------------------

### Fetch and Load Example Code

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/playground.html

Fetches example code from the /playground/ directory and updates the CodeMirror editor. Includes error handling for fetch failures.

```javascript
fetch('/playground/' + val) .then(function (r) { return r.text(); }) .then(function (text) { cm.setValue(text); run(); }) .catch(function () { document.getElementById('status').innerHTML = '<span class="error">Failed to load example</span>'; });
```

--------------------------------

### Install Behavior with Named Arguments

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/install.md

Installs a 'Removable' behavior that uses a specific button to trigger removal.

```html
<script type="text/hyperscript">
  behavior Removable(removeButton)
    on click from removeButton remove me
  end
</script>

<div class="banner" _="install Removable(removeButton: #close-banner)">
  <button id="close-banner">×</button>
  Banner content
</div>
```

--------------------------------

### Install Tool Dependencies

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/tools/README.md

Installs all necessary dependencies for the hyperscript tools. This command should be run from the `tools/` directory.

```sh
just install
```

--------------------------------

### Install Multiple Behaviors

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/install.md

Installs both 'Removable' and 'Draggable' behaviors on a single element.

```html
<div _="install Removable
        install Draggable(dragHandle: .titlebar in me)">
  ...</div>
```

--------------------------------

### Hyperscript Component State Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/src/skills/EFFECTIVE_HYPERSCRIPT.md

A basic Hyperscript example demonstrating component state management using element-scoped variables and event handling within an HTML element.

```html
<div _="
  set :count to 0
  on click
    increment :count
    put :count into me
  end
">0
</div>
```

--------------------------------

### String Prefix Check

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/expressions/comparison-operator.md

The 'starts with' operator checks if a string begins with a specified prefix. This example adds a class if the input starts with 'http'.

```html
<input _="on keyup
            if my value starts with 'http'
              add .valid-url to me
            else
              remove .valid-url from me"/>
```

--------------------------------

### DOM Reference Examples

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Examples of how to reference DOM elements using IDs, classes, queries, attributes, styles, and relative positioning.

```hyperscript
#main-div
```

```hyperscript
.active
```

```hyperscript
<button/>
```

```hyperscript
<:focused/>
```

```hyperscript
@selected
```

```hyperscript
*color
```

```hyperscript
*computed-fontSize
```

```hyperscript
closest <div/>
```

```hyperscript
next <div/> from me
```

```hyperscript
first from <div/>
```

--------------------------------

### Example Table with Master Checkbox

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/patterns/components/select-all-component.md

An example of how to integrate the `<master-checkbox>` component into a table's header. This setup allows the master checkbox to control all other checkboxes in the table body.

```html
<table>
<thead>
  <tr>
    <th><master-checkbox></master-checkbox></th>
    <th>Task</th>
    <th>Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Write documentation</td>
    <td>In progress</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Fix login bug</td>
    <td>Open</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Deploy to staging</td>
    <td>Pending</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Review pull request</td>
    <td>Open</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Update dependencies</td>
    <td>Open</td>
  </tr>
</tbody>
</table>
```

--------------------------------

### Behavior Installation Syntax

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/behavior.md

The EBNF syntax for installing a hyperscript behavior on an element, including named arguments.

```ebnf
install <name>(<named-argument-list>)
```

--------------------------------

### Simple Greeting Component

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/components.md

A minimal component example that displays static text.

```html
<script type="text/hyperscript-template" component="hello-world">
  <span>Hello World</span>
</script>

<hello-world></hello-world>
```

--------------------------------

### Hyperscript Behaviors

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/src/skills/EFFECTIVE_HYPERSCRIPT.md

Illustrates how to define reusable bundles of features using `behavior` and how to install them onto elements using the `install` attribute.

```hyperscript
behavior Removable(removeButton)
  on click from removeButton
    remove me
  end
end
```

```html
<div _="install Removable(removeButton: #btn)">
    <button id="btn">X</button>
</div>
```

--------------------------------

### Use Custom Hyperscript Command

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/extensions.md

Example of using the custom 'foo' command after it has been registered.

```hyperscript
def testFoo()
  set str to "foo"
  foo str
end
```

--------------------------------

### Test Runner Setup

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/test/manual/connections.html

Initializes test counters and defines helper functions for reporting test results and displaying a summary.

```JavaScript
var passCount = 0, failCount = 0;
function report(container, name, passed, detail) {
  var div = document.createElement('div');
  div.className = 'test ' + (passed ? 'pass' : 'fail');
  div.textContent = (passed ? 'PASS' : 'FAIL') + ': ' + name;
  if (detail) {
    var pre = document.createElement('pre');
    pre.textContent = detail;
    div.appendChild(pre);
  }
  document.getElementById(container).appendChild(div);
  if (passed) passCount++;
  else failCount++;
}
function showSummary() {
  document.getElementById('summary').textContent = passCount + ' passed, ' + failCount + ' failed';
}
```

--------------------------------

### Install ///_hyperscript via NPM

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/getting-started.md

Install the ///_hyperscript package using npm. This is the recommended approach for projects using a bundler.

```bash
npm install hyperscript.org
```

--------------------------------

### Basic Click Event Handling

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/on.md

A simple example demonstrating how to attach a click event listener to an element.

```html
<div _='on click call alert("You clicked me!")'>Click Me!</div>
```

--------------------------------

### Start a View Transition

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/dom.md

Initiate a DOM transition using the 'start a view transition' command, which wraps DOM mutations in the browser's View Transition API. Animation is controlled via CSS.

```hyperscript
start a view transition
    put newContent into #container
end
```

```hyperscript
start a view transition using "slide-left"
    remove .active from .tab
    add .active to me
    put content into #panel
end
```

--------------------------------

### Built-in Hyperscript Examples

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/playground.html

These examples demonstrate common Hyperscript patterns for interactive web components. They include counters, input handling, and dynamic styling.

```html
<h2>Counter</h2>\n<button 	abname="on click\n increment :count\n put :count into the next <output/>">\n Click me\n</button>\n<output>0</output>
```

```html
<h2>Reactive Counter</h2>\n<div 	abname="init set ^count to 0">\n <button 	abname="on click increment ^count">+1</button>\n <button 	abname="on click decrement ^count">-1</button>\n <output 	abname="live put ^count into me">0</output>\n</div>
```

```html
<h2>Hello</h2>\n<input type="text" placeholder="Your name..."\n 	abname="on input put 
Hello, ${my value}!
 into the next <output/>" />\n<output></output>
```

```html
<h2>Color Cycle</h2>\n<button\n 	abname="on pointerdown\n repeat until event pointerup from document\n set rand to Math.random() * 360\n transition *background-color of the next <div/>\n to 
hsl(${rand} 100% 85%)
 over 200ms\n end\n transition *background-color of the next <div/> to initial">\n Press and hold\n</button>\n<div style="margin-top:1em;padding:2em;border:1px solid #ddd;border-radius:4px;text-align:center">Watch me change!</div>
```

--------------------------------

### hs-include Specifiers

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/conclusion.md

Examples demonstrating different specifiers for hs-include to select variables from various scopes.

```html
<!-- specific vars -->
<button hs-include=":userId, :token" hx-post="/api">Go</button>
```

```html
<!-- inherited var from a parent -->
<button hs-include="^sharedState" hx-post="/api">Go</button>
```

```html
<!-- var from another element -->
<button hs-include="#config-panel:settings" hx-post="/api">Go</button>
```

```html
<!-- everything -->
<button hs-include="*" hx-post="/api">Go</button>
```

--------------------------------

### DOM Manipulation Examples

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/llms.txt

Provides examples of common DOM manipulation tasks such as adding/removing classes, attributes, styles, showing/hiding elements, and managing dialogs.

```hyperscript
add .active to me
add @disabled to me
add {color: red} to me                   -- inline styles
remove .active from #target
remove me                                -- removes element
toggle .active on me
toggle between .on and .off
take .active from .tabs for me           -- move class
show me
hide me
focus #input
empty #container
open #dialog
close #dialog
```

--------------------------------

### Install a Basic Behavior

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/install.md

Attaches a 'Removable' behavior to a div, allowing it to be removed on click.

```html
<script type="text/hyperscript">
  behavior Removable
    on click remove me
  end
</script>

<div _="install Removable">Click to remove me</div>
```

--------------------------------

### Hyperscript Async Workflow Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/src/skills/EFFECTIVE_HYPERSCRIPT.md

An example of an asynchronous workflow in Hyperscript, handling a button click to fetch data, update a result element, and manage a disabled state.

```html
<button _="on click
  add @disabled to me
  fetch /api/action as JSON
  put it.message into #result
  remove @disabled from me
">Submit
</button>
```

--------------------------------

### Operator Examples

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Illustrates various operators including math, comparison, logical, existence checks, type conversion, and string manipulation.

```hyperscript
x + 1
```

```hyperscript
y * 2
```

```hyperscript
z mod 3
```

```hyperscript
x == "foo"
```

```hyperscript
I match <:active/>
```

```hyperscript
x and y
```

```hyperscript
not z
```

```hyperscript
a or false
```

```hyperscript
no element.children
```

```hyperscript
some <.results/>
```

```hyperscript
"10" as Int
```

```hyperscript
x as Values | JSONString
```

```hyperscript
x:String
```

```hyperscript
x:Int!
```

```hyperscript
"foo" in myArray
```

```hyperscript
url starts with "https"
```

```hyperscript
x is between 1 and 10
```

```hyperscript
#a precedes #b
```

```hyperscript
x contains "hi" ignoring case
```

--------------------------------

### Install ///_hyperscript via CDN

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/getting-started.md

Include this script tag in your HTML to install ///_hyperscript from a CDN. This is a quick way to add the library to your project without a build process.

```html
<script src="https://cdn.jsdelivr.net/npm/hyperscript.org@0.9.91/dist/_hyperscript.min.js" integrity="sha384-OT9bNmUa5rM34SmxFpRftn2F6GbgM/4xnTmn0z106OE5uvsigkdtUMOpdPKOigyO" crossorigin="anonymous"></script>
```

--------------------------------

### Property Access Examples

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Demonstrates dot notation, possessive, and 'of' expressions for accessing object properties, as well as array indexing.

```hyperscript
event.target
```

```hyperscript
the window's location
```

```hyperscript
the location of window
```

```hyperscript
items[0]
```

```hyperscript
obj['key']
```

--------------------------------

### Basic Cookie Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/expressions/cookies.md

A simple HTML button demonstrating how to set a cookie using an `on click` event.

```APIDOC
## Basic Cookie Example

### Description
This example shows a basic HTML button that sets a cookie named 'hello' to the value 'world' when clicked.

### HTML

```html
<button _="on click set cookies.hello to 'world'">
    Set the cookie 'hello' to 'world'!
</button>
```
```

--------------------------------

### Load Remote Behaviors

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/behavior.md

Demonstrates how to load behaviors from an external file before loading the hyperscript library. Ensure behaviors are defined before installation.

```html
<script type="text/hyperscript" src="/behaviors._hs"></script>
<script src="https://unpkg.com/hyperscript.org"></script>
```

--------------------------------

### Format Pizza Toppings using make and Intl.ListFormat

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/make.md

This example shows how to format a list of pizza toppings using `Intl.ListFormat` and the `make` command to create DOM elements for each topping. It iterates through the formatted parts and appends them to a target element.

```hyperscript
def formatPizzaToppings(toppings)
  make an Intl.ListFormat from "en", { type: "conjunction" }
    called listFmt

  for part in listFmt.formatToParts(toppings)
    if the part's type is "element"
      make a <span.topping/>
      put the part's value into its textContent
      append it to #toppings
    else
      append the part's value to #toppings
    end
  end
end
```

--------------------------------

### Open Dialogs, Details, Popovers, or Fullscreen

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/_includes/commands_table.md

Opens various UI elements. Examples: `open #my-dialog`, `open fullscreen`.

```hyperscript
open #my-dialog
```

```hyperscript
open fullscreen
```

--------------------------------

### Event-Driven Loop Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/async.md

This example shows an event-driven loop that pulses a button until a 'stop' event is received. The loop continues as long as the 'stop' event is not detected at the start of each iteration. The cancel button sends the 'stop' event to terminate the loop.

```html
<button class="pulsar"
        _="on click repeat until event stop
             add .pulse then settle
             remove .pulse then settle">
  Click me to Pulse...
</button>
<button _="on click send stop to the previous <button/>">
  Cancel
</button>
```

--------------------------------

### Initialize and Run

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/test/scratch.html

Performs an initial run of the code after a short delay. Useful for setting up the initial state.

```javascript
setTimeout(run, 100);
```

--------------------------------

### Access Selected Text

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Get the currently selected text on the page using the 'selection' magic value. Example: `put selection into #out`.

```hyperscript
put selection into #out
```

--------------------------------

### Add class to closest div relative to parent on click

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/expressions/closest.md

This example adds a class to the nearest ancestor `<div>` element, starting the search from the parent element of the clicked element.

```html
<div _="on click add .clicked to the closest <div/> to the parentElement of me">
  ...
</div>
```

--------------------------------

### Set Attribute within a `behavior` using `set`

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/set.md

When defining a `behavior`, use `set` to apply an attribute to every element the behavior is installed onto. This example sets the `data-linked-scroll` attribute.

```html
<script type="text/hyperscript">
  behavior LinkedScroll
    set @data-linked-scroll to 'true'
    -- ...
  end
</script>
```

--------------------------------

### Accessing and Setting DOM Attributes with Possessive Expression

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/expressions/possessive.md

This example shows how to use the possessive expression to get a DOM element's attribute (`@data-demo`) and set it as the content of another element. Ensure the target element has the desired attribute.

```html
<div
  id="foo"
  data-demo="Here is some data..."
>
</div>
<button _="on click put #foo's @data-demo into me">
  Replace Me w/ Foo's Attribute Data
</button>
```

--------------------------------

### Event-driven approach with `on` handlers

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/live.md

This example shows a basic event-driven approach using `on` handlers for simple interactions. It is suitable for straightforward cases but can become unwieldy with multiple dependencies.

```html
<button id="inc" _="on click increment $count">+1</button>
<output _="on click from #inc put $count into me">
```

```html
<output _="on click from #inc or #dec or #reset put $count into me
           on keyup[key=='ArrowUp'] from window put $count into me
           on htmx:afterSwap from body put $count into me">
```

--------------------------------

### DOM Element References

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/llms.txt

Examples of how to reference DOM elements using IDs, classes, attributes, styles, and other selectors.

```hyperscript
#myId                                    -- by ID
.myClass                                 -- by class
<div.foo/>                               -- querySelectorAll
@name                                    -- attribute on me
*color                                   -- style property
```

--------------------------------

### Create Intl.ListFormat Instance with make

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/make.md

Demonstrates creating a new instance of the JavaScript `Intl.ListFormat` class using the `make` command. The instance is then named using `called` for subsequent use.

```hyperscript
make an Intl.ListFormat from "en", { type: "conjunction" }
    called listFmt
```

--------------------------------

### Queue All Strategy for Events

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/events.md

This example demonstrates the 'queue all' strategy, where all events are queued and processed sequentially, even if they arrive rapidly. It includes a delay to show the queuing effect.

```html
<button _="on click queue all
                    increment :count
                    wait 1s then put it into the next <output/>">
  Click Me Quickly...
</button>
<output>--</output>
```

--------------------------------

### Hyperscript Init Blocks

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/src/skills/EFFECTIVE_HYPERSCRIPT.md

Demonstrates `init` blocks for running code when an element is initialized, including immediate execution options.

```hyperscript
init
  add .loaded to me
end

init immediately    -- runs before other features are installed
  set :count to 0
end
```

--------------------------------

### Load Initial Content for CodeMirror Editor

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/playground.html

Loads initial content into the CodeMirror editor from URL parameters (LZ-compressed) or local storage. Defaults to a 'hello world' example if no source is found.

```javascript
var params = new URLSearchParams(window.location.search);
var sharedSrc = params.get('src');
var snippet = localStorage.getItem('playground-snippet');
if (sharedSrc) {
  try {
    cm.setValue(LZString.decompressFromEncodedURIComponent(sharedSrc));
  } catch (e) {
    cm.setValue(BUILTIN_EXAMPLES.hello);
  }
} else if (snippet) {
  localStorage.removeItem('playground-snippet');
  cm.setValue(snippet);
} else {
  cm.setValue(BUILTIN_EXAMPLES.hello);
}
```

--------------------------------

### Initialize Element with Transitions

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/events.md

The `init` block allows you to run commands when an element is first loaded. This example fades in the element over 3 seconds.

```html
<div _="init transition my *opacity to 100% over 3 seconds">
  Fade Me In
</div>
```

--------------------------------

### Get JavaScript Value with hyperscript

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/_includes/commands_table.md

Use `get` to retrieve a value from an expression, like a JavaScript function.

```hyperscript
get prompt('Enter your name')
```

--------------------------------

### Simple Offline Page Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/intercept.md

Configures precaching for essential files and an offline fallback page. Uses network-first for all requests, falling back to the offline page if necessary.

```hyperscript
intercept /
    precache /, /offline.html, /style.css as "v1"
    on * use network-first
    offline fallback /offline.html
end
```

--------------------------------

### make Command Syntax

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/make.md

Provides the EBNF syntax for the `make` command, illustrating its two primary forms: constructing class instances with `from` and creating DOM elements using a query reference.

```ebnf
make (a | an) <expression> [from <arg-list>] [called <identifier>]
make (a | an) <query-ref> [called <identifier>]
```

--------------------------------

### Install 'Removable' Behavior on an Element

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/behavior.md

Installs the previously defined 'Removable' behavior onto a div element, making it disappear when clicked.

```html
<div _="install Removable">Click to get rid of me</div>
```

--------------------------------

### Combined Load, Scroll, and Body Resize Events

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/test/manual/resize-targets.html

This example combines `load`, `scroll from window`, and `resize from body` events. It fires on page load, window scroll, and body resize, demonstrating handling multiple event types and targets.

```hyperscript
on load or scroll from window or resize from body
  log("Load, scroll, or body resize detected!")
```

--------------------------------

### Hyperscript CLI Validation Error Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/conclusion.md

An example of the output from the hyperscript CLI validator, showing a syntax error with file, line, and column information.

```bash
src/index.html:14:23 error: Unexpected Token : sett
  14 |   <button _="on click sett x to 10">Bad command</button>
     |                       ~~~~
```

--------------------------------

### Show/hide using opacity strategy

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/dom.md

Customize the `show` and `hide` commands to use different CSS properties. This example uses the `opacity` property instead of `display`.

```html
<button _="on click
             hide me with *opacity
             wait 2s
             show me with *opacity">
  Peekaboo
</button>
```

--------------------------------

### Issue a Fetch Request with Hyperscript

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/networking.md

Use the `fetch` command to make HTTP requests. This example shows a simple click handler that fetches data and updates an output element.

```html
<button _="on click fetch /clickedMessage then
                    put the result into the next <output/>">
  Fetch It
</button>
<output>--</output>
```

--------------------------------

### Display a prompt and greet the user with ///_hyperscript

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/ask.md

Use the `ask` command to prompt the user for input. Check if the input is not null before using it to update the DOM.

```html
<button _="on click
  ask 'What is your name?'
  if it is not null
    put 'Hello, ' + it into #greeting
  end
">Ask Name</button>
<span id="greeting"></span>
```

--------------------------------

### Install a Behavior onto an Element

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/components.md

Install the 'Removable' behavior onto a div with the class 'banner'. The behavior is configured to use an element with the ID 'close-banner' as its 'removeButton' argument.

```html
<div class="banner" _="install Removable(removeButton: #close-banner)">
  ...
</div>
```

--------------------------------

### Initialize CodeMirror Editor

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/test/scratch.html

Sets up a CodeMirror editor instance with specific configurations for _hyperscript, including line wrapping, bracket matching, linting, and custom key bindings for running code and showing hints.

```javascript
var cm = CodeMirror(function(elt) {
    elt.parentNode.insertBefore(elt, elt.nextSibling);
  }, {
    mode: "htmlmixed",
    value: DEFAULT_HTML,
    tabSize: 2,
    indentWithTabs: true,
    lineWrapping: true,
    matchBrackets: true,
    gutters: ["CodeMirror-lint-markers"],
    lint: {
      getAnnotations: lintHyperscript,
      async: false
    },
    extraKeys: {
      'Ctrl-Enter': run,
      'Cmd-Enter': run,
      'Ctrl-Space': function (cm) {
        cm.showHint({ hint: hsHint });
      },
    }
  });
```

--------------------------------

### Function Calls with 'call' and 'get' Commands

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/language.md

Illustrates using 'call' for explicit function invocation and 'get' for retrieving values, with 'then' and 'it' for chaining and referencing results.

```hyperscript
call alert('hello world!')
```

```hyperscript
get document.getSelection() then log it -- using the 'it' alias for 'result`
```

--------------------------------

### Initializing EventSource and Handling Messages

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/eventsource.md

Set up an EventSource connection and define how to handle incoming messages. This example connects to 'http://server-name/record-updater' and updates specific HTML elements based on received JSON data.

```html
<script type="text/hyperscript">
  eventsource recordUpdater from http://server-name/record-updater

      on message as JSON
          put it.name into #name
          put it.username into #username
          put it.email into #email
          log me
      end

  end
</script>

<div>
  <button script="on click call recordUpdater.open()">Connect</button>
  <button script="on click call recordUpdater.close()">Disconnect</button>
</div>

<h3>Real-Time Record</h3>
<div>Name: <span id="name">...</span></div>
<div>Username: <span id="username">...</span></div>
<div>Email: <span id="email"></span></div>
```

--------------------------------

### Get User Input and Display

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/call.md

The `get` command, an alias for `call`, can retrieve user input via `prompt` and then update the element's `innerHTML` with the result stored in `$it`.

```html
<div
  _="on click get prompt('Enter your age')
                 put 'You entered: $it' into my.innerHTML"
>
  Click Me!
</div>
```

--------------------------------

### Two-Way Binding Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

The 'bind' feature synchronizes values between two different elements or properties. This example binds the 'checked' state of an element with the ID 'toggle' to a '.dark' class.

```hyperscript
bind .dark and #toggle's checked
```

--------------------------------

### Install 'Removable' Behavior with a Specific Button

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/behavior.md

Installs the 'Removable' behavior on a banner div, specifying a close button using a CSS selector. The behavior will remove the banner when the button is clicked.

```html
<div class="banner" _="install Removable(removeButton: #close-banner)">
  <button id="close-banner"></button>
  Click the button to close me
</div>
```

--------------------------------

### Install ///_hyperscript as ES Module via CDN

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/getting-started.md

Use this script tag to install ///_hyperscript as an ES module from a CDN. This is suitable for projects that use modern JavaScript module systems.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/hyperscript.org@0.9.91/dist/_hyperscript.esm.min.js" integrity="sha384-EcHNA7rHAaSZsDjKXOtqg3VO4mc/BCPUvJEx6TIcc+7MVqR6nZk9eVgNKALSZ4HN" crossorigin="anonymous"></script>
```

--------------------------------

### Hyperscript Local Variable and Logging

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/language.md

This example demonstrates creating a local variable 'x' using 'set', assigning it a value, and then logging that variable to the console using the 'log' command. It requires an HTML button to trigger the script.

```html
<button _="on click set x to 42 then log x">
  Click Me
</button>
```

--------------------------------

### Filterable Table Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/patterns/lists-forms/filterable-table.md

This example shows a complete HTML structure for a filterable table, including input, data rows, and group sections. It is styled with CSS and uses hyperscript for dynamic filtering.

```html
<div>
<input type="text" class="employee-search" placeholder="Search employees…"
       _="on input
            add @hidden to <tr.employee-row/>
              when its textContent does not contain my value ignoring case
            add @hidden to <section.employee-group/>
              when <tr.employee-row:not([hidden])/> in it is empty
            add @hidden to #employee-empty
              when <section.employee-group:not([hidden])/> is not empty">

<p id="employee-empty" hidden>No employees match your search.</p>

<section class="employee-group">
<h4>Engineering</h4>
<table class="employee-table">
<tbody>
<tr class="employee-row"><td>Ada Lovelace</td><td>Compiler Lead</td></tr>
<tr class="employee-row"><td>Grace Hopper</td><td>Principal Engineer</td></tr>
<tr class="employee-row"><td>Linus Torvalds</td><td>Kernel Maintainer</td></tr>
</tbody>
</table>
</section>

<section class="employee-group">
<h4>Design</h4>
<table class="employee-table">
<tbody>
<tr class="employee-row"><td>Dieter Rams</td><td>Industrial Designer</td></tr>
<tr class="employee-row"><td>Susan Kare</td><td>Icon Designer</td></tr>
</tbody>
</table>
</section>

<section class="employee-group">
<h4>Operations</h4>
<table class="employee-table">
<tbody>
<tr class="employee-row"><td>Marie Curie</td><td>Lab Director</td></tr>
<tr class="employee-row"><td>Rosalind Franklin</td><td>Imaging Lead</td></tr>
</tbody>
</table>
</section>
</div>
<style>
.employee-search { width: 100%; padding: 8px 12px; font-size: 1rem; box-sizing: border-box; margin-bottom: 1rem; }
.employee-group { margin-bottom: 1.25rem; }
.employee-group h4 { font-family: var(--font-heading); margin: 0 0 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid #e5e7eb; font-size: 0.95rem; }
.employee-table { width: 100%; border-collapse: collapse; }
.employee-table td { padding: 6px 10px; border-bottom: 1px solid #f3f4f6; }
.employee-table td:last-child { color: #666; text-align: right; }
#employee-empty { text-align: center; padding: 1rem; color: #999; font-family: var(--font-heading); }
</style>
```

--------------------------------

### Hyperscript Initialization and State

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/patterns/lists-forms/reactive-todo-list.md

Demonstrates the initialization of global state variables `$todos` and `$search` using the `init` command. `$todos` is an array of objects, and `$search` is a string bound to an input field.

```hyperscript
init set $todos to [{text:'Learn hyperscript', done:true},
                     {text:'Build something cool', done:false},
                     {text:'Ship it', done:false}]
     set $search to ''
```

--------------------------------

### Evaluate and Store Expression Result with 'get'

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/language.md

Use the `get` command to compute an expression and store its result in the `it` variable for subsequent commands. This is useful for chaining operations where the output of one command is the input for another.

```hyperscript
get the closest <form/>
log it
send submit to it
```

--------------------------------

### Configure EventSource Connection Options

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/eventsource.md

Specify connection options like credentials, HTTP method, and custom headers using the 'with' keyword. The value for headers must be an object literal.

```hyperscript
eventsource Feed from /api/stream with credentials with method "POST" with headers {"Authorization": "Bearer abc"}
    on "update" as json
        log it
    end
end
```

--------------------------------

### Replace attribute values with `giving`

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/take.md

Replaces `aria-selected` attribute values between tab elements. The clicked tab gets `aria-selected="true"`, and others get `aria-selected="false"`. Use for managing ARIA states in tab interfaces.

```html
<div _="on click
          take @aria-selected='true'
          from <[role=tab]/> in me
          giving 'false'
          for the closest <[role=tab]/> to the target">
  <button role="tab" aria-selected="true">One</button>
  <button role="tab" aria-selected="false">Two</button>
</div>
```

--------------------------------

### Number Literal Examples

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Use JavaScript-style numbers for numeric values.

```hyperscript
1
```

```hyperscript
3.14
```

--------------------------------

### Serve Project Locally

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/test/manual/README.md

Use this command to serve the project locally for testing worker scripts that require `importScripts`. Open the specified URL in your browser.

```sh
# from the project root
npx serve .
# then open http://localhost:3000/test/manual/workers.html
```

--------------------------------

### Boolean Literal Examples

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Use JavaScript-style booleans for true/false values.

```hyperscript
true
```

```hyperscript
false
```

--------------------------------

### Using Fetch as a Stream for SSE

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/features/eventsource.md

Utilize the `fetch` command with the `as Stream` conversion for one-shot SSE streams. This is suitable for AI chat responses or progress updates where long-lived connection management is not required.

```hyperscript
fetch /api/generate as Stream
```

--------------------------------

### Date Range Input Binding

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/patterns/lists-forms/dependent-range.md

Binds two date inputs so that the start date constrains the end date's minimum and the end date constrains the start date's maximum. The browser's native date picker automatically handles the visual indication of invalid dates.

```html
<form class="range-form" onsubmit="event.preventDefault()">
    <label>
        Start
        <input type="date" value="2026-04-15"
               _="bind $start to me
                  bind @max  to $end">
    </label>
    <label>
        End
        <input type="date" value="2026-04-22"
               _="bind $end to me
                  bind @min to $start">
    </label>
</form>
<style>
.range-form {
    max-width: 24rem;
    padding: 1.25rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f9f9f9;
    display: flex;
    gap: 1rem;
}
.range-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    font-family: var(--font-heading), sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
}
.range-form input {
    font-size: 1rem;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}
</style>
```

--------------------------------

### Object Literal Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Use JavaScript-style object literals for key-value pairs.

```hyperscript
{foo:"bar", doh:42}
```

--------------------------------

### Array Literal Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Use JavaScript-style array literals for ordered collections.

```hyperscript
[1, 2, 3]
```

--------------------------------

### Initialize CodeMirror Editor with Hyperscript Mode

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/test/scratch.html

Sets up a CodeMirror editor instance with the 'html-hyperscript' mode and 'nord' theme. Includes default HTML content with Hyperscript examples for demonstration.

```javascript
var DEFAULT_HTML = '<style>\n\ body { font-family: system-ui, sans-serif; padding: 20px; }\n\ button { padding: 8px 16px; margin: 4px; cursor: pointer; }\n\ output, .result { display: block; margin: 8px 0; padding: 8px; background: #f0f0f0; border-radius: 4px; min-height: 1.5em; }\n\ </style>\n\ \n\ <h2>Counter</h2>\n\ <div _="init set ^count to 0">\n\ <button _="on click increment ^count">+1</button>\n\ <button _="on click decrement ^count">-1</button>\n\ <input _="bind ^count to me" />\n\ </div>\n';
var cm = CodeMirror.fromTextArea(document.getElementById('editor'), {
  mode: 'html-hyperscript',
  theme: 'nord',
  lineNumbers: true
});
```

--------------------------------

### Example Tab-Set Component Usage

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/patterns/components/tab-set.md

Demonstrates how to use the `<tab-set>` component. Tab buttons must be placed in the 'tab-bar' slot, and their `aria-controls` attribute must match the `id` of the corresponding tab panel.

```html
<tab-set>
  <button slot="tab-bar" role="tab" aria-selected="true" aria-controls="ts-features">Features</button>
  <button slot="tab-bar" role="tab" aria-selected="false" aria-controls="ts-pricing">Pricing</button>
  <button slot="tab-bar" role="tab" aria-selected="false" aria-controls="ts-faq">FAQ</button>

  <div id="ts-features" role="tabpanel">
    <p>Everything you'd want from a tab set, and nothing you wouldn't.</p>
  </div>
  <div id="ts-pricing" role="tabpanel" hidden>
    <p>Free for the first 30 days, then $9/mo. Cancel any time.</p>
  </div>
  <div id="ts-faq" role="tabpanel" hidden>
    <p>Yes, it works in all the browsers you care about.</p>
  </div>
</tab-set>
```

--------------------------------

### View Transition Syntax

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/view-transition.md

The EBNF syntax for the `start a view transition` command, showing the optional `using` clause for specifying transition types.

```ebnf
start [a] view transition [using <string>]
  <commands>
end
```

--------------------------------

### Hyperscript Cookie Management

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/src/skills/EFFECTIVE_HYPERSCRIPT.md

Illustrates Hyperscript commands for getting, setting, and clearing cookies.

```hyperscript
cookies.name                             -- get cookie
set cookies.name to "value"              -- set cookie
cookies.clear("name")                    -- remove cookie
cookies.clearAll()                       -- remove all
```

--------------------------------

### Open Command Syntax

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/open.md

The general syntax for the open command, including optional fullscreen keyword and target expression.

```ebnf
open [fullscreen] [<expression>]
```

--------------------------------

### Call Command Syntax

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/call.md

Defines the basic syntax for the `call` and `get` commands in ///_hyperscript.

```ebnf
call <expression>
```

```ebnf
get <expression>
```

--------------------------------

### Navigate to a URL with 'go'

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/getting-around.md

Use the 'go' command to navigate the browser to a new URL. This can be an external website or a URL stored in a variable.

```html
<button _="on click go to https://htmx.org">
  Go Check Out htmx
</button>
```

--------------------------------

### Initialize Hyperscript

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/test/commands/fetch/scratch.html

Initializes the Hyperscript library by dynamically importing it. This should be called once at the start of your application.

```javascript
(async function () { window._hyperscript = (await import('../../../src/web/_hyperscript_w9y.js')).default })()
```

--------------------------------

### Scroll to an element

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/scroll.md

Use this to scroll an element into view when clicked. No special setup is required.

```html
<button _="on click scroll to #my-section">
  Go To Section
</button>
```

--------------------------------

### Fetch with Request Options

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/fetch.md

Pass request options like method, body, and headers using the 'with' clause. These map to the Fetch API's RequestInit object.

```hyperscript
fetch /api/users with method:"POST", body:"name=Joe", headers:{Accept:"application/json"}
```

```hyperscript
fetch /api/users with { method:"POST", body:"name=Joe" }
```

--------------------------------

### Null Literal Example

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/reference.md

Use JavaScript-style null for representing the intentional absence of any object value.

```hyperscript
null
```

--------------------------------

### Fetch Data and Update HTML with hyperscript

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/commands/fetch.md

A simple example demonstrating how to fetch data from a URL and directly insert the response into the element's innerHTML.

```html
<button _="on click fetch /example
                    put it into my innerHTML">
  Get from /example!
</button>
```

--------------------------------

### Display Element Size with Resize Events

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/docs/events.md

This example uses the `on resize` event to capture the width and height of a div and display it in an output element. The `detail` object provides dimensions.

```html
<div _="on resize put `${detail.width}x${detail.height}` into #size">
  Resize me
</div>
```

--------------------------------

### Transition Property

Source: https://github.com/bigskysoftware/_hyperscript/blob/master/www/_includes/commands_table.md

Use to transition CSS properties on an element. Example: `transition my *opacity to 0`.

```hyperscript
transition my *opacity to 0
```