Embedded in Astro
Every section above is a <template flowview>region compiled by @flowview/astro at build time.
Product capabilities
What FlowView does today
Every live result on this page is produced by the real FlowView compiler and runtime. This site doubles as the browser-level acceptance app: Playwright exercises it in development and against the production build.
Capability inventory
- Live demo
- Rendered by real FlowView output on this site.
- Browser E2E
- Asserted by Playwright against this site.
- Compiler/spec
- Covered by Rust and spec-conformance tests.
- Release compatibility
- Checked with packed consumers before release.
Template compiler
-
Escaped interpolation
{{ value }} always becomes text, never markup.
- Live demo
- Browser E2E
- Compiler/spec
-
Raw interpolation
{{{ value }}} inserts trusted, author-controlled HTML. FlowView does not sanitize it.
- Live demo
- Browser E2E
- Compiler/spec
-
@if / @else
Conditional blocks, in both build-time and client views.
- Live demo
- Browser E2E
- Compiler/spec
-
@for / @empty
Keyed loops with an empty fallback, including transitions.
- Live demo
- Browser E2E
- Compiler/spec
-
@switch
@case and @default branches.
- Live demo
- Browser E2E
- Compiler/spec
-
Boolean, attribute and class bindings
[disabled], [attr.aria-busy] and [class.active].
- Live demo
- Browser E2E
- Compiler/spec
Astro integration
-
Embedded Astro template
<template flowview={context} is:raw> inside a .astro file. This page is built with it.
- Live demo
- Browser E2E
- Release compatibility
-
Standalone .flow file
A compiled .flow module imported by application code.
- Live demo
- Browser E2E
- Release compatibility
Events
-
(click) and (input)
Native, delegated listeners declared in the template.
- Live demo
- Browser E2E
- Compiler/spec
-
$event, $el and literal arguments
Handlers receive the event, the element or serialized values.
- Live demo
- Browser E2E
- Compiler/spec
-
Scope isolation
Same-named handlers in different templates do not collide.
- Live demo
- Browser E2E
Client DOM and reactivity
-
@flowview/dom
createView() replaces the HTML of one target element.
- Live demo
- Browser E2E
-
@flowview/reactive
An independent signal library. Application code calls view.update() from an effect.
- Live demo
- Browser E2E
-
Events after DOM replacement
Delegated handlers keep working with no rebinding code.
- Live demo
- Browser E2E
Safety and integration
-
XSS-safe by default
Hostile values in {{ }} render as inert text.
- Live demo
- Browser E2E
- Compiler/spec
-
Unicode and literal markers
Multi-byte text survives; marker-looking text stays literal.
- Live demo
- Browser E2E
- Compiler/spec
-
Astro View Transitions
Event handling survives client-side navigation.
- Live demo
- Browser E2E
-
Native static rendering
The Rust compile_static backend renders the same language without Node. It is verified by Rust and spec tests, not by this site.
- Compiler/spec
Escaped vs raw interpolation
{{ value }} escapes. {{{ value }}} inserts markup you wrote yourself. FlowView never sanitizes raw output, so only use it with trusted, author-controlled HTML.
Escaped
<strong>Hello</strong>
Raw (trusted)
Hello
Escaped hostile value
<img src=x onerror="globalThis.__flowviewCapabilitiesXss = true">
@switch
-
draft
Draft
-
published
Published
-
archived
Unknown status
-
something-else
Unknown status
Unicode and literal markers
Interpolated values
- é
- €
- 🙂
- �
- @if
- {{ value }}
- {{{ value }}}
Authored literal text
é € 🙂 � contact@if.example
@if {{ value }} {{{ value }}} 🙂 }
Two authoring paths
Standalone .flow
client-items.flow is compiled to a module and rendered in the browser. Seethe client DOM demo.
@flowview/dom and @flowview/reactive are independent optional libraries; the application composes them explicitly. Native static rendering in Rust is verified by the compiler test suite and is not demonstrated in the browser.