Start with Mado

Create and run

Four commands, one ordinary project.

The CLI copies a small Vite application. After that, the project is yours: there is no remote generator state and no hosted runtime to keep alive.

Terminal

npm exec --yes --package @madojs/mado@latest -- mado init my-app
cd my-app
npm install
npm run dev

The explicit @latest makes initial scaffolding use the current CLI. Your generated project records a normal semver dependency in package.json.

Read the project

The important files fit in one view.

src/
  main.ts
  app.routes.ts
  pages/
    home.page.ts
    not-found.page.ts
  components/
  styles/

main.ts: Imports global source and mounts the shared application tree.
app.routes.ts: Maps explicit URL patterns to lazy page modules.
pages/: Owns route data, metadata, static intent and view.
components/: Contains autonomous Web Components when a boundary earns one.

Learn three contracts

Component, page and route are enough to orient the app.

Component · hello-card.component.ts

import { component, html } from "@madojs/mado";

component("hello-card", (ctx) => {
  const name = ctx.attr("name", "world");
  return html`<p>Hello, ${() => name()}.</p>`;
});

Page · home.page.ts

import { html, page } from "@madojs/mado";

export default page({
  static: true,
  title: "Home",
  view: () => html`<article>...</article>`,
});

Routes · app.routes.ts

import { routes } from "@madojs/mado";

export default routes({
  "/": () => import("./pages/home.page"),
  "*": () => import("./pages/not-found.page"),
});

Build the real artifact

Release, then inspect it like a static host.

Mado typechecks, builds the SPA, captures declared static routes in a real browser, generates deployment metadata and writes everything to out/.

Open pages with JavaScript disabled.
Navigate again with JavaScript enabled.
Inspect canonical URLs, sitemap and the 404 shell.

Production artifact

npm run release
npm run preview

Next decision

Know the boundary before adding structure.

Mado intentionally stops at the browser. See where it fits—and where a different tool is the more honest choice.

Why Mado