Quick navigation:

Introduction
Licensing
Release notes

Online demo
Download
Test pages

Recently added
Example stacks
Live demos

Footnote

Webtalk (alpha v188)

Webtalk is a web-implementation of HyperTalk. That doesn't mean you have to be online to run it. You can download it and run it from a computer with no internet connection.

What's HyperTalk?

That's another topic, which I'll expand upon a bit further down. If you never had a chance to get into the hypertalk language, you really are missing out. HyperTalk was the scripting language used in HyperCard. There's lots of ways you can experience what HyperCard was (is) today.

So what does webtalk do?

Webtalk is loosely based on the HyperTalk scripting language, and the goal is to be compatible in most major respects. There are additions to it and perhaps things missing from it. The boring bit is I'm not implying it's fit for any particular purpose, and there's no guarantees implied or otherwise about how it might run on your system. (Being based on Javascript and CSS, it heavily relies on what your browser is capable of).

The point of it is it's a programming language that's easy to type and understand. For example, If I wanted to output the current date in javascript, I'd have to type:

Code:

const now = new Date();
 const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 const dayName = days[now.getDay()];
 const dateTimeString = now.toLocaleString();
 document.getElementById('datetime').textContent = `${dayName}, ${dateTimeString}`;

Result:

And although to do that in Python is simpler, it's not as readable:

Code:

from datetime import datetime
 now = datetime.now()
 formatted = now.strftime("%A, %d/%m/%Y, %H:%M:%S")
 print(formatted)

Which again, gives us this:

Result:

Whereas, if I want to do that in HyperTalk, I'd be able to use:

Code:

put item 1 of the long date & "," && the date & "," && the time

Result:

However, the great thing about hyperTalk (and webtalk), is that it can also be quite flexible:

put item 1 of the long date & "," && dateFormat(the dateitems, "%d/%m/%Y") & "," && the time
 

HyperTalk script

HyperTalk was the programming language created in 1987 by Dan Winkler, and used in the HyperCard application, created by Bill Atkinson. Creating programs in HyperTalk was known as "scripting". HyperTalk scripts were much more similar to written English than many languages available at the time.

Webtalk script

A simple example of webtalk scripting:

This gives you an idea of what I'm aiming for here, to have something that is platform-agnostic which is capable of running HyperTalk scripts.

I'm trying to give a comparable set of features that were available in Hypertalk, but in Webtalk - so they are available to everyone. As such, there won't be specific Mac-only, Windows-only or Linux-only features implemented on this project. If I add a feature, it will be supported across all platforms.

Current progress:

The current documentation containing the release notes are here, as a PDF

You might also want to read the license agreement on that last page of the documentation too.

Download

You can download a copy of webtalk, (current version), from here. You don't need anything special to run it. Just a recent browser (if you are using Safari, needs to be version 17 or above)

Alternatively, if you prefer, you can try it as an online live demo here. You might also want to check out the testing pages, which give you a list of commands and handlers that are currently implemented.

Overview

A project overview (text file) is also available, which covers how this all works at a quick glance.

I should really mention, you can load JSON stacks with:

load stack "" -- if it can't find the file, it will ask you

 


Recent additions:

v141

Having now finished adding shapes for a while, I have implemented an inspector. At the moment, this is only used to get what properties you might have applied to an object. I will modify this in future so that you can also set properties with it as well. You can invoke the inspector either by double-clicking an object with the edit tool / edit mode, or pressing ctrl i when you have an object selected with resize handles shown.

v142

Added additional field tools, modified the tool icons (now use SVG images instead of emojis).

v143

Updated the "Testing" page to show all the current syntax that webtalk can handle. I also added a "Test Pages" button on the tools palette, so it's easy to get to for quick reference (handy if you want to look up how to do something).

v144

Made the script editor window resizable, tweaked the format button in the script editor, and made the webtalk online demo work for mobile devices.

Well, works on Android at least.

On iOS, I can't hold down my finger on an object to invoke the popup menu (it currently tries to select the text of the button, so I have to run the command to edit the script via the message box).

v145

Fixed a few auto-correct issues for iOS and Android in the script editor. Made the "Run tests" button on the "Testing page" reset before each click, and added a new isuppercase() function. (see documentation).

v146

You can now create an image object using:

create image "imagename"

Or you can use the "Add Image" icon on the Tools palette.

You can currently set the image filename (the actual image used in the image object) using:

set the filename of image "imagename" to "filename.png"

If you proportionally scale the image, or even resize it so it's distorted, this does not affect the data of the image object in any way.

v147

Too many changes to list here. Please see the documentation. :)

v148

Major fix to the object model renaming, and continued work on the inspector.

v149

Most notable fix is the addition of the "video" button on the tools palette (now supports player objects).

Please see the documentation for more info.

v150

Quick overview of changes: Fixes to the script editor involving comments, you can now move a selected object around the card using the arrow keys in edit mode, the card now detects the arrowkeys, added support for custom functions, added 'clear message box' function, added more shapes to the tools palette.

v151

Expanded upon the key events. (keydown, keyup, rawkeydown, rawkeyup, and a new one - keyheld) Please read page 54 of the documentation.

v152

I've added support for the pendingmessages and webtalk now also supports the 'move' command. Please see the documentation for further details (page 56).

v153

I added the 'spin' command. (made sense since we have a move command). I also corrected a rename issue with the inspector (which I'll detail more about in the documentation).

v154

Today I expanded the play note range (note frequencies in documentation), and I also expanded on sending function handlers to other objects.

on mousedown
   send playSound("E",120) to this card in 400 milliseconds
 end mousedown"

This will send that command, along with it's variables, to the playSound function handler in the card, after 400 milliseconds. (non-blocking). In your card script, all you then need is:

on playSound thenote,theTempo
   put thenote into tNote
   put theTempo into tTempo
   play tNote tempo tTempo
 end playSound"

musical-note-btns.json

v155

Expanded upon the put, and lines function... It can now support a lot more 'fuzzyness' - I'll detail that in the release notes. I'm now making test stacks as that's the best way to find what webtalk is missing.

count-test.json

See the 'Example Stacks' on the left-navigation panel.

v156

I've added a HyperTalk-Extender module. The HyperTalk-Extender (hte), is a way to add new functions to the interpreter, so that they are available to any stack.

The idea is you'd add them to hypertalk-extender.js -- here's one I added to line 28 to test it:

// myCommand sample script
 HyperTalkExtender.registerScript('myCommand', [
     'get item 1 of the long date',
     'put it into tResult'
 ]);

Then, to run it, create a new button and use this script:

on mousedown
    get hte_myCommand -- prefix all HyperTalk-Extender commands with "hte_"
    put it
 end mousedown

The output from this is:

(This would vary depending on the day of the week).

This way, people can write their own scripts which can be called from any other stack, just by customising the hypertalk-extender.js

v157

Added variable line heights to fields, with the commands:

set the lineheight of field "a" to 32
 set the lineheight of line 1 of field "a" to 10

lineheight.json

As always, more information can be found in the documentation.

v158

Added the baseURL function:

put the baseURL

Outputs the current address the webtalk interpreter is loading from:

https://www.tsites.co.uk/sites/webtalk/progress/live-demo/

or

file:///home/user/webtalk/index.html

..for example. This might be handy for finding out if you are in an online instance of the interpreter or in a locally-downloaded copy.

v159

Webtalk now supports some font commands and functions:

put the fontNames
 start using font "myfont.ttf"
 put the lastLoadedFont -- returns the internal font name of the last loaded font
 set the textFont of field "test" to "myfont Regular"
 stop using font "myfont Regular"

fonts.json

v160

Added fixes for the ask dialog, the "if exists" function, fixes to the convert command to handle the short date better, and added the combine function as a synonym of the join function. Please see the documentation for further details.

object-exists.json

put-field-test.json

v161

A few fixes to the way the inspector sets some properties, using the "ask list" to choose fonts now, and a bit of code cleanup. Nothing too major. I also added the ability to exit a handler:

on mousedown
   clear message box
   put "a"
   put "b"
   exit mousedown
   put "c" -- should never get to this point
end mousedown

exit-handlername.json

v162

Added a couple more features to Webtalk today. You can now use:

put isOdd("9") -- returns true if the number is odd, false if even

I also added the ability to test for prime numbers:

put isPrime("5") -- returns true if the number is a prime number (hopefully!)

I will update the documentation to include these additions in due course. As always, please ensure you fully refresh your browser cache between testing various versions of webtalk (just in case you are seeing errors in the testing pages). Here's a great little firefox extension I use for this.

v163

I added switch case statements today. You can now use:

switch myChoice
   case "a"
   put "You chose option A."
   break
   case "b"
   put "You chose option B."
   break
end switch

switch-case.json

v164

Expanded the replace regex functions, added a matchText function (examples in the test pages), and added a formatNumber function.

put "<​p>Hello <​b>World<​/b><​/p>" into thtml
 put replaceRegex("<[^>]*>", "", thtml)

outputs:

Hello World

replace-regex.json

Here's the matchText function being used to pinpoint a number in a string:

put matchtext("[0-9]+", "The price is £25.99", priceDigits)
 put priceDigits

returns:

true 25

matchtext.json

Here's an example of formatting a number in a one-liner for currency display:

put formatNumber(1234.567, 2, ",", ".", "£")

returns:

£1,234.57

Also made sure that we support both the long and short forms of the date and time:

put the long date -- Monday, June 9, 2025
 put the short date -- 6/9/2025
 put the long time -- 6:57:47 PM
 put the short time -- 6:57

date-time-long-short.json

Also added the dateFormat function, as a quick way to reference certain parts of the dateitems. You can do this with any valid dateitems string:

put dateFormat("2025,6,9,18,24,30", "%Y-%m-%d %H:%M:%S - %A, %B %e, %Y")

or you can do this with the dateitems function:

put dateFormat(the dateitems, "%Y-%m-%d %H:%M:%S - %A, %B %e, %Y")

dateFormat.json

v165

Added the ability to set a backgroundPattern property:

set the backgroundPattern of image "new" to the imageData of image "image1"

backgroundPattern.json

v166

I was messing about with the answer colour (or color, whichever you prefer). I added the web hex colour to the dialog:

But then I thought, why not make this a function so that people can easily convert between RGB and Web hex values (or back again). So you can now do:

put convert colour 255,118,0 -- would output #FF7600
 put convert color 180,0,255 -- using US english spelling, would output #B400FF
 put convert colour #73D216 -- would output 115,210,22

answer-colour.json

v167

Something else that I thought might be handy to add. If you reference an object by name that does not exist, yet you have something similar already on the card, the interpreter can now prompt you so you are aware of any naming mismatch (case sensitive errors)

v168

Added support for the 'grab me' function. As in:

on mousedown
    grab me
 end mousedown

grab-and-intersect-test.json

v169

Since we already have move, rotate, and spin - it seemed a good idea to support flipping:

 flip image("theImageToFlip", "imageA", "imageB", 300, left, true)

I should explain the parameters this takes. Parameter 1 is the image you want to perform the effect on. Parameter 2 and 3 (imageA and imageB) are your images we use for the flip, parameter 4 is the speed, and parameter 5 is the direction of flip, and parameter 6 is true or false (depending on if you want to use a perspective effect). The non-perspective effect needs a bit more work though.

flip-cards.json

v170

Fixed a few issues with the move command (for some reason, I'd forgot to allow it to move image objects).

move-image.json

Cleaned up the inspector properties, which fixes the setting of the border property (both for standard objects, and for custom graphics with points)

background-graphic.json

In addition, graphics - even ones with custom points, can now have their backgroundPattern set.

on mousedown
    set the backgroundPattern of graphic "myGraphic" to the imageData of image "myImage"
 end mousedown

v171

Expanded the intersect function.

intersect-test-2.json

Now, when we use:

on mousedown
    put intersect(graphic "dragme",image "intersectTest") into tResult
    put tResult
  end mousedown

The intersect function can detect transparent areas of PNG images, and these are now counted as 'not-intersecting' (false). That doesn't sound like much, but was actually quite hard to do.

v172

Just backtracked slightly, and fixed a bug with the incorrect borderColor/borderColour getting inherited between different stacks being loaded. Also went back and fixed the flip image so it works properly with non-perspective variants.

flip-2.json

v173

Bug fixing involving multi-line text fields (which was more about stopping interference from various browsers). You won't notice any changes as they are all under the surface. Nothing to report other than setting textColor of lines will now work a lot more reliably:

on mousedown
    -- assuming you had a field test, with text in line 1
    set the textcolor of line 1 of field "test" to red
    wait 1 second
    set the textcolor of line 1 of field "test" to green
  end mousedown

v174

Added a new command called applyForce. This adds force to an object in a specific direction, with a specific amount:

on mousedown
   set the collisionRate to 10 -- how often in milliseconds we check for collisions globally
   set the applyForce of image "ship" to "5,180" -- 5 is speed, 180 is angle of travel
  end mousedown

This is so you don't have to go through coding custom repeat loops, or checking for intersects in x duration (although you could of course still choose to do that).

add-force.json

I should also mention, this is all non-blocking. Please see the documentation for more information on this function (page 66).

v175

Added a new object type, scrollbars. (think 'Progressbar')

set the startValue of scrollbar "myScrollbar" to 0 -- minimum value of progress bar
 set the endValue of scrollbar "myScrollbar" to 100 -- maximum value of progress bar
 set the thumbPosition of scrollbar "myScrollbar" to 50 -- the current progress shown
 set the scrolltype of scrollbar "myScrollbar" to "bar" -- shows as a horizontal bar
 set the scrolltype of scrollbar "myScrollbar" to "round" -- shows as a round bar

scrollbar.json

Please see the documentation for more information on this function (also page 66).

v176

Implemented the mouseDoubleUp/DoubleDown messages.

mouseDoubleEvent.json

Please see the documentation for more information.

v177

Added a pixelColor function:

get the pixelColor(200,340) -- returns 30,120,54 for example
 get the pixelColour(400,50) -- using UK english spelling
 put the pixelColour(myX,myY) -- using variables as x and y points

The pixelColour (or pixelColor if you prefer), returns the colour of a pixel at a specific x and y point. Even if another window or popup was to overlap that specific x,y point.

pixelColour.json

v178

Vastly improved the if else condition statement, so that it's a lot more robust, and 'fuzzy'. You can also now use parentheses for if else conditions:

condition-if-else-parentheses.json

v179

Added a new removeDuplicates function. Also continued work on making fields more reliable (or rather, preventing browser interference).

Modified the spin command with the addition of a "logical" keyword, a few interface tweaks, and improvements to the 'exit repeat' command.

Please see the documentation for more information.

v180

Continued work on field object formatting, added methods to reference a property array of an object, implemented the do command (execute a variable as a line of hypertalk script), added numToCodepoint and codepointToNum. Also, the openstack message is now supported in a card along with the opencard one which was already there. See the test pages for examples.

field-tests.json

Please see the documentation for more information.

v181

Just a quick bit of tidy-up, improving fixes for browsers interfering with text field objects. Not much to say, other than multi-line text fields should be a lot more reliable to edit manually - however, this isn't perfect and I'm still refining it. (changes to "field-fix.js")

v182

Added the lastkeys([number]) for getting a list of the last pressed keys.

put the lastKeys(5) -- might return )5(sy

Implemented deleting lines of variable by variable line x:

put "3" into myLine
 delete line myLine of myVariable

Text formatting now reapplies to multi-line fields on stack reopen.

Object IDs are now retained upon stack reopen.

Referencing objects by IDs is now much better:

put the loc of button id 2
 put the number of lines in field id 1

Scrollbars no longer revert to 150px wide when you change their thumbPosition property:

set the width of scrollbar "Scrollbar 1" to 250
 set the thumbPosition of scrollbar "Scrollbar 1" to 52

v183

Added vScroll position function for when you scroll a field.

on scrollbarDrag newValue
   put newValue
 end scrollbarDrag

Also added the clickLine function:

on mouseDown
   put "Clicked on line: " & the clickLine of me
 end mouseDown

vscroll-clickline.json

Please see the documentation for more information.

v184

Added referencing objects by ID (every combination I could think of).
Added the ability to count the number of controls of this card as well:

put the number of controls of this card

I implemented changing a button into a checkbox (the isCheckbox property on the inspector).
(You can do this through the inspector, or you can do this via script):

set the isCheckbox of btn "newcheck" to true -- turns a button into a checkbox

Buttons now also support highlighted states.

Please see the documentation for more information.

checkbox-test.json

v185

Added a couple more features today:
Added a function called angleAndDistance.

put angleAndDistance(the loc of graphic "A",the loc of graphic "B")
 put angleAndDistance(the loc of graphic "A",the loc of graphic "B",diagonal)

angleAndDistance.json (or a live demo if you prefer)

I'll cover this more in the documentation. I also added a hasBattery function:

put the hasBattery

There is a gotcha with this though. It seems to work on all browsers except Firefox.

In the screenshot above, we have Firefox 140 on the left and Chromium/Chrome on the right.

Lastly, I implemented something else called closestControl:

closestControl.json

v186

I've refined the if, then, else conditional statements. They should be much improved. This now has it's own dedicated file (expressionparser.js) to work out what is actually meant in if statements, and properly parse them.
This is quite a large change, even though it won't visually seem like much has been modified. I've also been working on a few more examples and adding to the live demos.

conditional.json (or a live stack demo if you prefer)

v187

Implemented "the last object", so it's now possible to reference the last object created.
Create an object, or if you drag an object from the tools palette, you can now run:

put the last object
 put the name of the last object
 put the width of the last object
 put the textColour of the last object

You would get back the following (as an example):

field "New field 1" New field 1 200 black

last-object.json (live demo)

v188

I've added the ability to rotate scrollbar objects. It turns out, this is handier than I first thought.

scrollbar-rotation.json (live demo)

I've also added the export image command, although more will follow on this at a later stage.

export-tests.json (live demo)

As always, the detail is in the documentation.

 


Example stacks:

all-shapes.json
Standard shapes test
star.json
Generating a custom star shape.
8-point-star.json
Slightly different from the previous one, this generates a custom 8-point star shape.
datetests.json
Example stack showing dateitems conversion.
functiontest.json
Example stack showing the use of custom functions.
imagecopy.json
This stack shows how to duplicate image data to another image object. The image data itself is not changed in any way.
toggle-palettes.json
A stack which shows how to toggle the message box and tools palettes.
mouseup-test.json
Shows possible mouseup variants.
webtalk-logo-vid.json
An example video 'player' object showing various logos.
arrowkey-tests.json
This shows how to intercept the arrowkeys when pressed on the keyboard.
opencard.json
This is a demo showing the opencard handler in action.
light-or-dark.json
An example of how to adjust your stack for light or dark appearance. Have a look at the script of the button in the JSON stack.
baseURL.json
This stack uses the baseURL command, and shows how you can detect if webtalk is running online or locally.
keyheld-test.json
Example of using the keyheld message with no keyrepeat delays.
rawkeyup.json
A stack which uses the rawkeyup message in the card script.
rawkeydown.json
A stack which uses the rawkeydown message in the card script.
multiple-keyup.json
A stack showing how to test if a specific key is 'up'
multiple-keydown.json
A stack showing how to test if a specific key is 'down'
keydown-test.json
Stack showing more traditional keydown messages.
pendingmessages.json
Shows the concept of pendingmessages.
pendingmessages-cancel.json
Shows how to cancel individual pendingmessages.
move-example.json
Graphical demo of the move command.
spin.json
Graphical demo of the spin command.
spin-video.json
The spin command, with random rotation.
musical-note-btns.json
Playing musical notes by clicking buttons, using a 'send to' function, and also via keyboard inputs.
count-test.json
Counting the number of objects, and examples of referencing lines of fields and variables.
lineheight.json
Demo stack showing setting variable line heights of fields.
fonts.json
Loading, unloading custom fonts. Getting the font list, and setting fonts of fields.
object-exists.json
How to check if an object exists on the card, using the "if exists" and "if not exists" function.
put-field-test.json
Tests involving putting content from one field to another, or specific lines.
exit-handlername.json
Example showing what it means to exit out of a handler early.
switch-case.json
Demo shows how switch case statements work.
replace-regex.json
Function for regex replacements.
matchtext.json
the matchText function, which is quite powerful.
date-time-long-short.json
Making sure we support short and long time.
dateFormat.json
How to quickly reference any part of the dateItems for easy output.
backgroundPattern.json
This stack is a simple demo of setting a backgroundPattern (a repeating pattern).
answer-colour.json
This shows you how to use the answer colour function, but also how to convert between RGB and Web colour references (or back again).
repeat-until.json
A graphical example of using 'repeat until' logic.
grab-and-intersect-test.json
This shows two approaches to dragging an object, and using the intersect function.<
flip-cards.json
A demo of flipping between two images (setting the imageData).
move-image.json
Example moving an image object around the card via script
background-graphic.json
Showing how to set background patterns on graphic objects (even graphics that are custom shapes).
intersect-test-2.json
This stack shows expanded use of the intersect function, using a transparent PNG as detectable 'collision' areas.
scrollbar.json
This shows how to use progressbars in webtalk
mouseDoubleEvent.json
A stack which demos how the mouseDouble event messages work.
pixelColour.json
Use this example to return a pixel colour at a specified x,y location.
if-else-parentheses.json
Example showing the use of parentheses within an if else condition statement.
vscroll-clickline.json
This demo shows the use of the clickLine and the vScroll functions.
put-field-to-field.json
A validation test, more than anything. To check that putting field to field content works.
checkbox-test.json
Examples of using a checkbox, and buttons with highlights.
closestControl.json
A stack showing the use of the closestControl function.

Live demos and tools:

Live demo of using the lastKeys function
This example shows you how to reference the last keys the user pressed.
Bug maze demo
Live demo using a moves list field, and scripts showing how to make an object travel around a maze (with collision detection)
SVG to Webtalk shape converter
An online tool to convert SVG data into shape data that webtalk recognises. (results may vary).
Animate test
Live demo showing how you might do animation by swapping images into a target image object.
Angle and Distance
Live demo showing how to easily return distance and angle between two objects or two points.
Spaceship control
Live demo of spaceship control.
Conditional if then else
Here I'm testing conditional if else statements.
last object
Ways of referencing the last object created.
scrollbar-rotation
Rotating scrollbars, to give you vertical ones and reverse scrollbars.
export-tests
A stack demoing the use of the export image command.

 

Please ensure you fully refresh your browser cache between testing various versions of webtalk. Here's a great little firefox extension I use for this. In fact, once installed, refresh the page you run webtalk in a few times - I've also tried implementing a few methods of cache-blocking recently in the interpreter.