Connecting to dev server...

Circuitry Logo
Circuitry
Open Editor

Website Node Guide

The Website Node is your command center for building and managing multi-page websites. It provides a visual sitemap tree of all your pages and automatically shares design references across your entire site—eliminating duplicate connections and keeping your workflows clean.

Overview

The Website node is a specialized organizational node that:

✅ Displays hierarchical sitemap of all connected Web pages ✅ Shares design references across all pages automatically ✅ Reduces workflow clutter by connecting references once ✅ Auto-generates filenames from page names ✅ Enables quick navigation to any page with a click

Think of it as your site map manager combined with a shared asset library.

Key Features

🌳 Hierarchical Sitemap Tree

Visual tree view showing all Web pages with parent-child relationships:

My Website
├─ Home
├─ Products
│   ├─ Product A
│   └─ Product B
└─ About
    └─ Team
  • Auto-expanding: All pages visible by default
  • Proper indentation: 20px per level shows hierarchy
  • Blue file icons: Clean, consistent visual style
  • Chevron controls: Expand/collapse pages with children

📦 Reference Pass-Through System

Connect design references once to the Website node—all child pages automatically inherit them.

Before (cluttered workflow):

[Design System] → [Page 1]
[Design System] → [Page 2]
[Design System] → [Page 3]
[Logo] → [Page 1]
[Logo] → [Page 2]
[Logo] → [Page 3]

After (clean workflow):

[Design System] ──┐
[Logo] ───────────┤
                  ↓
           [Website Node]
                  │
        ┌─────────┼─────────┐
        ↓         ↓         ↓
    [Page 1]  [Page 2]  [Page 3]

All pages inherit Design System and Logo automatically!

✏️ Inline Page Editing

  • Double-click any page name to edit it
  • Enter to save, Escape to cancel
  • Updates the Web node's displayName
  • Auto-generates new filename

🔍 Quick Navigation

  • Click any page to select it in the workflow
  • Page counter shows total pages (including nested)
  • Refresh button rebuilds tree after changes
  • Scrollable view for large sitemaps

Quick Start

Creating a Website

  1. Add a Website Node to your workflow
  2. Name your website (click the title to edit)
  3. Connect Web nodes from the Website node's output
  4. View your sitemap in the tree

Adding Design References

  1. Create Web or Image nodes with design assets:

    • Design system components
    • Brand guidelines
    • Logo/imagery
    • Templates

  2. Connect them to Website node inputs

  3. All child pages automatically inherit these references

  4. Use in Web Wizard on any page—references appear automatically

Building Hierarchy

Simple structure (flat):

[Website] → [Home]
         → [About]
         → [Contact]

Nested structure (hierarchical):

[Website] → [Home]
         → [Products] → [Product A]
                     → [Product B]
         → [About] → [Team]
                  → [Careers]

Web nodes connected to other Web nodes become children in the tree!

Connection Rules

Input Connections (References)

Website nodes only accept:

✅ Web nodes - Design systems, templates, components ✅ Image nodes - Logos, mockups, wireframes, design files

❌ Rejects all other node types - Keeps references clean

Why this restriction?

Design references should be visual/HTML. This ensures the pass-through system stays focused and predictable.

Output Connections (Pages)

Website nodes only connect to:

✅ Web nodes - Pages that belong to the website

These pages automatically inherit all references connected to the Website node's inputs.

How Reference Inheritance Works

The Flow

  1. Connect references to Website node:

    [Design System] → [Website Node]

  2. Connect pages to Website node:

    [Website Node] → [Home Page]

  3. References automatically available:

    • Open Web Wizard on Home Page
    • Design System appears in references list
    • No direct connection needed!

Multiple References

[Tailwind CSS] ────┐
[Brand Colors] ────┤
[Component Lib] ───┤
[Hero Images] ─────┤
                   ↓
            [Website Node]
                   │
        ┌──────────┴──────────┐
        ↓                     ↓
   [Landing Page]      [Product Page]

Both pages inherit all four references. Use them in the Web Wizard to maintain consistent design across the site.

Direct + Inherited References

Pages can have both:

[Shared Design] → [Website] → [Page]
[Page-Specific Data] ────────→ [Page]

The page receives:

  • Inherited: Shared Design (from Website)
  • Direct: Page-Specific Data

No duplicates: System automatically filters out duplicate references.

Interface Features

Sitemap Tree View

Visual Elements:

  • 📄 Blue file icon for every page
  • ▶/▼ Chevron for pages with children
  • Indentation shows hierarchy depth
  • Page name (editable on double-click)
  • Filename (auto-generated, shown below name)

Interactions:

  • Single click: Select page in workflow
  • Double-click name: Edit page name
  • Click chevron: Expand/collapse children

Header Controls

  • 🌐 Website Name: Click to edit
  • Page Count: "X pages" (includes nested)
  • 🔄 Refresh: Rebuild sitemap tree
  • ⚙️ Configure: Open settings panel
  • ➖ Minimize: Collapse to compact mode

Keyboard Shortcuts

  • Shift+T: Toggle header on/off
  • Shift+H: Toggle handles visibility
  • V: Toggle handle orientation
  • Double-click node body: Expand/collapse detail mode

Building Websites

Use Case 1: Marketing Site

Structure:

[Website: Acme Corp]
├─ Home
├─ Products
│   ├─ Product A
│   └─ Product B
├─ About
│   ├─ Team
│   └─ Careers
└─ Contact

References:

[Brand Guidelines] ──┐
[Tailwind Design] ───┤
[Hero Images] ───────┤
                     ↓
         [Website: Acme Corp]

Result: All 7 pages share consistent branding automatically.

Use Case 2: Documentation Site

Structure:

[Website: Docs]
├─ Getting Started
│   ├─ Installation
│   └─ Quick Start
├─ API Reference
│   ├─ REST API
│   └─ GraphQL API
└─ Examples
    ├─ Basic
    └─ Advanced

References:

[Docs Template] → [Website: Docs]

Result: Consistent documentation styling across all pages.

Use Case 3: Design System Library

Structure:

[Website: Component Library]
├─ Buttons
│   ├─ Primary Button
│   ├─ Secondary Button
│   └─ Icon Button
├─ Forms
│   ├─ Text Input
│   └─ Select Dropdown
└─ Cards
    └─ Product Card

References:

[Style Guide] → [Website: Component Library]

Result: Component examples all follow style guide.

Workflow Patterns

Pattern 1: Build Once, Reference Everywhere

Atomic Design Workflow:

Step 1: Create design system
  [Web: Button Styles] → [Website: Company Site]

Step 2: Build pages
  [Website] → [Home]
           → [Products]
           → [Contact]

Step 3: Design pages using shared components
  - Open Web Wizard on any page
  - Button Styles automatically available
  - Generate consistent UI

Pattern 2: Multi-Site Management

Multiple websites in one workflow:

[Shared Brand Assets] ──┬→ [Website: Public Site]
                        └→ [Website: Admin Portal]

[Public Site] → [Home], [Products], [Pricing]
[Admin Portal] → [Dashboard], [Settings], [Users]

Each website manages its own hierarchy while sharing brand assets.

Pattern 3: Nested Websites

Websites within websites:

[Website: Main Site]
    ↓
[Home] → [Web: Products Section]
              ↓
         [Website: Product Catalog]
              ↓
         [Product A], [Product B]

References cascade through all levels!

Tree Building Algorithm

How the Tree is Built

  1. Start at Website node outputs
  2. Follow connections to Web nodes
  3. Add to tree at current level
  4. Recurse through each Web node's outputs
  5. Skip non-Web nodes but continue traversing
  6. Build hierarchy based on connection depth

Example Traversal

Workflow:

[Website] → [Home] → [Agent: Generate Content] → [Products]
         → [About]

Agent node is skipped, but traversal continues:

Resulting Tree:

Website
├─ Home
│  └─ Products  (found after Agent)
└─ About

Why? Website nodes only display Web nodes, but traverse through everything.

Best Practices

1. Connect Design References to Website Node

Good:

[Design System] → [Website] → [Page 1], [Page 2], [Page 3]

Avoid:

[Design System] → [Page 1]
[Design System] → [Page 2]
[Design System] → [Page 3]

Clean workflows are easier to maintain!

2. Use Meaningful Page Names

Good Names:

  • "Home Page" → index.html
  • "About Us" → about-us.html
  • "Contact" → contact.html

Avoid:

  • "page1", "page2", "page3"
  • "Untitled Node"
  • "New Web Node"

3. Keep Hierarchies Shallow

Good (3 levels):

Website
├─ Products
│  └─ Category A
└─ Services

Avoid (too deep):

Website
└─ Main
   └─ Section
      └─ Subsection
         └─ Page
            └─ Content

Deep nesting is hard to navigate.

4. Refresh After Restructuring

When to refresh:

  • Added new pages
  • Changed page connections
  • Deleted pages
  • Modified hierarchy

Click the 🔄 Refresh button to update the tree.

5. Use Multiple Website Nodes for Different Sites

One workflow, multiple sites:

[Website: Marketing Site]
[Website: Documentation]
[Website: Admin Portal]

Each manages its own structure independently.

Tips and Tricks

Quick Page Access

Navigate faster:

  1. Click page in tree
  2. Page selected in workflow
  3. Open Web Wizard
  4. Start editing

No scrolling or searching needed!

Filename Conventions

Auto-conversion:

  • "Home Page" → index.html
  • "About Us" → about-us.html
  • "Contact Form" → contact-form.html

Manual override: Edit filename in Web node config if needed.

Reference Priority

Order in Web Wizard:

  1. Direct connections (page-specific)
  2. Inherited references (from Website)

Duplicates filtered automatically.

Collapse/Expand Sections

  • Click ▶ to expand
  • Click ▼ to collapse
  • Focus on active sections
  • Hide completed sections

Search in Tree

Browser search (Cmd/Ctrl+F):

  • Works in tree view
  • Finds page names
  • Jump to specific pages

Keyboard Shortcuts

Website Node:

  • Shift+T: Toggle header
  • Shift+H: Toggle handles
  • V: Toggle orientation
  • Double-click: Expand/collapse

In Tree:

  • Click: Select page
  • Double-click name: Edit name
  • Click chevron: Expand/collapse children

Troubleshooting

Page Not Appearing in Tree

Symptoms: Added page but it's not in sitemap

Check:

  1. Is page a Web node? (only Web nodes show)
  2. Is there a connection path from Website to page?
  3. Did you click Refresh?

Fix:

  • Verify connection exists
  • Click Refresh button
  • Check node type (must be Web)

References Not Inherited

Symptoms: Page doesn't see Website references in Web Wizard

Check:

  1. Are references Web or Image nodes?
  2. Is reference connected to Website input?
  3. Is page connected to Website output?

Fix:

  • Connect reference to Website
  • Ensure connection path exists
  • Check console for errors

Tree Hierarchy Wrong

Symptoms: Pages at wrong level

Check:

  1. Are connections in right order?
  2. Did you click Refresh?
  3. Any broken connections?

Fix:

  • Reorganize connections
  • Click Refresh
  • Rebuild hierarchy if needed

Can't Edit Page Name

Symptoms: Double-click doesn't work

Check:

  1. Double-clicking the name text (not icon or row)?
  2. Is node selected?

Fix:

  • Double-click directly on page name text
  • Make sure cursor changes to text cursor

Limitations

Static Tree

  • Tree doesn't auto-update
  • Click Refresh after changes
  • Why: Performance optimization for large sites

Web Nodes Only

  • Only Web nodes appear in tree
  • Other node types skipped (but traversed)
  • Why: Sitemap is for pages, not data nodes

No Execution

  • Website node doesn't execute
  • Purely organizational
  • Why: It's a structure manager, not a processor

Single Inheritance

  • Page inherits from first Website found
  • Why: Prevents ambiguity with multiple parents

Advanced Features

Nested Website Nodes

Cascade references through multiple levels:

[Global Styles] → [Website: Company]
                       ↓
                  [Website: Blog]
                       ↓
                  [Post 1], [Post 2]

Posts inherit from both Website nodes!

Mixed Reference Types

Combine Web and Image references:

[Component Library] ─┐
[Logo Set] ──────────┤
[Brand Guidelines] ──┤
[Mockup Images] ─────┤
                     ↓
              [Website Node]

All types available in Web Wizard!

Dynamic Sitemap

Generate pages programmatically:

[DataGrid: Products] → [Loop] → [Web: Product Page Template]
                                       ↓
                               [Website: Product Catalog]

Loop generates multiple pages, all appear in sitemap!

Examples

Example 1: Corporate Website

Setup:

[Tailwind Components] ──┐
[Brand Colors] ─────────┤
[Logo] ─────────────────┤
                        ↓
                 [Website: Acme Corp]
                        │
        ┌───────────────┼───────────────┐
        ↓               ↓               ↓
   [Home]        [Services]       [Contact]
                      │
                 ┌────┴────┐
                 ↓         ↓
          [Web Design] [Marketing]

Result: 5 pages, all share Tailwind, colors, and logo.

Example 2: Documentation Portal

Setup:

[Docs Template] → [Website: API Docs]
                        │
        ┌───────────────┼───────────────┐
        ↓               ↓               ↓
  [Introduction]   [Reference]     [Guides]
        │               │
        ↓          ┌────┴────┐
   [Quick Start]   │         │
              [REST API] [GraphQL]

Result: Consistent docs styling, hierarchical navigation.

Example 3: Component Showcase

Setup:

[Style Guide] → [Website: Components]
                       │
        ┌──────────────┼──────────────┐
        ↓              ↓              ↓
   [Buttons]      [Forms]        [Cards]
        │              │
   ┌────┴────┐    ┌───┴───┐
   │         │    │       │
[Primary] [Icon] [Input] [Select]

Result: Every component example follows style guide.

Related Documentation

Need help? Visit our community forums or check the FAQ.