Project Structure

This is what create jaf writes.

Four folders carry the meaning: pages/ is your site, config/ is settings, src/ boots the app, and llm/ teaches your coding assistant.

my-app

skills/

Select a file to see what it is for

index.html
The document Vite builds and the only HTML file outside pages/ that is not a route. It links the stylesheet, loads the client entry, and provides the mount element.
```
<div id="app"></div>
<script type="module" src="/src/entry-client.ts"></script>
```
package.json

dev, build, preview and typecheck, with jafjs as the one runtime dependency and Vite, TypeScript and @swc/core in dev.

The scripts use bare binary names, so any package manager runs them.
vite.config.ts

The five JAF plugins, in order, plus the dev port, the dist/ build target and the @ alias for src/. JAF is a set of Vite plugins, so this file is the whole integration.
tsconfig.json

Strict, noEmit, bundler resolution, and @/* pointing at ./src/*. Its include covers src, config, pages and the Vite config.
pnpm-workspace.yaml

Only written for pnpm projects. It permits the dependency build scripts for @swc/core and esbuild, which pnpm blocks by default and which link native binaries the compiler needs.
.gitignore

node_modules, dist, .DS_Store and *.local. The scaffolder initialises the repository unless you opt out.
config/
- jaf.config.js
  
  The components path, the routing rules, and the router options: file routing, prefetching, the mount selector and View Transitions. Delete it and the defaults still run.
- routing.js
  Conventions, not a route table: the pages directory, the layout file name, the errors directory, and the globs that are never routes.
```
export default {
  pagesDir: 'pages',
  layoutFile: 'layout.html',
  errorsDir: 'errors',
  ignore: ['components/**', 'partials/**', 'shared/**']
}
```
- chunks.js
  
  Controls how the production build splits: vendor groups, a shared-components chunk, and route groups that ship together. Empty defaults mean one chunk per route.
pages/
- index.html
  
  The site root. An index.html in any directory is that directory's route, so pages/blog/index.html is /blog.
- about.html
  
  A file name is a URL. There is nothing to register, and no router file to keep in step with the folder.
- layout.html
  
  Wraps every page in its directory and below. It renders the page at <slot />, and layouts nest, so a pages/docs/layout.html composes inside this one.
- components/
  - Button.html
    
    Found by file name, used as <Button /> anywhere, imported nowhere. The directory is on the routing ignore list, so components never become URLs.
  - Card.html
    
    The same deal for <Card />. Put components wherever they make sense - a components/ folder is convention, not a rule.
- styles.css
  
  Global styles, or the Tailwind entry if you chose Tailwind. Only .html files in pages/ become routes, so a stylesheet can live here safely.
src/
- entry-client.ts
  A single import that starts the router, component discovery and reactivity. src/ is also where your own modules go - @/ resolves here.
```
import 'jafjs/entry-client'
```
llm/
- skills/
  
  The JAF skills library, copied in at scaffold time so it matches your installed version. One file per concept, indexed by README.md.
AGENTS.md

Points your assistant at llm/skills/ before it writes any JAF, lists the project commands, and names the syntax that differs from React, Vue and Svelte.
CLAUDE.md

A pointer to AGENTS.md, so the guidance has one home rather than two copies that drift.

There is no public/ folder by default.

Add one when you have static assets - Vite serves its contents from the site root, unchanged.

Pages Directory

The pages/ folder is where your routes live.

Each .html file becomes a route:

pages/index.html becomes /
pages/about.html becomes /about
pages/blog/index.html becomes /blog
pages/blog/[slug].html becomes /blog/:slug (dynamic route)

Only .html files are routes. Anything else you keep in pages/ - stylesheets, images - is left alone.

Layouts

Any layout.html file wraps all pages in that directory and subdirectories.

Use <slot /> to specify where child content appears.

Components Directory

Shared components live in pages/components/.

They're auto-discovered by filename, so you can use them anywhere without explicit import statements.

If you have duplicate names, you will get a warning at build time, so you can choose your preferred one.

To keep them somewhere else, set componentsPath in your config.

Configuration

config/jaf.config.js is optional.

Add settings when you want to change defaults - routing, file locations, build settings, or plugins etc.

That path is fixed: config/jaf.config.js, with a .js extension. A jaf.config.ts, or the same file at the project root, is not picked up.