Template compiler for HTML
Write @if, @forand @switch in plain HTML. A Rust compiler turns your template into a render(context) function, or into HTML directly. Angular-style authoring, without Angular, and with nothing to adopt around it.
<ul class="user-list">
@for (user of context.users; track user.id) {
<li [class.active]="user.active">
{{ user.name }}
<button type="button" (click)="select(user.id, $el)">
Select
</button>
</li>
} @empty {
<li>No users</li>
}
</ul>
<script data-flowview>
function select(id, element) {
const list = element.closest("ul");
for (const item of list.querySelectorAll("li")) {
item.classList.toggle("active", item.contains(element));
}
list.setAttribute("data-selected", String(id));
}
</script>Where it fits
Embed a <template flowview> region in any.astro file, or import a standalone.flow file. HTML is produced at build or request time. Add FlowView Events for (click) bindings.
<template flowview={context} is:raw>
@if (context.user) {
<h1>Hello {{ context.user.name }}</h1>
}
</template>With @flowview/vite, a.flow file becomesexport function render(context). Your server decides when to call it, which makes Hono, Node.js, Cloudflare Workers and other Vite-built servers a natural fit.
import { render } from "./users.flow";
app.get("/users", async (c) => {
return c.html(render({ users: await getUsers() }));
});compile_static() parses once and returns an immutableCompiledStaticTemplate; render it with as many contexts as you like. No JavaScript engine is involved, so templates can only use a small deterministic expression subset: property paths, literals, comparisons and boolean operators.
use flowview_compiler::{compile_static, StaticCompileOptions};
let template = compile_static(source, StaticCompileOptions::default())?;
for page in &pages {
let context = serde_json::to_value(page)?;
let html = template.render(&context)?;
// write html ...
}Compose @flowview/dom,@flowview/reactive and Events when you want one. FlowView does not make templates reactive. Your code owns the state, and an expliciteffect() calls view.update().
import { createView } from "@flowview/dom";
import { effect, signal } from "@flowview/reactive";
import { render } from "./items.flow";
const state = signal({ loading: false, items: [] });
const view = createView("#app", render);
// The one explicit boundary: state -> view.
effect(() => {
view.update(state());
});Compiler
.flow source and the same AST feed a JavaScript backend and a native static HTML backend, and both follow one specification.For Astro, Vite, Hono, Node and Workers, and for browser code after a build. Source maps point errors back to your.flow file.
For Rust tools, documentation generators, reports and server-side Rust applications. Structured diagnostics carry a code, line and column.
FlowView is not a static site generator. Routing, Markdown and deployment stay with your host.
{{ value }} is escaped. {{{ value }}} inserts trusted HTML exactly as given and is never sanitized. Templates are trusted source.
Events and bindings
(click), (input), (change),(submit) and other native events compile to one delegated listener per event type, so DOM you render later keeps working. The Rust HTML compiler never sees (click).
<button (click)="save()">Save</button>
<input (input)="search($event)" />
<select (change)="change($event)">
<option value="a">A</option>
<option value="b">B</option>
</select>
<form (submit)="submit($event)">
<button>Send</button>
</form>
<button (click)="remove('item-1', $el)">Remove</button>
<script data-flowview>
function save() {}
function search(event) { /* event.target.value */ }
function change(event) {}
function submit(event) { event.preventDefault(); }
function remove(id, element) {}
</script>Boolean attributes, attr.* and class.*bindings, and full-value attribute interpolation. Generic DOM property binding is not supported.
<button [disabled]="context.loading">Save</button><div [class.active]="context.selected">...</div><section [attr.aria-busy]="context.loading">...</section><a href="{{ context.profileUrl }}">Profile</a>Packages
State lives in your code. A signal changes, an effect runs, and view.update() replaces the target HTML with a fresh render. There is no virtual DOM and no automatic dependency tracking inside templates.
Why trust it
Scope