There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

A CSS/JS hybrid language


The brevity of CSS with the power of JavaScript.

Support for ":click" events, SPA routing and more.

A language that complements HTML, CSS and JS.

Total size: 49kB (Brotli)

Runs in realtime on all major modern browsers.

Pre-requisites: Knowledge of CSS and JavaScript.

<script src="/activecss-2-11-2.min.js"></script>
Overview and docsExamples

Basic clock with reactive variable

ACSS commands perform one after the other, like a regular language.

You can put CSS commands directly inside ACSS events, which this example demonstrates.

Code notes:
The special ACSS "draw" event is triggered when any element is first drawn on the page.
Dollar-prefixed variables contain raw Javascript expressions.
Variables used in CSS commands have single curly braces ("curlies").
$RANDHEXn is a special ACSS variable.
"Every" is the non-blocking ACSS equivalent of JS's "setInterval".
Here, when the "$clockTime" variable changes, the variable re-draws automatically.
The double curlies around $clockTime means "re-draw when the variable changes".
Only the content drawn in variable placeholders is updated, never the whole HTML tag.

Tic Tac Toe with human-like opponent

Components in ACSS are just blocks of HTML that can have scoped variables and events.

Here is an advanced demonstration of private components with custom elements.
There are two games displayed, each with privately scoped variables.

The computer opponent simulates a human, to make it more of a game.

Start by clicking on a square - you are X.
Run in fullscreen mode ("Go fullscreen" in the code editor.)

(As an aside, there is an amazing pure CSS version of AI Tic Tac Toe,
That CSS code is about 18KB minified. The ACSS used below is about 2KB and easier to read.
With ACSS, scalable UI using CSS syntax becomes an option.)

View 2.11.2 list of changes

Download and place in a script tag, or import as an npm package for Node.

<script src="/activecss-2-11-2.min.js"></script>