hyTags
 HomeHome DocumentationDocumentation

Character Counter

Overview

This example demonstrates reactive properties in hyTags. Type in the textarea and watch the character count update in real-time.

The example shows how to use property, map-value, and map-property to create reactive data bindings.

 
<property name="text" type="string"></property>

<textarea></textarea>
<map-value>
  <property-set name="text">
</map-value>

<div></div>
<map-property name="text">
  <string-get-length>
  <number-to-string suffix=" character(s)">
  <selection-set-text>
</map-property>
↺ 👆 Try to change something! ⚠️ Preview only available on larger screens

Explanation

  • property: Defines a reactive property with a name, type, and optional initial value. Properties can be observed for changes.
  • map-value: Syncs the element's value to a property. Whenever the element's value changes (e.g., on input), the statements inside are executed with the new value on the stack.
  • property-set: Sets the value of a property. Takes the value from the stack and stores it in the named property.
  • map-property: Reacts to property changes. Whenever the named property changes, the statements inside are executed with the new value on the stack.
  • string-get-length: Gets the length of the string on the stack and pushes the result as a number.
  • number-to-string: Converts the number on the stack to a string.
  • selection-set-text: Sets the text content of the current selection to the string on the stack.
Test succeeded Test failed