The web, as a language.

// The same program, inside an iOS or Android app.server fn device() -> map = platform()   // { os: "ios", model: ... }component Spot() {    state place = null    let locate = () => {        place = js("quilloNative.location")   // the phone's GPS        js("quilloNative.haptic", "success")    }    <div>        <button onclick={locate}>Where am I?</button>        {place != null && <p>{place.lat}, {place.lon}</p>}    </div>}

// One program, every layer in view: each function says what it touches.type Order = { id: int, total: dec, paid: bool = false }server fn unpaid() -> list with db =    db.query("select * from orders where not paid")server fn pay(id: int) -> map ! str with db, http {    http.post("https://pay.example/charge", { json: { id } })?    db.exec("update orders set paid = 1 where id = ?", id)}schedule("1d", () => db.exec("delete from orders where paid = 1"))component Orders() {    state orders = live(unpaid)    <ul>{for o in orders =>        <li key={o.id}>#{o.id} {o.total}            <button onclick={() => pay(o.id)}>Pay</button></li>}</ul>}route POST /orders { json: Order } with db =    db.exec("insert into orders (total) values (?)", json.total)route GET /orders = <Orders/>

// Written once. Served the same way by a server, by a desktop// app (`quillo app`), and inside an iOS or Android app, offline.route GET /notes with db = <NoteList notes={load_notes()}/>route GET /notes/:id(int) with db = match load_note(id) {    null => respond(404, "No such note")    n => <NoteView n={n}/>}route POST /notes { json: { title: str, body: str } } with db =    create_note(title, body)route GET /notes.csv with db =    respond(200, notes_csv(), { "content-type": "text/csv" })route GET /device = platform()   // { os: "android", ... }

db.open("app.db")db.exec(sql`create table if not exists todos            (id integer primary key, text text)`)server fn todos() -> list with db = db.query("select * from todos order by id")server fn add(text: str) -> map with db =    db.exec("insert into todos (text) values (?)", text)component Todos() {    state items = live(todos)    state text = ""    <form onsubmit={() => { add(text); text = "" }}>        <input value={text} placeholder="What next?"/>        <ul>{for t in items ?? [] => <li key={t.id}>{t.text}</li>}</ul>    </form>}route GET / = <html><body><Todos/></body></html>

$ lsdata  lib  main.qwe  migrations  ui$ quillo run main.qwe --watch --port 4321quillo: applied migration 001_orders.sqlquillo: 1 route listening on http://127.0.0.1:4321quillo: watching for changes# no package.json, no node_modules, no bundler, no build step

// A request comes in, an answer goes out. This is the whole app.db.open("notes.db")db.exec(sql`create table if not exists notes            (id integer primary key, text text)`)route GET / with db {    let notes = db.query("select text from notes order by id")    <html><body>        <ul>{for n in notes => <li>{n.text}</li>}</ul>        <form method="post" action="/notes">            <input name="text"/> <button>Add</button>        </form>    </body></html>}route POST /notes { form: { text: str } } with db {    db.exec("insert into notes (text) values (?)", text)    redirect("/")}

server fn add_note(text: str) -> list ! str with db {    if trim(text) == "" { return err("A note needs some text") }    db.exec("insert into notes (text) values (?)", text)    db.query("select * from notes order by id")}component Notes() {    state notes = []    state draft = ""    <form onsubmit={() => { notes = add_note(draft) ?? notes }}>        <ul>{for n in notes => <li key={n.id}>{n.text}</li>}</ul>        <input value={draft}/>    </form>}

fn problem(field: str, text: str) -> list = [{ field, text }]fn check_signup(s: map) -> list =    (contains(s.email, "@") ? [] : problem("email", "Not an email"))    + (trim(s.name) != "" ? [] : problem("name", "Name, please"))component Signup() {    state email = ""    state name = ""    let problems = check_signup({ email, name })    // as you type    <form onsubmit={() => { sign_up({ email, name }) }}>        <input value={email}/> <input value={name}/>        <ul>{for p in problems => <li>{p.text}</li>}</ul>    </form>}server fn sign_up(s: map) -> map ! list {    let problems = check_signup(s)                  // and it decides    len(problems) > 0 ? err(problems) : s}

               Quillo  Node 24  Bun 1.4plain text       262k     157k     225kJSON             258k     155k     227kfortunes         180k      89k     169kcompute         26.4k    24.4k    23.4k// requests a second, one process each// fortunes: sorted, escaped HTML

server fn load_notes() -> list with db = db.query("select * from notes order by id")server fn add_note(text: str) -> map with db = db.exec("insert into notes (text) values (?)", text)component Notes() {    state notes = live(load_notes)  // every open page sees new notes    <ul>{for n in notes => <li key={n.id}>{n.text}</li>}</ul>}

udp.listen(9000, (p) => {    channel.broadcast("readings", json.parse(p.text))})media.rtp("cam", { video: 5004, audio: 5006 })media.on("cam", { watch: (peer) => peer.session.user != null })component Gauge() {    state last = null    channel.open("readings", (r) => { last = r })    <div>        <p>{last == null ? "Waiting" : `${last.id}: ${last.v}`}</p>        <quillo-media stream="cam" muted/>    </div>}

let xs = range(0, 1000000) | map((i) => math.sin(i) * 100)stats.stdev(xs)                     // as Python's statistics modulestats.describe(xs)                  // count, mean, std, quartiles, maxstats.histogram(xs, 20)             // counts and edges, as numpy'sstats.linear_regression(xs, xs)     // { slope, intercept }vec.rolling_mean(xs, 7)             // a week's moving average

// shop.qwe: billing is a service, here or on a server of its ownservice billing = "billing.qwe" { timeout: "2s", retries: 1 }route POST /buy { form: { name: str } } with http {    let inv = billing.invoice(name, 1200, "a mug")    if is_err(inv) { reply 400 <p>Not bought: {inv.error}</p> }    <p>Invoice #{inv.id}: {inv.cents} cents</p>}// one process:            quillo run app.qwe// split, the same code:   quillo run app.qwe --split

// Every link is fetched as it is pointed at: the click shows it at once.route GET /docs/:page = render(page)// A prefetch never writes: this one is answered "not prefetched",// and the visit is counted when the link is followed.route GET /count with db {    db.exec("insert into visits values (1)")    <p>counted</p>}

route GET /posts/:slug with db {    let post = load_post(slug) ?? reply 404 "No such post"    <html lang="en">        <head>            <title>{post.title}</title>            <meta name="description" content={post.summary}/>            <link rel="canonical" href={`${SITE}/posts/${slug}/`}/>        </head>        <body><article><h1>{post.title}</h1>{markdown(post.body)}</article></body>    </html>}route GET /sitemap.txt with db =    posts() | map((p) => `${SITE}/posts/${p.slug}/`) | join("\n")

//! [dependencies]//! image = "0.25"/// How bright a picture is, from 0 to 255.pub fn brightness(path: &str) -> Result<f64, String> {    let img = image::open(path).map_err(|e| e.to_string())?;    let px = img.to_luma8();    let sum: f64 = px.pixels().map(|p| p.0[0] as f64).sum();    Ok(sum / px.len() as f64)}

$ cargo build --release --features app$ quillo run notes.qwe       # in the browser, at 127.0.0.1:8080$ quillo app notes.qwe       # the same program, in a window of its own# WebKit on macOS and Linux, WebView2 on Windows# only its window can reach it; closing the window ends it

use "lib/money.qwe"fn total(items: list) -> int = items | map((i) => i.cents) | sum()route GET /cart = {    total: price(totl([])),    label: price("free"),}$ quillo check app.qweapp.qwe:6: error: unknown name `totl` (did you mean `total`?)app.qwe:7: error: argument `cents` of `price` must be int, got strquillo: 2 errors