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 100 → 250 → 100, 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 100 → 250 → 100px, 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>

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>

For more serious development, you can install TargetJS via npm:

npm install targetj

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.

Ready to see it in action or learn more?

🔗 Visit: GitHub Repo
🔗 Site: targetjs.io

API Call Example

Leave a Reply Cancel reply