The web framework
built on nothing.
Vex is a minimalist meta-framework for vanilla JavaScript. File-based routing, SSR/CSR/SSG/ISR, Vue-like reactivity — without the overhead.
Features
Everything you need, nothing you don't
Built to stay out of your way. Vex gives you powerful primitives without magic.
File-based Routing
Drop a page.vex anywhere in pages/ and it becomes a route. Dynamic segments with [param] folders.
Vue-like Reactivity
Familiar reactive(), computed(), effect(), and watch() primitives — no virtual DOM.
SSR, CSR, SSG & ISR
Choose the rendering strategy per page. Mix and match Server-Side, Client-Side, Static Generation, and Incremental Static Regeneration.
Nested Layouts
Root and custom layouts with layout.vex. Compose structure without repeating yourself.
SPA Navigation
Client-side routing with no full reloads. Automatic link prefetching on hover for instant page transitions.
Streaming & Suspense
Progressive loading with fallback UI. Streams HTML as it's ready, keeping your app fast from the first byte.
Template Syntax
HTML-first,
nothing to compile.
Write components in plain .vex files with familiar directives. No JSX, no build step for templates.
x-if,
x-for,
@click,
:attr<!-- server script -->
<script server>
async function getData() {
const users = await fetchUsers()
return { users }
}
</script>
<!-- template -->
<template>
<ul class="user-list">
<li
x-for="user in users"
:key="user.id"
>
</li>
</ul>
</template>
<!-- reactive client logic -->
<script client>
import { reactive } from "vex/reactive"
const count = reactive(0)
</script>Rendering
Your strategy, per page
Pick the right rendering mode for each route. Mix and match freely.
Server-Side Rendering
HTML rendered on every request. Great for dynamic, user-specific content. Optimal for SEO with real-time data.
Client-Side Rendering
Rendering happens in the browser. Ideal for highly interactive pages with reactive data that updates frequently.
Static Site Generation
Pages pre-built at compile time. Maximum performance, deploy anywhere. Perfect for docs, blogs, and marketing pages.
Incremental Static Regen.
Static pages that refresh after a set interval. Get the speed of static with the freshness of server rendering.
Quick Start
Up in 60 seconds
From zero to a running Vex app in three steps.
Install the package
$ npm install @cfdez11/vexCreate server.js and your first page at pages/page.vex
<script server>
const metadata = {
title: "My Vex App"
}
</script>
<!-- template -->
<template>
<h1 class="text-3xl font-bold">
Hello from Vex!
</h1>
</template>Start the dev server
$ node --watch server.js
Visit localhost:3001 and your page is live. Vex auto-discovers all
page.vex files — no route registration needed.
Start building with Vex
No boilerplate. No config files. Just files, routes, and reactivity.