When you create a new route file, KosmoJS detects it and seeds appropriate boilerplate immediately. The output differs based on whether the file is an API route or a client page, and which framework you're using.

Some editors load seeded content instantly, others may require you to briefly unfocus and refocus the file to see the new content.

API Routes

Creating api/users/[id]/index.ts seeds:

import { defineRoute } from "_/api";

export default defineRoute<"users/[id]">(({ GET }) => [
  GET(async (ctx) => {
    return ctx.text("Automatically generated route: [ users/[id] ]");
  }),
]);

The _/ import prefix maps to lib/ - derived code that provides full type definitions for all your routes. _/api resolves to lib/front/api.ts, where front is your source folder name.

Client Pages

Creating pages/users/[id]/index.tsx seeds a minimal framework component:

pages/users/[id]/index.tsx

export default function Page() {
  return <div>Automatically generated Page: [ users/[id] ]</div>;
}

The placeholder text includes your framework name and route path. The component is named Page by default - rename it to something meaningful as you build it out.

Avoid anonymous arrow functions for default exports - they can break Vite's HMR.