One language. One platform.
From code to fleet.

prop question = 'Which stack wins?'
prop options = ['Phlo', 'Next.js', 'Laravel', 'Rails']

view:
<main#app.poll>
	<h1>$this->question</h1>
	<foreach $this->options AS $option>
		<button>$option</button>
	</foreach>
</main>

<!-- Server-rendered HTML: -->
<main id="app" class="poll">
	<h1>Which stack wins?</h1>
	<button>Phlo</button>
	<button>Next.js</button>
	<button>Laravel</button>
	<button>Rails</button>
</main>

view:
<h1>{en: Which stack wins?}</h1>
<button>{en: Vote}</button>

<!-- /poll  (source language: English) -->
<h1>Which stack wins?</h1>
<button>Vote</button>

<!-- /nl/poll  (auto-translated via langs/nl.ini) -->
<h1>Welke stack wint?</h1>
<button>Stem</button>

route both POST poll vote $id {
	if (!$option = type_poll::record(id: (int)$id)) return false
	type_poll::change('id=?', (int)$id, votes: $option->votes + 1)
	if (%req->async) return apply(outer: arr('#results' => $this->results))
	location('/poll')
}

// Async vote: the server replies with DOM commands,
// the client applies them. No reload, no JS, no API layer.
{
	"outer": {
		"#results": "<section id=\"results\" class=\"card\">...</section>"
	}
}

// A plain browser (no async) gets a redirect to /poll instead.
// One route serves both.

<style>
.option {
	display: grid
	grid-template-columns: 1fr auto
	gap: 4px 12px
	.bar {
		height: 8px
		border-radius: 4px
		background: $primary
		transition: width .4s
	}
	\:hover .bar: background: $accent
}
</style>

/* Compiled into app.css: */
.option {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
}
.option .bar {
	height: 8px;
	border-radius: 4px;
	background: var(--primary);
	transition: width .4s;
}
.option:hover .bar {
	background: var(--accent);
}