Templates

Templates give you a head start. Choose a design close to your vision, then customize it with AI or manual editing.

Using Templates

Starting from a Template

1. Click Create New Project
2. Select Start from Template
3. Browse template categories
4. Preview templates before selecting
5. Click Use This Template
6. Your project opens with the template code

Template Categories

SaaS & Software

• Landing page with features, pricing, testimonials
• Documentation site with sidebar navigation
• Changelog and updates page

Business & Services

• Professional services homepage
• Agency portfolio
• Consultant landing page

Portfolio & Personal

• Developer portfolio
• Designer showcase
• Personal blog

E-commerce & Products

• Product landing page
• Coming soon page
• Waitlist page

Content & Publishing

• Blog with categories
• Documentation site
• Knowledge base

Customizing Templates

AI Customization

After selecting a template, customize with prompts:

Update this template for my SaaS product:
- Company: TaskFlow
- Tagline: "Project management that works like your brain"
- Primary color: purple-600
- Update all placeholder text with task management content

What to Customize

Brand:

• Logo placement
• Color scheme
• Typography
• Imagery style

Content:

• Headlines and copy
• Feature descriptions
• Testimonials
• CTAs

Structure:

• Add or remove sections
• Reorder pages
• Add new pages

Customization Workflow

1. Start with structure — Add/remove sections first
2. Update content — Replace placeholder text
3. Adjust design — Colors, fonts, spacing
4. Add media — Real images and videos
5. Polish — Fine-tune details

Template Structure

Templates are standard Astro projects:

template/
├── src/
│   ├── pages/
│   │   ├── index.astro      # Homepage
│   │   ├── about.astro      # About page
│   │   └── ...
│   ├── components/
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   ├── Hero.astro
│   │   └── ...
│   └── layouts/
│       └── Layout.astro
├── public/
│   └── images/
└── astro.config.mjs

Understanding the structure helps when customizing:

• pages/ — Each file is a route
• components/ — Reusable UI pieces
• layouts/ — Page wrapper templates
• public/ — Static assets

Combining Templates

You can merge elements from different templates:

1. Create project from Template A
2. Ask AI to add sections from Template B style:

Add a pricing section similar to the SaaS template pricing
with 3 tiers and a toggle for monthly/annual

Template vs. Starting from Scratch

Use Templates When:

• You want a proven layout
• Time is limited
• You're learning Pagesmith
• Design isn't your strength

Start from Scratch When:

• You have a specific vision
• You need a unique design
• You're experienced with Pagesmith
• Templates don't fit your use case

Template Quality

All templates include:

Production Defaults:

• Responsive design
• SEO meta tags
• Sitemap and robots.txt
• Performance optimization

Clean Code:

• Well-organized components
• Tailwind CSS styling
• TypeScript when appropriate
• Commented sections

Accessibility:

• Semantic HTML
• Proper heading hierarchy
• Focus states
• Alt text placeholders

Creating Your Own Templates

Build templates for repeated use:

1. Build a project with common elements
2. Remove specific content
3. Add placeholder text and images
4. Save as a personal template

Use your template:

1. Duplicate the project
2. Customize for new project
3. Faster start each time

Tips

Preview Before Choosing

Templates preview in desktop and mobile. Check both.

Check All Pages

Templates often include multiple pages. Review the full scope.

Color Variables

Templates use CSS variables for colors. One change updates everywhere.

Keep What Works

Don't redesign good sections. Focus on content and branding.

Related Docs

• Quick Start — First project tutorial
• AI Editor — Customize with AI
• Use Cases — Build specific project types