Remember HyperCard?

Example from hyperscript.org landing page
An xTalk syntax inspired by HyperTalk and AppleScript, natively inside your browser. CSS selector literals and positional operators make it a breeze to access DOM elements.

Demo 1: Tell Paragraphs to Highlight

Click anywhere in this article box!

All paragraphs inside will be highlighted.

The "tell" command targets each paragraph.

CSS selector literals like <p/> make it easy.

Demo 2: Close All Details Elements

Section 1: Introduction

This is the introduction content. Click the button below to close all sections.

Section 2: Main Content

This is the main content area. All details elements can be controlled at once.

Section 3: Conclusion

This is the conclusion. The "tell" command sets properties on multiple elements.

Demo 3: Positional Operators

First item
Second item
Third item
Fourth item
Last item

The Exact Code

<div _="on click tell <p/> in me add .highlight"> <div _="tell <details /> in .article set you.open to false">

Extended Version

<div class="article" _="on click tell <p/> in me add .highlight"> <p>Paragraph 1</p> <p>Paragraph 2</p> </div>  <button _="on click tell <details /> in .article set you.open to false"> Close All </button>  <button _="on click add .highlight to first <li/> in #list"> Highlight First </button>

Features Demonstrated

tell [target] [command] - Execute commands on multiple elements
<p/> - CSS selector literal syntax
in [element] - Scope selectors to container
you - Reference to current element in tell block
first/last [selector] - Positional operators
set [property] to [value] - Property assignment