1 <!DOCTYPE html><html lang="en">2 <head>3 <meta charset="UTF-8">4 <meta name="viewport" content="width=device-width, initial-scale=1.0">5 <title>Flowtest – Visual API Flows, Monitors & Multi‑Environment Testing</title>6 <meta property="og:title" content="Flowtest — Visual API Flows & Monitors" />7 <meta property="og:url" content="https://flowtest.io/" />8 <meta property="og:image" content="https://flowtest.io/img/og-variant1.jpg" />9 <meta property="og:site_name" content="FlowTest" />10 <meta property="og:description" content="Design no‑code API flows, capture data between steps, and run environment‑aware monitors with webhooks and self‑hosted workers." />11 <meta name="twitter:card" content="summary_large_image" />12 <meta name="twitter:site" content="@flowtest_io" />13 <meta name="twitter:title" content="Flowtest — Visual API Flows & Monitors" />14 <meta name="twitter:description" content="Visual API testing with captures, assertions, environments and monitors. No scripts, no pipelines." />15 <meta name="twitter:image" content="https://flowtest.io/img/og-variant1.jpg" />16 <meta name="ai-image-prompt" content="Screenshot of a QA engineer visually designing multi-step API workflows with environments, monitors, and assertions in a sleek dark web interface" />17 <!-- Tailwind CSS via CDN -->18 <script src="https://cdn.tailwindcss.com"></script>19 <style>20 :root {21 color-scheme: dark;22 }23 .glass-panel {24 background: linear-gradient(135deg, rgba(15, 23, 42, 0.65), rgba(15, 118, 110, 0.2));25 border: 1px solid rgba(148, 163, 184, 0.2);26 }27 </style>28 <script defer src="https://umami.hola.cloud/script.js" data-website-id="d0d92ddb-2c09-4ea4-80da-80469c42ffb8"></script>29 <script type="application/ld+json">30 {31 "@context": "https://schema.org",32 "@type": "SoftwareApplication",33 "name": "Flowtest",34 "url": "https://flowtest.io",35 "applicationCategory": "Developer Tool",36 "operatingSystem": "All",37 "offers": {38 "@type": "Offer",39 "price": "0",40 "priceCurrency": "EUR"41 },42 "description": "Flowtest helps QA teams and startups test APIs visually with no code, environment‑aware monitors, webhooks and self‑hosted workers."43 }44 </script>45 <!-- Hotjar Tracking Code for https://flowtest.io -->46 <script>47 (function(h,o,t,j,a,r){48 h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};49 h._hjSettings={hjid:6480045,hjsv:6};50 a=o.getElementsByTagName('head')[0];51 r=o.createElement('script');r.async=1;52 r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;53 a.appendChild(r);54 })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');55 </script>56 </head>57 <body class="bg-slate-950 text-slate-100 antialiased">58 <div class="relative overflow-hidden">59 <div aria-hidden="true" class="pointer-events-none select-none">60 <div class="absolute -top-48 -left-24 h-96 w-96 rounded-full bg-cyan-500/25 blur-3xl"></div>61 <div class="absolute top-1/3 right-0 h-80 w-80 rounded-full bg-emerald-500/20 blur-3xl"></div>62 <div class="absolute bottom-0 left-1/2 h-72 w-72 -translate-x-1/2 translate-y-1/3 rounded-full bg-indigo-500/25 blur-3xl"></div>63 </div><!-- Navbar -->64 <nav class="relative z-10 border-b border-white/10 bg-slate-950/80 backdrop-blur">65 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">66 <span class="font-semibold text-lg tracking-tight text-slate-100">Flowtest.io</span>67 <div class="flex items-center space-x-4" id="menu-loggedin" style="display: none">68 <a href="/api-reference/" class="text-sm font-medium text-slate-200 hover:text-cyan-300 transition">API</a>69 <a href="/doc/" class="text-sm font-medium text-slate-200 hover:text-cyan-300 transition">Docs</a>70 <a href="/console/" class="inline-flex items-center gap-2 rounded-full border border-cyan-400/60 bg-cyan-500/10 px-4 py-2 text-sm font-semibold text-cyan-200 hover:bg-cyan-500/20 transition">Console</a>71 </div>72 <div class="flex items-center space-x-4" id="menu-loggedout">73 <a href="/api-reference/" class="text-sm font-medium text-slate-200 hover:text-cyan-300 transition">API</a>74 <a href="/doc/" class="text-sm font-medium text-slate-200 hover:text-cyan-300 transition">Docs</a>75 <a href="https://sandbox.flowtest.io/console/" class="hidden sm:inline-flex items-center gap-2 rounded-full border border-emerald-400/60 bg-emerald-500/10 px-4 py-2 text-sm font-semibold text-emerald-100 hover:bg-emerald-500/20 transition" target="_blank">Open playground</a>76 <a href="/console/" class="inline-flex items-center gap-2 rounded-full border border-cyan-400/60 bg-cyan-500/10 px-4 py-2 text-sm font-semibold text-cyan-200 hover:bg-cyan-500/20 transition">Sign up</a>77 <a href="/console/" class="text-sm font-medium text-slate-200 hover:text-cyan-300 transition">Log in</a>78 </div>79 </div>80 </nav>81 82 <script>83 fetch("/auth/me", {headers: {}})84 .then((resp) => resp.json())85 .then((me) => {86 if (me.error) return;87 document.getElementById("menu-loggedout").style.display = "none";88 document.getElementById("menu-loggedin").style.display = "flex";89 });90 </script>91 92 <section id="beta-info" class="relative z-10 hidden border-y border-cyan-500/40 bg-cyan-500/10 text-cyan-100">93 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex flex-col gap-2 text-center sm:flex-row sm:items-center sm:justify-between">94 <p class="text-sm font-medium tracking-wide uppercase">Private beta open for the first <span id="beta-remaining">...</span> teams.</p>95 <a href="/console/?get-invitation" class="inline-flex items-center justify-center rounded-full border border-cyan-400/60 bg-slate-950/60 px-4 py-1 text-sm font-semibold text-cyan-200 hover:bg-cyan-500/20 transition">Get invitation</a>96 </div>97 </section>98 <script>99 fetch('/beta')100 .then(r => r.json())101 .then(b => {102 const betaInfo = document.getElementById('beta-info');103 if (!b.closed) {104 betaInfo.classList.remove('hidden');105 document.getElementById('beta-remaining').textContent = b.remaining;106 }107 });108 </script>109 110 <main class="relative z-10">111 <!-- Hero -->112 <section class="px-4 sm:px-6 lg:px-8 py-16 sm:py-24">113 <div class="max-w-6xl mx-auto grid gap-16 lg:grid-cols-[1.1fr,0.9fr] items-center">114 <div class="space-y-8">115 116 <div class="flex flex-col gap-4 sm:flex-row sm:items-center">117 <p class="text-sm text-slate-400">Want to see it in action first? Use the open playground — it resets every hour and is safe to break.</p>118 <a href="https://sandbox.flowtest.io/console/" class="inline-flex items-center justify-center rounded-full bg-cyan-400 px-6 py-3 text-sm font-semibold text-slate-950 shadow-lg shadow-cyan-500/30 transition hover:bg-cyan-300" target="_blank">Try the playground</a>119 </div>120 <div class="inline-flex items-center gap-2 rounded-full border border-slate-700 bg-slate-900/80 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-slate-300">121 No‑code multi‑step API flows122 </div>123 124 <h1 class="text-4xl sm:text-5xl font-semibold leading-tight text-white">Visual API testing with environments, monitors & workers.</h1>125 <p class="text-lg text-slate-300 max-w-xl">Flowtest feels like a productivity app, not a CI script. Design flows, capture data between steps, and run production‑safe monitors per environment — without touching YAML or pipelines.</p>126 127 <dl class="grid grid-cols-2 gap-6 max-w-md text-sm text-slate-300">128 <div>129 <dt class="font-semibold text-slate-100">Flows created in beta</dt>130 <dd class="text-2xl font-semibold text-white">7,200+</dd>131 </div>132 <div>133 <dt class="font-semibold text-slate-100">Average setup time</dt>134 <dd class="text-2xl font-semibold text-white">< 4 minutes</dd>135 </div>136 </dl>137 138 <ul class="mt-4 grid gap-3 text-sm text-slate-300 sm:grid-cols-2">139 <li class="flex items-start gap-2"><span class="mt-1 h-1.5 w-1.5 rounded-full bg-emerald-300"></span><span>No‑code editor with Params, Headers, Body, Auth, Tests & Settings per step.</span></li>140 <li class="flex items-start gap-2"><span class="mt-1 h-1.5 w-1.5 rounded-full bg-emerald-300"></span><span>Capture response data and reuse it downstream across steps and suites.</span></li>141 <li class="flex items-start gap-2"><span class="mt-1 h-1.5 w-1.5 rounded-full bg-emerald-300"></span><span>Environment‑aware automation with schedules, webhooks and alerts.</span></li>142 <li class="flex items-start gap-2"><span class="mt-1 h-1.5 w-1.5 rounded-full bg-emerald-300"></span><span>Run flows from self‑hosted workers to test internal or private APIs.</span></li>143 </ul>144 </div>145 <div class="glass-panel relative rounded-3xl p-6 shadow-xl shadow-slate-900/60 ring-1 ring-white/10">146 <div class="absolute -top-6 left-8 inline-flex items-center gap-2 rounded-full border border-emerald-400/40 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-200">Multi‑environment monitor</div>147 <div class="space-y-4">148 <div class="rounded-2xl border border-white/10 bg-slate-950/80 p-4">149 <div class="flex items-center justify-between text-xs font-semibold text-slate-300">150 <span>Checkout journey</span>151 <span class="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-emerald-200"><span class="h-1.5 w-1.5 rounded-full bg-emerald-300"></span>All envs healthy</span>152 </div>153 <div class="mt-4 grid grid-cols-3 gap-2 text-[11px] text-slate-300">154 <div class="rounded-xl bg-slate-950/80 p-2 border border-white/5">155 <div class="flex items-center justify-between"><span class="text-[10px] uppercase tracking-wide text-slate-400">default</span><span class="text-emerald-300 text-xs">OK</span></div>156 <p class="mt-1 text-[11px] text-slate-300">Run every 10 min · 99.8% SLA</p>157 </div>158 <div class="rounded-xl bg-slate-950/80 p-2 border border-white/5">159 <div class="flex items-center justify-between"><span class="text-[10px] uppercase tracking-wide text-slate-400">staging</span><span class="text-amber-300 text-xs">Warn</span></div>160 <p class="mt-1 text-[11px] text-slate-300">Last failure: assertion on /orders</p>161 </div>162 <div class="rounded-xl bg-slate-950/80 p-2 border border-white/5">163 <div class="flex items-center justify-between"><span class="text-[10px] uppercase tracking-wide text-slate-400">production</span><span class="text-emerald-300 text-xs">OK</span></div>164 <p class="mt-1 text-[11px] text-slate-300">Alerts → Slack #oncall</p>165 </div>166 </div>167 <div class="mt-4 space-y-2 text-sm text-slate-200">168 <p class="flex items-center justify-between"><span class="font-medium">Login</span><span class="text-emerald-300">200 ms · status eq 200</span></p>169 <p class="flex items-center justify-between"><span class="font-medium">Create session token</span><span class="text-emerald-300">capture token → {{token}}</span></p>170 <p class="flex items-center justify-between"><span class="font-medium">Submit order</span><span class="text-emerald-300">442 ms · 3 assertions</span></p>171 <p class="flex items-center justify-between"><span class="font-medium">Webhook</span><span class="text-emerald-300">Slack & email on fail</span></p>172 </div>173 </div>174 <div class="rounded-2xl border border-white/10 bg-slate-950/60 p-4" id="product-tour">175 <div class="relative aspect-[4/3] overflow-hidden rounded-xl border border-white/10 bg-slate-900">176 <iframe177 src="https://www.youtube.com/embed/xDLUdt5u0jY?autoplay=0&mute=0"178 allow="autoplay; encrypted-media"179 allowfullscreen180 class="h-full w-full border-0"></iframe>181 </div>182 <p class="mt-3 text-xs text-slate-400">See how flows use environments, captures and workers in under 3 minutes.</p>183 </div>184 </div>185 </div>186 </div>187 </section>188 189 <!-- Feature grid -->190 <section class="px-4 sm:px-6 lg:px-8 pb-16">191 <div class="max-w-6xl mx-auto">192 <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">193 <h2 class="text-3xl font-semibold text-white">Everything you need to own your API journeys.</h2>194 <p class="max-w-xl text-sm text-slate-300">Build suites that mirror real customer flows. Flowtest turns requests, assertions, environments, schedules and alerts into one visual surface.</p>195 </div>196 <div class="mt-12 grid gap-8 lg:grid-cols-3">197 <article class="rounded-2xl border border-white/10 bg-slate-950/80 p-8">198 <div class="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-200">No‑code flow editor</div>199 <h3 class="mt-4 text-xl font-semibold text-white">Design flows like diagrams, not scripts.</h3>200 <p class="mt-4 text-sm text-slate-300">Each step has its own Params, Headers, Body, Auth, Tests and Settings. Add and reorder steps as your journeys grow — no YAML, no brittle shell scripts.</p>201 </article>202 <article class="rounded-2xl border border-white/10 bg-slate-950/80 p-8">203 <div class="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-200">Data‑aware assertions</div>204 <h3 class="mt-4 text-xl font-semibold text-white">Capture once, reuse everywhere.</h3>205 <p class="mt-4 text-sm text-slate-300">Extract tokens, IDs or any JSON field from responses and reuse them in later steps. Co‑locate assertions with each request so QA and engineers share the same context.</p>206 </article>207 <article class="rounded-2xl border border-white/10 bg-slate-950/80 p-8">208 <div class="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-200">Environments & workers</div>209 <h3 class="mt-4 text-xl font-semibold text-white">Run the right checks in the right place.</h3>210 <p class="mt-4 text-sm text-slate-300">Configure default, staging, production and custom environments. Attach schedules, webhooks and alerts per environment — and run flows from self‑hosted workers inside your network.</p>211 </article>212 </div>213 </div>214 </section>215 216 <!-- Differentiators strip -->217 <section class="px-4 sm:px-6 lg:px-8 pb-16">218 <div class="max-w-6xl mx-auto rounded-3xl border border-white/10 bg-slate-950/80 p-6 sm:p-8">219 <div class="grid gap-6 md:grid-cols-4 text-sm text-slate-200">220 <div>221 <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400 mb-2">Compared to scripts</p>222 <p>Stand up regression suites in minutes, not weeks of bash + curl + CI glue.</p>223 </div>224 <div>225 <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400 mb-2">Compared to Postman</p>226 Enlace
El enlace para compartir es: