Node-Based Page Builder Demo

A demonstration of a node-based page builder system built with Next.js, TypeScript, and Tailwind CSS.

🎯 Project Goal

Build a Node-Based Page Builder where:

• 1 node = 1 section of a web page (hero, features, pricing, testimonials, etc.)
• A page = an ordered array of nodes
• Rendering = loop over nodes → NodeRenderer → section component

✨ Features

• ✅ Node-based architecture - Compose pages from reusable node configurations
• ✅ Template system - Pre-built templates for each section type
• ✅ Type-safe - Full TypeScript coverage
• ✅ Modern UI - Beautiful Tailwind CSS styling with gradients and animations
• ✅ Visual canvas - See how your page is composed from nodes
• ✅ Extensible - Ready for AI integration and GSAP animations

🚀 Getting Started

Install Dependencies

npm install

Run Development Server

npm run dev

Open http://localhost:3000 to see the demo page.

Build for Production

npm run build
npm start

📁 Project Structure

/app
  layout.tsx            # Basic layout with Tailwind globals
  page.tsx              # Main demo page rendering nodes
  /canvas/page.tsx      # Visual preview of node composition

/components
  /sections             # Section components
    HeroSection.tsx
    FeaturesSection.tsx
    PricingSection.tsx
    TestimonialsSection.tsx
  NodeRenderer.tsx      # Maps nodes to components

/lib
  animations.ts         # Animation preset system (GSAP stubs)

/templates              # Template configurations
  heroTemplates.ts
  featuresTemplates.ts
  pricingTemplates.ts
  testimonialsTemplates.ts

/pageConfigs
  demoPage.ts           # Demo page node configuration

/types
  nodes.ts              # PageNode + NodeType definitions
  templates.ts          # Template type definitions

🎨 How to Compose a Page

Edit /pageConfigs/demoPage.ts:

export const demoPageNodes: PageNode[] = [
  {
    id: 'hero-1',
    type: 'hero',
    templateId: 'hero.default',  // Choose a template
    animationId: 'fadeIn',       // Optional animation
    overrides: {                 // Optional prop overrides
      title: 'Custom Title'
    },
  },
  // Add more nodes...
];

Available Templates

Hero:

• hero.default - Vibrant gradient hero
• hero.dark - Dark mode with purple accents
• hero.split - Split layout design

Features:

• features.default - Light theme with 3 features
• features.dark - Dark theme premium feel
• features.tech - Technical specifications

Pricing:

• pricing.default - Light theme 3-tier pricing
• pricing.dark - Dark theme pricing cards
• pricing.annual - Subscription-based pricing

Testimonials:

• testimonials.default - Customer reviews
• testimonials.dark - Professional testimonials
• testimonials.pro - Industry recognition

🔍 Pages

• / - Demo page showing all sections composed from nodes
• /canvas - Visual canvas showing node composition details

🛠 Tech Stack

• Next.js 16 - App Router
• TypeScript - Type safety
• Tailwind CSS - Styling
• React - Components

🎯 Architecture

PageNode Config → NodeRenderer → Template Lookup → Props Merge → Section Component

1. Define nodes in page config
2. NodeRenderer looks up template by templateId
3. Merges template props with node overrides
4. Renders appropriate section component

🔮 Future Enhancements

This architecture is ready for:

• AI Integration - Generate page configs and content
• GSAP Animations - Animation presets are stubbed
• Visual Editor - Drag-and-drop canvas
• More Templates - Easy to add new section types
• Dynamic Loading - Load from API

📝 Notes

• This is a static demo - no AI, backend, or database
• Focus on clean architecture and reusability
• All components are prop-driven (no hardcoded content)
• Animation system is stubbed for future GSAP integration

📄 License

MIT

---

Built with ❤️ using Next.js, TypeScript, and Tailwind CSS