Live preview
Toggle annual/monthly billing — the prices in
PricingTable recompute via a ternary on
$cycle.
$cycle = "annual"
cycleToggle = ToggleGroup("cycle", [
{value: "monthly", label: "Monthly", icon: "calendar"},
{value: "annual", label: "Annual · 20% off", icon: "party-horn"}
], $cycle)
cover = Cover(
"Pricing built for shipping teams",
"https://images.unsplash.com/photo-1551434678-e076c223a692?w=1600&q=80",
"Start free, scale when you're ready. Every plan includes streaming, theming, and JavaScript interactions.",
"Pricing · v2.3",
"Cancel anytime · no credit card to start",
[
Button("Start free", Action([@ToAssistant("Start the free plan")]), "primary"),
Button("Compare plans", Action([@ToAssistant("Show me a full feature comparison")]), "ghost")
],
"primary",
"320px"
)
trustStrip = Stats([
{label: "Teams trust it", value: "2.4k+", hint: "Across 40 countries", tone: "primary"},
{label: "Uptime SLA", value: "99.99%", hint: "Multi-region production", tone: "success"},
{label: "Time to first UI", value: "<90 sec", hint: "From signup to first render", tone: "info"},
{label: "Support reply", value: "<1 hr", hint: "Median weekday response", tone: "warning"}
], "center")
starterTier = PricingCard(
"Starter",
"$0",
"/forever",
"Everything you need to ship your first LLM-powered UI.",
["Up to 3 prompts per day", "Light & dark themes", "Community support"],
Button("Start free", Action([@ToAssistant("Start the free plan")]), "secondary"),
null,
false
)
proTier = PricingCard(
"Pro",
$cycle == "annual" ? "$23" : "$29",
"/editor/month",
"For teams shipping production apps with the LLM.",
["Unlimited prompts",
"Custom themes & tokens",
"Routing & multi-page apps",
"JavaScript interactions",
"Email support"],
Button("Start Pro trial", Action([@ToAssistant("Start the Pro trial")]), "primary"),
"Most popular",
true
)
scaleTier = PricingCard(
"Scale",
"Custom",
null,
"For platforms and agent builders running at scale.",
["Everything in Pro",
"SSO + SCIM + audit log",
"Dedicated success engineer",
"Private build & SLA"],
Button("Talk to sales", Action([@ToAssistant("Schedule a call with sales")]), "secondary"),
null,
false
)
pricingGrid = PricingTable([starterTier, proTier, scaleTier], 3)
differentiators = FeatureGrid([
FeatureItem("Streaming-first", "Render tokens the moment they arrive.", "bolt", "primary"),
FeatureItem("Framework-agnostic", "React, Vue, Angular, Svelte, plain HTML.", "puzzle-piece", "info"),
FeatureItem("Production themes", "Light, dark, neon, pastel — all responsive.", "palette", "warning"),
FeatureItem("100+ patterns", "Hero, Cover, MediaCard, Kanban, Timeline, more.", "gift", "success"),
FeatureItem("Routing built in", "Multi-page apps via hash routes — no extra router.", "compass", "primary"),
FeatureItem("Tiny footprint", "Under 40 KB gzipped, zero runtime dependencies.", "feather", "info")
], 3)
socialQuote = Quote(
"This is exactly the abstraction I wanted between my agent and my UI. We deleted three dashboards in a week.",
"Jordan Patel · Founder, Looplog",
"primary"
)
proofRow = Stack([
Rating(4.9, 5, "4.9 of 5 on review sites", 268, "md", false),
AvatarGroup([
{name: "Naomi", src: "https://i.pravatar.cc/64?img=47"},
{name: "Marc", src: "https://i.pravatar.cc/64?img=11"},
{name: "Grace", src: "https://i.pravatar.cc/64?img=32"},
{name: "Linus", src: "https://i.pravatar.cc/64?img=12"},
{name: "Ada", src: "https://i.pravatar.cc/64?img=20"},
{name: "Mei", src: "https://i.pravatar.cc/64?img=14"}
], 5, "md"),
TextContent("Trusted by indie devs and Fortune 500 alike.", "small", "muted")
], "row", "l", "center")
faq = Accordion([
AccordionItem("Can I switch plans later?",
[TextContent("Yes — upgrade or downgrade at any time, prorated to the day.")]),
AccordionItem("What counts as a prompt?",
[TextContent("Any LLM call that triggers a streaming-ui-script render. Tool calls and renders don't add to the count.")]),
AccordionItem("Do you offer education discounts?",
[TextContent("50% off Pro for verified students and 75% off for accredited classrooms. Email us with proof of enrollment.")]),
AccordionItem("Is my data used to train models?",
[TextContent("Never. We don't train on your prompts, your tools, or your generated UIs.")])
])
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([
cover,
Section([cycleToggle], "Choose a billing cycle"),
pricingGrid,
Section([], "Why teams choose streaming-ui-script"),
trustStrip,
differentiators,
Section([], "Loved by builders"),
socialQuote,
proofRow,
Section([faq], "Frequently asked"),
closingBanner
], "column", "xl")