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 bywidth
. The_
prefix indicates that a target is inactive by default, meaningheight
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