The Cake20 website language
Write the screen in TSX and the server as a function. Cake20.js handles the framework code between your idea and a running website.
export const data = {
count: 20,
};
export default () => (
<main class="p-8">
<h1>CAKE20</h1>
<p>Light candle {data.count}.</p>
<Button onClick={() => data.count++}>
Start again
</Button>
</main>
);Cake20.js
Cake20.js is the public name for the source model that combines the screen system, build and execution Runtime, UI, data and server capabilities of a Cake20 website.
01 · VIEW
Cake20 View keeps ordinary TypeScript and HTML names while hiding setup code that does not describe the screen.
@cake20/view
02 · RUNTIME
Cake20 Runtime connects each file to the web, data and operating environment without repeating infrastructure in every website.
@cake20/runtime
Designed to stay obvious
The source stays predictable as the product grows, so a person or AI can enter a project and understand where work belongs.
Familiar TypeScript, HTML attributes and short file rules make the first screen understandable without a framework manual.
Routes, components, APIs and data follow their folders. The Runtime supplies the wiring once.
Every website keeps its own source, data, files, build and process while sharing a versioned Runtime.
Sample examples
These examples show the source users and AI write. Imports and infrastructure appear only when they explain the website itself.
export const data = {
count: 0,
};
export default () => (
<main class="space-y-4 p-8">
<h1>{data.count}</h1>
<Button onClick={() => data.count++}>
Add one
</Button>
</main>
);The data object becomes reactive for each screen instance.
export const data = {
name: "CAKE20",
age: 20,
};
export default () => (
<form class="grid gap-3">
<Input bind={data.name} />
<Input type="number" bind={data.age} />
<p>{data.name} · {data.age}</p>
</form>
);bind connects native fields and Cake20 UI values without a directive.
export const data = {
online: true,
};
export const update = () => {
data.online = navigator.onLine;
};
export const onStart = () => {
update();
window.addEventListener("online", update);
};
export const onClose = () => {
window.removeEventListener("online", update);
};
export default () => <p>{data.online ? "Online" : "Offline"}</p>;Lifecycle names remain visible at the top level of the file.
export default () => ({
ok: true,
at: now().toISOString(),
});The file name defines the method and route. Runtime recognizes the default function as the handler.
export default {
id: z.id(),
title: z.string(),
published: z.boolean().default(false),
createdAt: z.timestampTz().defaultNow(),
};Runtime turns the field object into a website-scoped PostgreSQL model.
One continuous workflow
Start at twenty
Use Cake20 Core for visual creation and operations, or read the complete documentation before building with AI and CLI.