VCWL

The Vibe Coded Web Language.
It is going to revolutionize web development. (It is not. It compiles, though, which is worse.)

Website · Docs · Download · Changelog

---

VCWL is a statically typed language for web apps. The compiler, written in Rust, turns it into WebAssembly (with the GC proposal). Your logic, views, state and styles are all VCWL. Then, for reasons nobody can fully explain, the app doesn't use the browser DOM: a renderer, also written in Rust and compiled to WebAssembly, lays out and paints everything onto a single <canvas>, while an invisible DOM mirror keeps it accessible, selectable and crawlable.

VCWL looks like Rust. It is not Rust. There is no borrow checker, no lifetimes, no unsafe, and no crab. Writing Rust in a .vcwl file gets you a diagnostic, not a compiler.

It started as a joke and kept going. The joke is now load-bearing.

app "Counter"

component App {
    state count: Int = 0

    column(gap: 12px, align: center) {
        heading("Clicks: {count}", level: 1)
        button("+1") {
            style {
                radius: 12px
                corner: squircle
                transition: transform 400ms spring
                when hover {
                    transform: scale(1.08)
                }
            }
            on click {
                count += 1
            }
        }
    }
}

The website is itself written in VCWL, docs included.

Install

curl -fsSL https://vcwl.chteau.bzh/install.sh | sh     # Linux, macOS
irm https://vcwl.chteau.bzh/install.ps1 | iex           # Windows (PowerShell)

Grab a binary from the latest release (Linux x86_64, macOS Apple silicon and Intel, Windows x64), or build it:

rustup target add wasm32-unknown-unknown
cargo install --git https://github.com/chteau/vcwl vcwl

Node.js 20+ is needed for vcwl run, vcwl test and prerendering. Apps run in browsers with WebAssembly GC: Chrome/Edge 119+, Firefox 120+, Safari 18.2+.

vcwl new hello && cd hello
vcwl dev      # http://127.0.0.1:4400, rebuilds and reloads on save
vcwl build    # a static site in dist/

What's in the box

• A real language. Structs, enums with payloads, generics, exhaustive pattern matching, optionals and ?, string interpolation, modules, tests, and the pipe operator x |> f(a).
• Components. Props, state, derived values, typed events, slots, keyed lists, routing (hash or real paths), forms with native controls. Accessibility mistakes are compile errors.
• Typed styles. Checked at compile time, with when hover, when viewport < 600px, when appear scroll reveals, and things CSS doesn't have: corner: squircle | cut | scoop, film grain, hand-drawn sketch borders, spring and bounce easing.
• Data. fetch decoded against the type you expect, network access limited by declared capabilities (and the CSP), and server fns run by vcwl serve in a WebAssembly runtime.
• 3D. scene { mesh light group } with WebGL: primitives, OBJ and glTF models with PBR materials and animations, shadows, translucency, clickable meshes. Nobody asked.
• JavaScript interop. extern fn, and @web, about 75 wrapped Web APIs (URL and history, OAuth popups, storage, Intl, Web Crypto, clipboard, geolocation...).
• Packages. A registry that is a git branch (like Wally), lock files, and a security review before anything gets installed.
• Tools. vcwl fmt, vcwl lint, vcwl lsp, a VS Code extension, a Zed extension (registry listing coming soon), an in-page debugger in dev builds, prerendering, sitemaps and Open Graph tags.

What it is not: fast on purpose, battle-tested, or a good idea for your employer's checkout. See known limitations. Benchmarks, with their methods and caveats, are in docs/benchmarks.md. WebAssembly sandboxes the module; it does not make an application secure.

Commands

command	does
vcwl new <dir>	create a starter app
vcwl dev [--port N]	dev build, local server, reload on change, errors in the page
vcwl build [--dev]	compile to dist/ (and dist-server/ for server functions)
vcwl serve [--port N]	release build served with its server functions
vcwl check · vcwl test · vcwl fmt · vcwl lint	type-check, test, format, lint
vcwl install · add · remove · publish · search · audit	packages
vcwl lsp	language server on stdin/stdout
vcwl new --enterprise <dir>	a counter app spread over domain, application and presentation layers, with factories and interfaces
vcwl deploy <netlify|pages|folder DIR> [--yes]	build, a short ceremony, and dist/.vcwl-manifest.json (sha256 of every file)
vcwl doctor	check the environment and project, Rust contamination included
vcwl upgrade	install the latest release (after a short math quiz)
vcwl run <file> · vcwl compile <file>	run a program's main in Node.js, or compile one file

Documentation

• The website's docs, for a guided tour
• Language reference
• Packages · Editors · Deploying
• Architecture and decision records
• Security model · Benchmarks · Limitations

Repository layout

src/            compiler (lexer, parser, checker, lowering, codegen), CLI, LSP, package manager
src/prelude.vcwl standard library, written in VCWL
render/         the renderer (Rust → render.wasm): element tree, styles, layout, paint, input
runtime/        browser/Node host (vcwl.js), 3D, @web, boot and dev scripts
editors/        tree-sitter grammar, VS Code and Zed extensions
examples/       a todo app, a component kit, a remake of the tokenforge website
packages/       the registry's packages (supabase, oauth, is-odd, left-pad, ...), all untested
                because nobody tests anything in the vibe coding world
site/           the website, in VCWL
tests/          compiler, CLI, LSP and package tests (Rust), browser tests (puppeteer)
bench/          keyed-list benchmark against hand-written DOM code
docs/           reference, architecture, ADRs

Development

cargo test --workspace                    # compiler, renderer, CLI and formatter tests (needs node)
(cd tests/browser && npm ci && npm test)  # headless Chrome tests (CHROME=/path/to/chrome)
node bench/run.mjs                        # benchmark (after the two steps above)

License

MIT. Vibbles the blob is also MIT. Be nice to Vibbles.