TargetJS: Unifying UI Dev – Animations, State, APIs

TargetJS offers a fresh approach to UI development: a single, unifying, and consistent method for handling animations, state management, APIs, and event handling.

We've designed TargetJS around a few core ideas:

• Variables and methods are unified via an internal wrapper called "targets."

• Targets execute sequentially and predictably in the order they are written leveraging ES2015's guaranteed property order.

• Reactive pipelines are enabled between adjacent targets.

• Lifecycles are added to targets enabling them to behave like living, responsive cells.

Here's a quick example of a growing and shrinking box:

import { App } from "targetj";

App({
    background: "purple",
    // width animates through 50 → 100 → 50, over 50 steps, 10ms interval
    width: [{ list: [50, 100, 50] }, 50, 10], 
    // `$` creates a reactive pipeline: the `height` updates each
    // time `width` executes
    _height$() { 
      return this.prevTargetValue / 2;
    } 
});

Here's what's happening.

• Targets run initially in the order they appear in the code, so background runs first, followed by width. The _ prefix indicates that a target is inactive by default, meaning height does not run initially.

• background sets the background to purple, and its lifecycle ends.
  Then, width animates from 50 → 100 → 50px, in 50 steps with 10ms pauses.

• height follows width and scales dynamically with its value. The $ postfix creates a reactive pipeline where the target is triggered each time the preceding target runs. prevTargetValue refers to the previous target's value, which in this case is width.

We can also implement the growing box directly in an HTML element using tg- attributes that mirror object literal keys:

<div
   tg-background="purple"
   tg-width="[{ list: [50, 100, 50] }, 50, 10]"
   tg-_height$="return this.prevTargetValue / 2;">
</div>

API Call Example

In this example, we demonstrate how to integrate with an API: we'll load one user and display their name.

import { App } from "targetj";

App({
  fetch: "https://targetjs.io/api/randomUser?id=user0",
  _html$() {
    return this.prevTargetValue.name;
  }
});

Or in HTML:

<div
   tg-fetch="https://targetjs.io/api/randomUser?id=user0"
   tg-_html$="return this.prevTargetValue.name;">
</div>

Here's what's happening.

• fetch is a special target that performs a data fetch when given a URL string.
• html sets the text content of the div to the user's name. Since the target name is prefixed with _ and ends with $, it executes only when an API call returns a result.
• prevTargetValue refers to the result of the previous target, which, in this case, is the result of the API call.

Click Counter Example

In this example, we demonstrate a click counter, which is commonly used as the ‘Hello World’ example in front-end frameworks.

import { App } from "targetj";

App({
    onClick() {},
    _html$: {
        initialValue: 0,
        value() { return this.value + 1; }
    }
});

Or in HTML:

<div
 tg-onClick=""
 tg-_html$="{
   initialValue: 0,
   value() { return this.value + 1; }
 }">
</div>

Here’s what’s happening.

• The onClick target is a special function that runs whenever the <div> element is clicked.
• Since the html is prefixed with _ and ends with $, it executes every time onClick runs.
• It is also possible to implement the counter update directly within the onClick target, but we wanted to demonstrate the reactive feature between adjacent targets.

Installation

Via CDN
No installation is necessary. Just add the following <script> tag to your HTML to load TargetJS from a CDN (only 44KB compressed):

<script src="https://ltstaticfiles.s3.us-east-1.amazonaws.com/targetjs.js"></script>

This will add TargetJS to the global window object, making it accessible throughout your JavaScript such as TargetJS.app(YourApp).

Via package manager
You can install also TargetJS via npm (note: there’s no “s” at the end):

npm install targetj

Ready to see to learn more?

🔗 Visit: GitHub Repo
🔗 Site: targetjs.io