HTML/CSS is Turing complete, so why not compile programs to plain HTML/CSS and runs with zero bytes of JavaScript?

https://t.co/VIIgOoUs9P https://t.co/goMiXFVom6

zero-js — a C-like language that compiles to zero-JavaScript HTML and CSS

Source: https://zero-js.vercel.app/ int a = input\("a", 10, 30\);

The optional second and third arguments set the initial value (default 0) and maximum (default 100). A fourth argument sets the minimum (default 0).

int clicked = click\(\); int held = press\(\);

Global to the compiled page, with no visible input controls. click toggles between 0 and 1 on each click; press is 1 while holding mouse or focused Space. Click the preview once to focus it. When click is used, releasing Space also toggles it. Repeated calls share the same surface. Page inputs can also be read inline outside functions, as in if (click()){ … }.

float jump = hold\_time\(\.9\);

Counts seconds while holding anywhere on the page or using focused Space, up to the duration (default 1 second). Release to reset to zero; hold again to restart. Pause and reduced motion stop the timer.

float x = arrow\_x\(280\); float y = arrow\_y\(120\);

After clicking the preview, use arrows to change positions from 0 to the maximum (default 100). Positions persist after release. Arrow movement and held Space work together on the same invisible page surface. Requires CSS scroll timelines; Pause and reduced motion affect clocks only.

int lamp = toggle\("lamp"\); float x = scroll\_x\("move", 100\);

Named controls remain available for separate switches and pads: toggle, pressed, scroll_x, scroll_y, and hold_time(“jump”, .9). Sliders and these explicit controls remain clickable above the global surface.

int w = typed\("key", "w"\);

Returns 1 when the text field contains the specified single printable ASCII character, ignoring letter case. Starts empty; delete to reset. This reads text, so releasing W leaves it set. Labeled controls directly initialize top-level numeric variables or array elements. Assignments recompute from current inputs; they do not retain game state across frames.

float x = input\("x", \-0\.5, 10, \-10\);

int stores signed integers and truncates toward zero. float preserves fractions. Numeric storage is bounded to ±1,000,000; floats print to three decimal places.

int c = abs\(a \- b\);

Use +, −, *, /, % (modulo), min, max, clamp, abs, sign, sqrt, hypot, mod, rem, floor, ceil, and round. sin, cos, tan, and atan2 use radians.

int check = a < b && a \!= 0;

Compare with <, >, <=, >=, ==, !=. Combine with &&, ||, and !. False is 0; true is 1.

int c = a \> b ? a : b;

Choose a value with condition ? yes : no. Both branches must be valid; only the selected branch prints or draws. Output also respects short-circuit && and ||.

if \(a \> b\) \{ c = a; \} else \{ c = b; \}

Reassign declared variables. Blocks have local scope; only the selected branch changes the values that follow.

int values\[3\] = \{9, 2, 7\}; values\[i\] = 5;

Arrays have 1–32 elements and a literal size. Omitted values are zero or empty strings. Use values[i] to read or write, and print(values) to display every element. Live indices round down; out-of-range reads return zero or an empty string and writes do nothing.

string greet\(string name\) \{ return name; \}

Variables, arrays, parameters, and function returns support int, float, and string. Strings select source literals, support reassignment and == / !=, and do not concatenate. Every function path must return a value.

int gcd\(int a, int b\) \{ return b == 0 ? a : gcd\(b, a % b\); \}

Direct tail recursion reuses loop state. Call the same function directly in a return, including a ternary branch. Recursion steps defaults to 64 body executions per call, including the first. Exceeding it shows a runtime error and hides subsequent output. Work after a recursive result and mutual recursion are unsupported.

for \(int i = 0; i < 30; i\+\+\) \{ a = a \+ i; \}

Iterations reuse CSS state and rules through nested HTML. Use literal bounds, < or <=, and i++ or i = i + a positive literal. Maximum 128 iterations per loop; total nesting is bounded.

if \(i \>= n\) \{ break; \}

break exits the nearest loop; continue skips the rest of its current iteration. Both use CSS state masks, so generated steps remain bounded by the loop’s literal limit.

print\(n % 3 == 0 ? "Fizz" : n\);

Print numbers, strings, or arrays inside functions, conditionals, and loops. Each call captures its current value; rows follow execution order and skipped calls take no space. Prints respect break, continue, and return. Conditional output can mix numbers and text.

canvas\(320, 240\); circle\(x, y, 8, click\(\) ? "\#0066ff" : "\#000"\);

Draw with rect(x, y, width, height), circle(centerX, centerY, radius), and line(x1, y1, x2, y2), including inside functions, if blocks, and loops. Shapes capture coordinates at each call and respect break, continue, and return. Each accepts an optional color: a hex string, or any string expression that selects one. Coordinates are pixels; canvas dimensions are literals.

float t = time\(8\);

A CSS clock counts seconds from 0 to 8, then repeats. time() defaults to 60 seconds. Each frame recomputes the program; variables do not persist between frames. Use Pause to stop motion.

CSS controls numeric precision. A live zero divisor produces 0; sqrt clamps negative inputs to 0. Keep input and canvas at the top level; input can directly initialize an array element. Functions accept and return scalar values, not whole arrays. Call a function as a statement to discard its return value.