TypeScript-first full-stack web framework for building applications with colocated UI, styles, and server logic.

avedon

avedon gives you a single component format (.ave), explicit routing, hybrid rendering, and a Vite-based toolchain aimed at clear boundaries between client and server code.

Docs: https://avedon.pages.dev · npm: avedon, create-avedon-app, @avedon/*

Features

• .ave components — template, scoped styles, client script, and server script in one file
• Explicit routing — defineRoutes in routes.ts with layouts, guards, and per-route render mode
• Hybrid rendering — ssr, ssg, and csr on a per-route basis (default ssr)
• Colocated server APIs — load, form actions, and api_* handlers next to the page UI
• Reactive client runtime — signal, computed, and effect from @avedon/runtime
• Adapter model — platform-agnostic Request / Response core; Node, Cloudflare Workers, and Bun adapters

Requirements

• Node.js >= 20
• pnpm, npm, or yarn

Quick start

pnpm create avedon-app my-app
cd my-app
pnpm install
pnpm dev

Open http://localhost:5173. Then:

pnpm build
pnpm start

Full walkthrough: docs/quick-start.md or https://avedon.pages.dev/docs/quick-start.

Documentation

Guide	Description
Documentation index	Map of all docs
Introduction	What avedon is
Quick start	Create and run an app
Tutorial	Small end-to-end example
Components	.ave format
Routing	defineRoutes, route(), layouts, guards
Loading data	load, actions, api_*
Rendering	ssr / ssg / csr
Middleware	sequence, CORS, logging, rate-limit
Session	Cookies and sealed session
Deployment	Node, Cloudflare Workers, Bun

Packages

Package	Role
@avedon/shared	Shared types and adapter interface
@avedon/compiler	.ave parse and codegen
@avedon/runtime	Signals, hydration, client navigation, forms
@avedon/server	Matching, guards, middleware, load/actions/api, SSR orchestration
@avedon/vite-plugin	Vite transform, HMR, and middleware
@avedon/adapter-node	Node production server
@avedon/adapter-bun	Bun.serve production server (SSG + ISR)
@avedon/adapter-cloudflare	Cloudflare Workers + Assets (SSG; no ISR in v1)
avedon	CLI (create, dev, build, start)
create-avedon-app	App scaffold (pnpm create avedon-app)

Example

Minimal .ave page with server load and client reactivity:

<script server>
  export async function load() {
    return { title: 'Hello' }
  }
</script>

<script>
  import { signal } from '@avedon/runtime'
  export let title
  const count = signal(0)
</script>

<style scoped>
  h1 { font-weight: 700; }
</style>

<template>
  <h1>{title}</h1>
  <button type="button" on:click={() => count.set(count.get() + 1)}>
    {count}
  </button>
</template>

Routes are declared explicitly. Prefer route() when you want typed params in guards:

import { defineRoutes, route } from '@avedon/server'
import Home from './pages/Home.ave'
import Post from './pages/Post.ave'

export default defineRoutes([
  { path: '/', component: Home, render: 'ssg' },
  route('/posts/:id', {
    component: Post,
    render: 'ssr',
    guard: (e) => e.params.id.length > 0,
  }),
])

See docs/routing.md. Contributors working on the framework itself: CONTRIBUTING.md and examples/basic-app.

Roadmap

• Language service / LSP for .ave diagnostics v1 — @avedon/language-server + VS Code/Cursor extension (packages/vscode-avedon); sibling *.ave.d.ts still provide types
• Richer template directives ({#key}, transitions, named slots)
• First-class CSS tooling integrations

Community

• Contributing
• Code of Conduct
• Security
• Support
• License (MIT)

License

MIT © Anıl ÖZ