What is _hyperscript?

bigskysoftware/_hyperscript — explained in plain English

Analysis updated 2026-07-03

★ 3,686JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      HTML scripting
      Event handling
      DOM manipulation
    Syntax style
      Plain English
      Inline attributes
      Timing keywords
    Integration
      Works with htmx
      CDN script tag
      npm ES module
    Use cases
      Toggle classes
      Timed actions
      User interactions

mindmap root((repo)) What it does HTML scripting Event handling DOM manipulation Syntax style Plain English Inline attributes Timing keywords Integration Works with htmx CDN script tag npm ES module Use cases Toggle classes Timed actions User interactions

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Add interactive behaviors to HTML buttons and form elements by writing short scripts in the element's attribute, without a separate JS file.

USE CASE 2

Build interactive web pages alongside htmx, handling animations, DOM changes, and timed actions with readable attribute-based scripts.

USE CASE 3

Toggle CSS classes, show or hide elements, or wait for a delay before taking action, all written directly inside your HTML markup.

What is it built with?

JavaScript

How does it compare?

	bigskysoftware/_hyperscript	spine/spine	nslogx/gitter
Stars	3,686	3,686	3,684
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	easy	moderate
Complexity	2/5	2/5	3/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

Hyperscript is a small scripting language for web pages, written in JavaScript and included in a page via a single script tag. Instead of writing event handling code in a separate JavaScript file, you write short scripts directly on HTML elements using a special attribute. The README's quick example shows a button that toggles a CSS class when clicked, written as: on click toggle .clicked. Another shows a button that shows an alert, waits two seconds, then removes itself from the page. The language is inspired by HyperTalk, a scripting language from Apple's HyperCard software in the late 1980s, which was known for reading like plain English. Hyperscript follows a similar style: commands read as short imperative sentences describing what should happen and in what order, with timing words like "then" and "wait" built into the syntax. It is commonly used alongside htmx, another project from the same author that handles server communication without writing JavaScript. Together they form an approach to building interactive web pages by writing attributes on HTML rather than JavaScript code in separate files. The README itself is very brief and points to hyperscript.org for full documentation. Installation is via a script tag pointing to a CDN, or via npm as an ES module. The repository includes a test suite run with npm test and a build step run with npm run build. Contributions should include tests in the /test directory and documentation updates in /www.

Copy-paste prompts

Prompt 1

Using Hyperscript, write the attribute code that makes a button show an alert, wait 2 seconds, then remove itself from the page.

Prompt 2

I'm using htmx and want to add Hyperscript for client-side interactivity. Show me a working HTML example of a button that toggles a CSS class called 'active' on click.

Prompt 3

Write Hyperscript code to toggle a nav menu open and closed when a hamburger button is clicked, and close it when the user clicks anywhere outside the menu.

Prompt 4

What Hyperscript syntax do I use to listen for a custom event called 'item:removed', wait 300 milliseconds, then fade out a list item?

Frequently asked questions