HtmlScript is a Programming Language

HtmlScript is a programming language that uses HTML tags as syntax elements. It can be used for many tasks that would normally require javascript and is optimized for creating self-contained, server side-rendered UI components.

Example: Emoji Gallery

This example demonstrates the use of strings, arrays, loops, stack values, named variables, DOM manipulation, animations and asynchronous execution. You can edit the example and play around with it. Start by adding <debug-log> statements at different places to inspect the current stack value.

<div style="position: relative; font-size: 64px; width: 80px">
  <span></span>
</div>

<init>
  <string-split self="🌻🌷🪻💐🌿">
  <var-set name="emojis">
  <loop-while value="true">
    <var-get name="emojis">
    <!-- <debug-log> -->
    <array-get-first>
    <array-remove-first>
    <array-append>
    <var-set name="emojis">
    <selection-append-children>
      <span style="position: absolute; opacity: 0.0"></span>
    </selection-append-children>
    <selection-scope last-child="span">
      <selection-set-text>
      <style-animate duration="2">
        <style-set name="opacity" value="1.0">
        <selection-change previous-sibling="span">
        <style-set name="opacity" value="0.0">
      </style-animate>
      <selection-remove-from-parent>
    </selection-scope>
    <function-delay seconds="1">
  </loop-while>
</init>

Auto-Update

Concepts

Stack-oriented: While named variables are supported, the language is primarily stack-oriented. The return values of commands are added to the current stack and following commands read them from the stack as input for their parameters, unless parameters are provided explicitly.
Dynamically typed: Commands always know the types of their parameters. If the current value at the top of the stack doesn't match the required type, the command searches down the stack until it finds a type that matches.
Event based: Code is always executed in response to events. Event handlers can be attached to any element by placing an <on (event)> tag next to it.
DOM attached: Code is always executed in the context of a DOM element (the "selection"). Initially the selection is set to the event target. It can be changed by using the <selection-change>, <selection-scope> and <selection-loop> commands.

Features

Control flow like loops and conditional execution
Named variables and unnamed stack variables
Numeric calulations
Date and time calculations
Recursive functions and closures
Asynchronous execution
DOM manipulation and animations
Network requests
Basic reactive primitives

Example: Fibonacci Numbers

This example calculates the fibonacci numbers and demostrates the use of event handlers and recursive functions.

<form view="vstack" alignment="right" style="gap: 8px">
  <input type="text" name="n" value="20">
  <button>Calculate</button>
</form>

<on submit>
  <form-get-value name="n">
  <number-from-string>
  <function-call name="fib"></function-call>
  <debug-log>
</on>

<function name="fib" param-n="number" return="number">
  <number-is-equal other="0">
  <if-true>
    <function-return value="0">
  </if-true>
  <number-is-equal other="1">
  <if-true>
    <function-return value="1">
  </if-true>
  <var-eval name="first">
    <number-subtract self-var="n" value="1">
    <function-call name="fib"></function-call>
  </var-eval>
  <var-eval name="second">
    <number-subtract self-var="n" value="2">
    <function-call name="fib"></function-call>
  </var-eval>
  <number-add self-var="first" value-var="second">
</function>

Auto-Update