CMS
CRM & Marketing
Integrations
API
Webhooks
CI/CD
Versioning
Infrastructure
Analytics
From CMS to cloud, Vev adapts to your stack without lock-in.
Host anywhere: CMS, server, or custom workflow
Keep your stack.
Expand your capabilities.
Does your tech stack constrain your creative ambitions? Vev is here to help. Generate production-ready static files and publish wherever your infrastructure lives—no lock-in.
Publish anywhere
Publish anywhere. Compatible with major CMS platforms like Contentful, Sanity, Drupal, WordPress, and more
Flexible hosting
Flexible hosting. Easily integrate with custom hosting environments or CI/CD pipelines
Any content type
Any content type. Deploy full pages or visual components, block by block
Host anywhere: CMS, server, or custom workflow
Keep your stack.
Expand your capabilities.
Does your tech stack constrain your creative ambitions? Vev is here to help. Generate production-ready static files and publish wherever your infrastructure lives—no lock-in.
Publish anywhere
Compatible with major CMS platforms like Contentful, Sanity, Drupal, WordPress, and more
Flexible hosting
Easily integrate with custom hosting environments or CI/CD pipelines
CI
CD
Any content type
Deploy full pages or visual components, block by block
Host anywhere: CMS, server, or custom workflow
Keep your stack.
Expand your capabilities.
Does your tech stack constrain your creative ambitions? Vev is here to help. Generate production-ready static files and publish wherever your infrastructure lives—no lock-in.
Publish anywhere
Compatible with major CMS platforms like Contentful, Sanity, Drupal, WordPress, and more
Flexible hosting
Easily integrate with custom hosting environments or CI/CD pipelines
CI
CD
Any content type
Deploy full pages or visual components, block by block
REST API:
Connect Vev to your pipeline, version control, or CMS for integration flexibility.
Webhook support
Automate workflows with real-time deployment triggers when publishing from Vev.
Versioned publishing
Manage staging, approvals, and go-live flows with full control via API
Webhook support
Automate workflows with real-time deployment triggers when publishing from Vev.
REST API
Versioned publishing
Manage staging, approvals, and go-live flows with full control via API
Connect Vev to your pipeline, version control, or CMS for integration flexibility.
Webhook support
Automate workflows with real-time deployment triggers when publishing from Vev.
REST API
Connect Vev to your pipeline, version control, or CMS for integration flexibility.
Versioned publishing
Manage staging, approvals, and go-live flows with full control via API
Webhook support
Automate workflows with real-time deployment triggers when publishing from Vev.
REST API
Versioned publishing
Manage staging, approvals, and go-live flows with full control via API
Connect Vev to your pipeline, version control, or CMS for integration flexibility.
Webhook support
Automate workflows with real-time deployment triggers when publishing from Vev.
REST API:
Versioned publishing
Manage staging, approvals, and go-live flows with full control via API
Connect Vev to your pipeline, version control, or CMS for integration flexibility.
Host with Vev for unparalleled performance
Power your experiences
with Cloudflare-backed delivery
When you choose to host with Vev, you're getting industry-leading speed, security, and scalability.
$ vev host --with speed security scalability
> Authenticating with Cloudflare...
✔ Account verified (Vev)
> Provisioning global CDN...
✔ 250+ edge locations ready
✔ TLS 1.3 enabled
✔ WAF + DDoS protection active
> Optimizing assets...
✔ Brotli compression applied
✔ Images transformed
✔ Cache rules deployed
> Deploying application...
✔ Multi-region rollout (NA, EU, APAC, SA, MEA)
✔ Auto-scaling enabled
> Running system checks...
✔ Global latency <200ms
✔ Uptime target 99.99% confirmed
Deployment complete!
Hosting with Vev is live 🚀
✔ Speed
✔ Security
✔ Scalability
Embed Vev natively into your site
Design and publish without developer bottlenecks
Use Vev to own the front-end layer of your marketing site, without touching your core codebase.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>NeuroLaunch — Hero (Scoped 1024×800)</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<style>
:root { --bg:#09090b; --fg:#ffffff; --muted:#eeeeee; --a1:#7c3aed; --a2:#22d3ee; --a3:#f472b6; --border:rgba(255,255,255,0.24); }
/* Scope EVERYTHING to this one wrapper so it won't affect the host page */
#nlx-hero-1024x800 { width:1024px; height:800px; position:relative; overflow:hidden; background:var(--bg); color:var(--fg); font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto; }
#nlx-hero-1024x800 *, #nlx-hero-1024x800 *::before, #nlx-hero-1024x800 *::after { box-sizing:border-box; }
/* Background */
#nlx-hero-1024x800 .bg { position:absolute; inset:0; z-index:0; background:
radial-gradient(700px 460px at 12% 18%, rgba(59,130,246,0.38), transparent 65%), /* vivid blue */
radial-gradient(640px 460px at 86% 16%, rgba(56,189,248,0.32), transparent 65%), /* cyan */
radial-gradient(780px 520px at 50% 100%, rgba(30,58,138,0.28), transparent 70%), /* deep blue */
linear-gradient(180deg, #08101d 0%, #090b10 100%);
animation: nlx-hue 16s ease-in-out infinite alternate;
}
@keyframes nlx-hue { 0%{ filter:hue-rotate(0deg) saturate(1.05);} 100%{ filter:hue-rotate(12deg) saturate(1.25);} }
#nlx-hero-1024x800 .grain { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="discrete" tableValues="0 0.05"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.25"/></svg>');
background-size:140px 140px; mix-blend-mode:overlay; }
/* Layout */
#nlx-hero-1024x800 .container { height:100%; display:grid; grid-template-rows:min-content 1fr; padding:28px 56px 0 56px; position:relative; z-index:2; }
#nlx-hero-1024x800 header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
#nlx-hero-1024x800 .logo { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-weight:800; }
#nlx-hero-1024x800 .logo-mark { width:20px; height:20px; border-radius:6px; background:conic-gradient(from 180deg,var(--a2),var(--a1),var(--a3),var(--a2)); box-shadow:0 0 28px rgba(124,58,237,0.3); }
#nlx-hero-1024x800 .pill { font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.06); }
#nlx-hero-1024x800 .hero { height:100%; display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px; align-items:flex-start; align-content:start; }
/* Left */
#nlx-hero-1024x800 .eyebrow { display:inline-flex; align-items:center; gap:8px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; font-size:11px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.08); margin-bottom:14px; }
#nlx-hero-1024x800 .spark { width:8px; height:8px; border-radius:2px; background:linear-gradient(45deg,var(--a2),var(--a1)); box-shadow:0 0 16px rgba(34,211,238,0.7); }
#nlx-hero-1024x800 h1 { margin:10px 0 8px; font-size:38px; line-height:1.06; font-weight:800; letter-spacing:-0.02em; background:linear-gradient(90deg,#fff,#fafafa); -webkit-background-clip:text; color:transparent; }
#nlx-hero-1024x800 .lede { color:var(--muted); font-size:15px; max-width:50ch; margin:0; }
#nlx-hero-1024x800 .cta { display:flex; gap:14px; margin-top:18px; padding:10px 0; }
#nlx-hero-1024x800 .btn { font-weight:800; padding:12px 20px; border-radius:12px; font-size:14px; cursor:pointer; transition: box-shadow .2s ease, transform .15s ease; color:#fff; }
#nlx-hero-1024x800 .btn-primary { background:linear-gradient(90deg,var(--a2),var(--a1)); box-shadow:0 10px 24px rgba(124,58,237,0.28), inset 0 0 0 1px rgba(255,255,255,0.25); }
#nlx-hero-1024x800 .btn-ghost { background:rgba(255,255,255,0.06); border:1px solid var(--border); backdrop-filter:blur(6px); }
#nlx-hero-1024x800 .btn:hover { transform: translateY(-1px); }
#nlx-hero-1024x800 .btn-primary:hover { box-shadow: 0 0 20px rgba(124,58,237,0.45), 0 8px 26px rgba(124,58,237,0.25), inset 0 0 0 1px rgba(255,255,255,0.35); }
#nlx-hero-1024x800 .btn-ghost:hover { box-shadow: 0 0 16px rgba(255,255,255,0.16); }
/* Right visual */
#nlx-hero-1024x800 .visual { position:relative; height:100%; display:flex; align-items:center; justify-content:center; }
#nlx-hero-1024x800 .card { width:360px; height:220px; border-radius:16px; background:rgba(255,255,255,0.06); border:1px solid var(--border); backdrop-filter:blur(10px); padding:16px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 16px 50px rgba(0,0,0,0.45); color:var(--fg); }
#nlx-hero-1024x800 .metric { font-weight:800; font-size:16px; color:var(--fg); }
#nlx-hero-1024x800 .sub { font-size:12px; color:var(--muted); }
#nlx-hero-1024x800 .sparkline { width:100%; height:80px; }
@media (prefers-reduced-motion: reduce) { #nlx-hero-1024x800 .bg{animation:none;} }
</style>
</head>
<body>
<!-- Scoped wrapper: paste this block into your embed. It won't affect the host page. -->
<div id="nlx-hero-1024x800">
<div class="bg"></div>
<div class="grain" aria-hidden="true"></div>
<div class="container">
<header>
<a class="logo" href="#" aria-label="NeuroLaunch home"><span class="logo-mark" aria-hidden="true"></span>NeuroLaunch</a>
<span class="pill">For Marketers</span>
</header>
<section class="hero" aria-label="Hero">
<div>
<span class="eyebrow"><span class="spark"></span> AI-Powered Growth</span>
<h1>Launch campaigns that learn <em>faster</em> than your market.</h1>
<p class="lede">Your co‑pilot for creative testing, audience discovery, and performance lift — bold ideas, predictive outcomes, on‑brand delivery.</p>
<div class="cta">
<button class="btn btn-primary">Start Free</button>
<button class="btn btn-ghost">Watch Demo</button>
</div>
</div>
<div class="visual" aria-hidden="true">
<div class="card">
<div>
<div class="metric">+42% CTR lift</div>
<div class="sub">AI‑optimized creative rotation</div>
</div>
<svg class="sparkline" viewBox="0 0 100 30" preserveAspectRatio="none">
<polyline fill="none" stroke="currentColor" stroke-width="2" points="0,26 10,24 20,25 30,22 40,18 50,16 60,14 70,10 80,12 90,8 100,6" />
</svg>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
Embed Vev natively into your site
Design and publish without developer bottlenecks
Use Vev to own the front-end layer of your marketing site, without touching your core codebase.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fictive Company — Dark Hero (Scoped 1024×800)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" />
<style>
/* ================== SCOPED, VERY DARK, WHITE-ONLY ================== */
:root{
--bg:#060606; /* deep black */
--bg-2:#0a0a0a; /* near-black */
--fg:#ffffff; /* white text */
--muted:rgba(255,255,255,.72);
--edge:rgba(255,255,255,.12); /* borders */
--edge-strong:rgba(255,255,255,.22);
--focus:rgba(255,255,255,.18);/* soft focus ring */
}
/* Scope everything to this wrapper to avoid leaking styles */
#embed-hero-1024x800{
width:1024px; height:800px; position:relative; overflow:hidden;
background: radial-gradient(900px 520px at 70% 20%, rgba(255,255,255,.06), transparent 60%),
radial-gradient(700px 420px at 0% 100%, rgba(255,255,255,.04), transparent 65%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
color:var(--fg);
font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#embed-hero-1024x800 *, #embed-hero-1024x800 *::before, #embed-hero-1024x800 *::after{ box-sizing:border-box; }
/* subtle film grain for depth (white-only, no color) */
#embed-hero-1024x800 .grain{
position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.25; mix-blend-mode:overlay;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="discrete" tableValues="0 0.05"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.22"/></svg>');
background-size:120px 120px;
}
/* layout */
#embed-hero-1024x800 .container{ height:100%; display:grid; grid-template-rows:min-content 1fr; padding:28px 56px 0 56px; position:relative; z-index:2; }
#embed-hero-1024x800 header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
/* brand (generic, no Vev) */
#embed-hero-1024x800 .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); font-weight:800; letter-spacing:.01em;}
#embed-hero-1024x800 .brand-mark{ width:18px; height:18px; border-radius:6px; background:transparent; border:1px solid var(--edge); box-shadow:0 0 0 1px var(--edge) inset; }
#embed-hero-1024x800 .badge{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--edge); background:rgba(255,255,255,.04); color:var(--muted); }
#embed-hero-1024x800 .hero{ height:100%; display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:flex-start; align-content:start; }
/* left column */
#embed-hero-1024x800 .eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-weight:700; text-transform:uppercase; letter-spacing:.09em; font-size:11px;
padding:6px 10px; border-radius:999px; border:1px solid var(--edge); background:rgba(255,255,255,.05); margin-bottom:14px; color:var(--muted);
}
#embed-hero-1024x800 h1{ margin:10px 0 8px; font-size:40px; line-height:1.06; font-weight:800; letter-spacing:-0.02em; color:#fff; }
#embed-hero-1024x800 .lede{ color:var(--muted); font-size:15px; max-width:50ch; margin:0; }
#embed-hero-1024x800 .cta{ display:flex; gap:14px; margin-top:20px; padding:10px 0; }
#embed-hero-1024x800 .btn{
font-weight:800; padding:12px 20px; border-radius:12px; font-size:14px; cursor:pointer;
transition:box-shadow .2s ease, transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
#embed-hero-1024x800 .btn:hover{ transform:translateY(-1px); }
/* white-only buttons */
#embed-hero-1024x800 .btn-primary{ background:#ffffff; color:#0b0b0b; border:1px solid rgba(255,255,255,.9); box-shadow:0 10px 32px rgba(255,255,255,.08); }
#embed-hero-1024x800 .btn-primary:hover{ box-shadow:0 0 0 4px var(--focus), 0 10px 32px rgba(255,255,255,.14); }
#embed-hero-1024x800 .btn-ghost{ background:transparent; border:1px solid var(--edge-strong); color:#ffffff; }
#embed-hero-1024x800 .btn-ghost:hover{ box-shadow:0 0 0 4px var(--focus); }
/* right visual */
#embed-hero-1024x800 .visual{ position:relative; height:100%; display:flex; align-items:center; justify-content:center; }
#embed-hero-1024x800 .card{
width:380px; height:232px; border-radius:16px; background:rgba(255,255,255,.04);
border:1px solid var(--edge); backdrop-filter:blur(8px); padding:16px;
display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 16px 50px rgba(0,0,0,.55);
}
#embed-hero-1024x800 .metric{ font-weight:800; font-size:16px; color:#fff; }
#embed-hero-1024x800 .sub{ font-size:12px; color:var(--muted); }
#embed-hero-1024x800 .sparkline{ width:100%; height:84px; color:#fff; }
/* accessibility */
@media (prefers-reduced-motion:reduce){
#embed-hero-1024x800 .btn:hover{ transform:none; }
}
</style>
</head>
<body>
<!-- ================== Scoped hero embed (generic customer page) ================== -->
<div id="embed-hero-1024x800" role="region" aria-label="Hero">
<div class="grain" aria-hidden="true"></div>
<div class="container">
<header>
<!-- Fictive company -->
<a class="brand" href="#" aria-label="Home">
<span class="brand-mark" aria-hidden="true"></span>
Northbound Labs
</a>
<span class="badge">Since 2014</span>
</header>
<section class="hero" aria-label="Intro">
<!-- Left: headline & actions (generic, not about Vev) -->
<div>
<span class="eyebrow">New product release</span>
<h1>Design smarter customer experiences.</h1>
<p class="lede">
Northbound builds tools for teams who care about clarity and speed.
Launch pages, test ideas, and tell better stories across every channel.
</p>
<div class="cta">
<button class="btn btn-primary">Get Started</button>
<button class="btn btn-ghost">View Case Studies</button>
</div>
</div>
<!-- Right: neutral “stats card” visual (white-only, glassy) -->
<div class="visual" aria-hidden="true">
<div class="card">
<div>
<div class="metric">+42% conversion uplift</div>
<div class="sub">A/B experiments across three campaigns</div>
</div>
<svg class="sparkline" viewBox="0 0 100 30" preserveAspectRatio="none">
<polyline fill="none" stroke="currentColor" stroke-width="2"
points="0,26 8,24 16,25 24,23 32,20 40,18 48,16 56,13 64,12 72,10 84,8 100,6" />
</svg>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
Hosting options:
Choose what works for you
Hosting Provider
Uptime SLA
Global CDN Delivery
SSL & HTTP/2
Next-gen Image Optimization
Custom Domains
Versioned Publishing
Webhook Support
REST API Access
Use with Headless CMS
Visual Page & Component Control
Ideal for
Vev + Cloudflare CDN
99.99%
Included (Cloudflare)
Included by default
Automatic (WebP, AVIF)
Supported
Supported (via API)
✓ Publish-triggered automation
✓ Full project-level API for integration
✓ Embed into CMS-managed sites
✓ Embed & host visual content natively
Fast scaling, no dev ops, secure enterprise delivery
Your infrastructure or CMS
Dependent on your setup
Optional – managed by your team
Managed by you
Optional – requires custom setup
Supported
Supported (via API & CI/CD workflows)
✓ Integrate with your CI/CD
or CMS
✓ Same API access
✓ Publish directly to CMS
✓ Deploy Vev-created assets into your stack
✓ Publish directly to CMS
Feature
Host with Anywhere
Host with Vev
Hosting options:
Choose what works for you
Feature
Host with Anywhere
Host with Vev
Hosting Provider .
Vev + Cloudflare CDN
Your infrastructure or CMS .
Uptime SLA
99.99%
Dependent on your setup
Global CDN Delivery
Included (Cloudflare)
Optional – managed by your team
SSL & HTTP/2
Included by default
Managed by you
Next-gen Image Optimization
Automatic (WebP, AVIF)
Optional – requires custom setup
Custom Domains
Supported
Supported
Versioned Publishing
.
Supported (via API)
.
Supported (via API & CI/CD workflows)
Webhook Support
..
✓ Publish-triggered automation
.
✓ Integrate with your CI/CD
or CMS
REST API Access
.
✓ Full project-level API for integration
✓ Same API access
.
Use with Headless CMS
.
✓ Embed into CMS-managed sites
.
✓ Publish directly to CMS
.
Visual Page & Component Control
.
✓ Embed & host visual content natively.
✓ Deploy Vev-created assets into your stack.
Ideal for
.
Fast scaling, no dev ops, secure enterprise delivery
✓ Publish directly to CMS
.
Seamless hosting and integration at scale
Explore our developer documentation to connect Vev to your environment with maximum flexibility and minimal friction. Capabilities include:
Trigger deployments via Webhooks
Push/pull content via the REST API
Integrate Vev into your CI/CD pipeline
Embed projects into dynamic sites.
Version control your publishing process
Domain and delivery
configuration
Seamless hosting and integration at scale
Explore our developer documentation to connect Vev to your environment with maximum flexibility and minimal friction. Capabilities include:
Trigger deployments via Webhooks
Push/pull content via the REST API
Integrate Vev into your CI/CD pipeline
Embed projects into dynamic sites.
Version control your publishing process
Domain and delivery
configuration
Want to explore more?
Your content, your rules
No more replatforming, compromising on quality, or being locked-in to a platform. You can fit Vev into your existing tech stack, and grow with it.
Get a Demo