ZeroScript
Build webapps with zero JavaScript
ZeroScript is an HTML-like syntax designed for building rich web applications using languages other than JavaScript.
This goal remains unrealistic until other languages can both generate HTML and manipulate the DOM. The solution is to use an HTML-first approach — instead of putting HTML inside your logic, ZeroScript puts your logic inside your HTML.
button onclick =...expression...
Clicks: count
button
This is NOT intended to be implemented by browsers or engines nor is it a proposal for the HTML spec itself. Think of it like Markdown — a small set of "preprocessor rules" for yielding predictable results regardless of underlying language or platform.
Learn ZeroScript
3 minutes
If you know HTML, you're already 90% there. Learn the rest in just 3 minutes...
Components
1 of 14
MyButton.html
button
Click me
button
Components are just vanilla HTML files. No imports necessary.
Attributes
2 of 14
index.html
html
body
MyButton
message ="Click me"
body
html
Use attributes to pass read-only values into a component.
index.html
html
body
MyButton
message ="Click me"
max =10
reset =false
body
html
Use JSON-like syntax to strongly-type numbers and booleans (unquoted attributes).
Expressions
3 of 14
index.html
html
body
MyButton
message ="Click me"
max =10
reset =false
expires =date
body
html
Complex objects and arrays can be passed as attributes when escaped as
an expression
MyButton.html
button
h1 message h1
p Limit: max p
div By: expires div
button
Access attribute values inside your component using
MyButton.html
button
h1 message ?? "Click me" h1
p Limit: max * 2 p
div By: expires.Minutes.Ago div
button
Any expression is valid. Full statements are not valid (i.e. code often separated by semicolons).
MyButton.html
button
h1 message ?? "Click me" h1
p Limit: max * 2 p
div By: expires.Minutes.Ago div
button
if
4 of 14
button
if count < 10
Clicks: count
if
button
button
if count < 10
Clicks: count
if
button
Control-flow tags include, exclude, or repeat their contents, but the
parent tag (
if first =user?.Name?.First
h1 Greetings first !h1
if
The
else
5 of 14
if first =user?.Name?.First
h1 Greetings first !h1
if
else
h2 Loading...h2
else
Use
else-if
6 of 14
if first =user?.Name?.First
h1 Greetings first !h1
if
else-if isLoading
h2 Loading...h2
else-if
else
button Sign inbutton
else
Optionally chain as many
for
7 of 14
ul
for article =articles
li
a href =article.Url
article.Title
a
li
for
ul
Repeat contents with
Slots
8 of 14
html
body
MyButton
h1 slot ="message"
Click b meb
h1
MyButton
body
html
Use slots to pass HTML as inputs into your component. Similar to
attributes, components access them with an expression, e.g.
Routes
9 of 14
📦 my-project
└─ 📂 blog
├─ 📜 index.html example.com/blog
└─ 📜 MyButton.html (private)
While every .html file is a component, only index.html files have addressable routes.
📦 my-project
└─ 📂 blog
├─ 📜 index.html ex.com/blog
└─ 📜 MyButton.html (private)
└─ 📂 slug
└─ 📜 index.html ex.com/blog/hi-there
ex.com/blog/one-more
ex.com/blog/last-one
Use the
state
10 of 14
state score =0
MyButton count =score
h1 The score is score h1
Use
state name ="World"
input value =name
h1 Hello name !h1
When
style
11 of 14
MyButton.html
style
button { color: red ; }
style
button
Click me
button
script
12 of 14
MyButton.html
script language ="ANY-LANGUAGE"
func handleClick (e):
print ("Button was clicked." );
script
button onclick =handleClick
Click me
button
Use
MyButton.html
state count =0
button onclick =e => count++
Clicks: count
button
If the guest language supports inline expressions, the
Sibling Files
13 of 14
📦 my-project
├─ 📜 MyButton.html
├─ 💄 MyButton.css
└─ 🤖 MyButton.**
Instead of embedding
HTTP/X
14 of 14
HTTP:
browser ------- GET -------> server
browser <------ HTML ------- server
HTTP/X:
browser ----- DOM EVENT ---> server or wasm
browser <--- DOM CHANGES --- server or wasm
HTTP/X represents a collection of HTTP-based protocols designed for
use cases where state and logic live on the server or in WASM instead
of in the browser via JavaScript.
Instead of requesting HTML with a GET, HTTP/X forwards browser events
to server-side (or WASM) event handlers which respond with
standardized instructions for manipulating the DOM.
Read more at
httpx.org.
ZeroScript
Done!
🎉
Now you know the ZeroScript syntax!
-
Full spec:
github.com/schmylan/zeroscript -
Follow along:
@zeroscript_org -
The origin story:
Distilling the Web to Zero
Get started using your favorite language:
Language | Project |
---|---|
C# / .NET | github.com/xui/xero |
Java / Kotlin | introduce yourself 👋 |
Ruby | introduce yourself 👋 |
Python | introduce yourself 👋 |
Go | introduce yourself 👋 |
Rust | introduce yourself 👋 |
Swift | introduce yourself 👋 |
Perl | introduce yourself 👋 |
Other? | introduce yourself 👋 |