Skip to main content

Multi-Page Apps

Pixello supports creating multi-page applications. This guide explains how to structure and manage multiple pages in your project.

Overview​

Pixello represents multi-page apps using:

  • Multiple design JSON files: One per page (recommended)
  • Single design JSON with pages: All pages in one file (alternative)
  • Shared components: Reusable components across pages
  • Navigation structure: Defined in your routing setup

Current Support​

Pixello currently supports:

  • ✅ Basic multi-page flows: Create separate pages and link between them
  • ✅ Shared components: Reuse components across pages
  • ✅ Consistent styling: Apply themes across all pages
  • ⚠️ Complex navigation: More advanced routing features coming soon

Create one design JSON file per page:

your-project/
├── designs/
│   ├── home.json
│   ├── about.json
│   ├── products.json
│   └── contact.json
├── app/
│   ├── page.tsx (home)
│   ├── about/
│   │   └── page.tsx
│   ├── products/
│   │   └── page.tsx
│   └── contact/
│       └── page.tsx

Benefits​

  • Clear separation: Each page is independent
  • Easier to manage: Edit pages separately
  • Better Git diffs: Changes are isolated per page
  • Scalable: Add pages without affecting others

Creating Pages​

  1. Generate first page: Use Pixello to create your home page
  2. Generate additional pages: Create each new page with a separate prompt
  3. Link pages: Add navigation between pages in your code

Example: Creating an About Page​

Prompt:

"Create an about page with a hero section, team member cards, and company values section"

This generates:

  • designs/about.json
  • app/about/page.tsx (or components/About.tsx)

Approach 2: Single Design File with Pages​

Store all pages in one design JSON:

{
  "version": "1.0",
  "name": "Multi-Page App",
  "pages": [
    {
      "name": "Home",
      "route": "/",
      "components": [
        {
          "type": "Hero",
          "props": {...}
        }
      ]
    },
    {
      "name": "About",
      "route": "/about",
      "components": [
        {
          "type": "AboutHero",
          "props": {...}
        }
      ]
    }
  ]
}

When to Use​

  • Small apps with few pages
  • Pages share many components
  • You want everything in one place

Limitations​

  • Can become unwieldy with many pages
  • Git diffs show changes to all pages
  • Harder to work on pages independently

Next.js App Router​

Set up navigation in your Next.js app:

// app/layout.tsx
import Link from 'next/link';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <nav>
          <Link href="/">Home</Link>
          <Link href="/about">About</Link>
          <Link href="/products">Products</Link>
          <Link href="/contact">Contact</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

React Router​

For React apps using React Router:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Shared Components​

Create reusable components across pages:

Component Library​

components/
├── Button.tsx
├── Card.tsx
├── Header.tsx
└── Footer.tsx

Using Shared Components​

// app/page.tsx (Home)
import Button from '@/components/Button';
import Card from '@/components/Card';

export default function Home() {
  return (
    <>
      <Button>Get Started</Button>
      <Card title="Feature" />
    </>
  );
}
// app/about/page.tsx (About)
import Button from '@/components/Button';
import Card from '@/components/Card';

export default function About() {
  return (
    <>
      <Button>Contact Us</Button>
      <Card title="Team Member" />
    </>
  );
}

Styling Across Pages​

Global Styles​

Define global styles that apply to all pages:

/* app/globals.css */
:root {
  --primary-color: #2563eb;
  --font-family: system-ui, sans-serif;
}

body {
  font-family: var(--font-family);
  color: #333;
}

Theme Consistency​

Use the same design tokens across pages:

// styles/theme.ts
export const theme = {
  colors: {
    primary: '#2563eb',
    secondary: '#64748b',
  },
  spacing: {
    sm: '0.5rem',
    md: '1rem',
    lg: '2rem',
  },
};

Current Limitations​

Complex Navigation​

Advanced navigation features are coming:

  • ⏳ Nested routes
  • ⏳ Dynamic routes with parameters
  • ⏳ Route guards and authentication
  • ⏳ Breadcrumbs and navigation state

Page Transitions​

Currently, navigation uses standard browser navigation. Future updates may include:

  • Smooth page transitions
  • Shared element animations
  • Loading states between pages

Best Practices​

Organize by Feature​

Group related pages together:

app/
├── marketing/
│   ├── page.tsx (home)
│   ├── about/
│   └── contact/
├── dashboard/
│   ├── page.tsx
│   ├── settings/
│   └── profile/

Consistent Layout​

Use a shared layout component:

// components/Layout.tsx
export default function Layout({ children }) {
  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

Design System​

Establish a design system early:

  • Color palette
  • Typography scale
  • Spacing system
  • Component patterns

Example: E-Commerce Site​

Here's how you might structure an e-commerce site:

designs/
├── home.json
├── products.json
├── product-detail.json
├── cart.json
└── checkout.json

app/
├── page.tsx (home)
├── products/
│   ├── page.tsx (list)
│   └── [id]/
│       └── page.tsx (detail)
├── cart/
│   └── page.tsx
└── checkout/
    └── page.tsx

Each page can be designed independently, but they share:

  • Header and footer components
  • Product card components
  • Button and form styles
  • Color scheme and typography

What's Next?​