Live preview
Every visual section below is one statement. Use the toggle group to switch the pricing focus.
$plan = "pro"
planToggle = ToggleGroup("plan", [
{value: "starter", label: "Starter", icon: "seedling"},
{value: "pro", label: "Pro", icon: "rocket"},
{value: "scale", label: "Scale", icon: "building-columns"}
], $plan)
hero = Hero(
"Ship generative UI in a single tag",
"Drop in <streaming-ui-script>, feed it tokens from your LLM, and watch a real interactive UI appear — no framework lock-in.",
Button("Get started", Action([@OpenUrl("https://asfand-dev.github.io/streaming-ui-script/get-started.html")]), "primary"),
Button("Read the docs", Action([@OpenUrl("https://asfand-dev.github.io/streaming-ui-script/")]), "ghost"),
"New · v2.3 just shipped",
["Framework-agnostic", "Streaming-first", "Themeable"]
)
features = FeatureGrid([
FeatureItem("Framework-agnostic", "Works in React, Vue, Angular, Svelte, or plain HTML.", "puzzle-piece", "primary"),
FeatureItem("Streaming-first", "Render tokens the moment they arrive — never wait for the full response.", "bolt", "info"),
FeatureItem("80+ components", "Layout, forms, charts, kanban, timelines, banners — out of the box.", "gift", "success"),
FeatureItem("Theming", "Light, dark, neon, pastel — swap with one attribute.", "palette", "warning"),
FeatureItem("Routing built-in", "Multi-page apps with hash routes — no router needed.", "compass", "primary"),
FeatureItem("Tiny footprint", "Under 40 KB gzipped with zero runtime dependencies.", "feather", "info")
], 3)
starterCard = Card([
CardHeader("Starter", "For weekend hackers"),
TextContent("$0", "large-heavy"),
TextContent("Free forever — bring your own LLM key.", "small", "muted"),
Separator("horizontal", true),
List([
ListItem("Up to 3 prompts per day", null, "circle-check"),
ListItem("Community Discord access", null, "circle-check"),
ListItem("Light & dark themes", null, "circle-check")
]),
Buttons([Button("Start free", Action([@ToAssistant("Start the free plan")]), $plan == "starter" ? "primary" : "secondary")])
], $plan == "starter" ? "elevated" : "outlined")
proCard = Card([
CardHeader("Pro", "For shipping teams"),
TextContent("$29", "large-heavy"),
TextContent("per editor / month — billed yearly.", "small", "muted"),
Separator("horizontal", true),
List([
ListItem("Unlimited prompts", null, "circle-check"),
ListItem("Custom themes + tokens", null, "circle-check"),
ListItem("Routing & multi-page apps", null, "circle-check"),
ListItem("Email support", null, "circle-check")
]),
Buttons([Button("Start Pro trial", Action([@ToAssistant("Start the Pro trial")]), $plan == "pro" ? "primary" : "secondary")])
], $plan == "pro" ? "elevated" : "outlined")
scaleCard = Card([
CardHeader("Scale", "For platforms & agents"),
TextContent("Custom", "large-heavy"),
TextContent("Per-seat or volume pricing.", "small", "muted"),
Separator("horizontal", true),
List([
ListItem("Everything in Pro", null, "circle-check"),
ListItem("SSO + audit logs", null, "circle-check"),
ListItem("Dedicated success engineer", null, "circle-check"),
ListItem("SLA & private build", null, "circle-check")
]),
Buttons([Button("Talk to sales", Action([@ToAssistant("Schedule a call with sales")]), $plan == "scale" ? "primary" : "secondary")])
], $plan == "scale" ? "elevated" : "outlined")
pricingGrid = Grid([starterCard, proCard, scaleCard], 3, "l")
testimonialA = Testimonial(
"This is exactly the abstraction I wanted between my agent and my UI. We deleted three dashboards in a week.",
"Jordan Patel", "Founder, Looplog", null, 5
)
testimonialB = Testimonial(
"Our weekly recap email is generated end-to-end by an LLM. The renderer made the front-end stop being a bottleneck.",
"Mei Tanaka", "Eng lead, Atlasworks", null, 5
)
testimonialC = Testimonial(
"Switching from a hand-rolled DSL to streaming-ui-script removed 4,000 lines of glue code from our copilot.",
"Sam Reyes", "Staff engineer, Northwind", null, 4
)
socialGrid = Grid([testimonialA, testimonialB, testimonialC], 3, "m")
teamGrid = Grid([
ProfileCard("Ada Lovelace", "Founding engineer", null, "Designed the streaming evaluator and the action graph.", ["TypeScript", "Compilers"], null),
ProfileCard("Grace Hopper", "Component lead", null, "Owns the rich-UI patterns and the theming system.", ["Design systems", "A11y"], null),
ProfileCard("Linus Torvalds", "Infra & performance", null, "Keeps the bundle under 40 KB and CI under 90 seconds.", ["Perf", "DX"], null)
], 3, "m")
faq = Accordion([
AccordionItem("Does it work without React?", [TextContent("Yes — it's a web component. Drop in one script tag and a streaming-ui-script tag, and you're done. React, Vue, Angular, Svelte all work because they all support custom elements.")]),
AccordionItem("How do I add my own components?", [TextContent("Call el.registerComponents([...]). Each spec contains a name, props, and a render function. After registering, the LLM sees them in the system prompt automatically.")]),
AccordionItem("Is it really only 40 KB?", [TextContent("38 KB gzipped at the time of writing — and there are no runtime dependencies. The CSS is bundled inline and injected into each instance's shadow root.")])
])
closingBanner = Banner(
"Ready to ship generative UI?",
"Read the 30-second integration guide and you'll have a streaming UI before your coffee gets cold.",
Button("Get started", Action([@OpenUrl("https://asfand-dev.github.io/streaming-ui-script/get-started.html")]), "primary"),
"wand-magic-sparkles",
"primary"
)
root = Stack([
hero,
Section([planToggle], "Pricing"),
pricingGrid,
Section([], "Why teams pick streaming-ui-script"),
features,
Section([], "Loved by builders"),
socialGrid,
Section([], "Meet the team"),
teamGrid,
Section([faq], "FAQ"),
closingBanner
], "column", "xl")