create-magnetic-app

Scaffold a new Magnetic server-driven UI application.

Usage

npx create-magnetic-app my-app
cd my-app
magnetic dev

Templates

todo (default)

Full todo app with state management, multiple pages, and components:

npx create-magnetic-app my-app --template todo

blank

Minimal app with a single page:

npx create-magnetic-app my-app --template blank

Generated Structure

my-app/
  pages/              ← TSX page components (filename = route)
    IndexPage.tsx       → /
    AboutPage.tsx       → /about
    NotFoundPage.tsx    → * (catch-all)
  components/         ← shared TSX components
  server/
    state.ts          ← business logic (state, reducer, view model)
  public/
    magnetic.js       ← client runtime (~1.5KB gzipped)
    style.css         ← app styles
  magnetic.json       ← app config
  tsconfig.json       ← IDE/TypeScript support
  README.md

What You Edit

• pages/*.tsx — page components (auto-routed)
• components/*.tsx — shared components
• server/state.ts — all business logic
• public/style.css — styles

What You Never Edit

• public/magnetic.js — client runtime (provided by framework)
• Generated bridge code (auto-generated by CLI)
• Bundle output (dist/app.js)

For AI Agents

1. Scaffold: npx create-magnetic-app <name>
2. Edit only: pages/, components/, server/state.ts, public/style.css
3. Run: magnetic dev → opens at http://localhost:3003
4. Actions: onClick="action_name" dispatches to reduce() in state.ts
5. Forms: onSubmit="action_name" collects FormData as payload
6. Navigation: <Link href="/path"> for client-side routing
7. State shape: initialState() → reduce(state, action, payload) → toViewModel(state) → passed as page props

License

MIT