Connecting to dev server...

Circuitry Logo
Circuitry
Open Editor

Web Node Guide

The Web Node is your AI-powered web design studio. Create beautiful, functional web pages from scratch, redesign existing pages, or make quick tweaks—all through natural language prompts. Whether you're prototyping landing pages, building UI components, or iterating on designs, the Web Designer Wizard brings your ideas to life instantly.

Key Features

✨ AI-Powered Design & Redesign

  • Generate from scratch: Describe any web design and watch it materialize
  • Redesign existing pages: Load a URL or existing HTML and transform it
  • Iterative tweaking: Make incremental changes with natural language
  • Style preservation: AI maintains your design language when editing
  • Multiple AI models: Choose GPT-4, Claude, or local models
  • Instant preview: See changes in real-time as you design

🌐 External URL Loading

  • Fetch and display content from any web URL
  • Built-in proxy handles CORS restrictions
  • URL rewriting for proper iframe display
  • Support for images, CSS, and JavaScript resources

🔗 Workflow Integration

  • Process URLs with input.value.url
  • Generate HTML with input.value.prompt
  • Output as output.value.html for downstream nodes
  • Template variable support for dynamic content

📝 Live Preview & Code Editor

  • Real-time HTML rendering in iframe
  • Monaco code editor for manual editing
  • Split view: Web preview and HTML source
  • Zoom controls for content and code

Quick Start

Creating HTML with AI

  1. Add a Web Node to your workflow
  2. Click the ✨ sparkle button in the node header
  3. Enter a prompt: 
    Create a modern pricing table with 3 tiers
  4. Press Enter or click Generate
  5. View the result in the Web preview

Loading External URLs

  1. Enter a URL in the input field at the top of the node: 
    https://example.com
  2. Click the Load button
  3. Content appears in both Web and HTML views

Manual Editing

  1. Switch to HTML view (tab at top of node)
  2. Edit the HTML directly in Monaco editor
  3. Switch to Web view to see changes
  4. Use zoom controls to adjust display size

Web Designer Wizard

The Web Designer Wizard is your AI assistant for creating and editing HTML.

Opening the Wizard

  • Click the ✨ sparkle icon in the node header
  • A floating panel appears above the node

Creating New HTML

Example Prompts:

Create a calculator with basic operations

Design a contact form with name, email, and message fields

Build an animated progress bar that fills from 0 to 100%

Make a responsive navigation menu with dropdown

The wizard generates complete, working HTML with:

  • Inline CSS for styling
  • JavaScript for interactivity
  • Modern, clean design
  • Fully functional features

Redesigning & Tweaking Existing HTML

When you have HTML in the node, the wizard shows Edit mode. This is perfect for iterative design:

Example Tweaks:

Add a dark mode toggle button

Change the color scheme to green and purple

Make the layout responsive for mobile

Add smooth animations to all buttons

Redesign this to look more modern and minimal

How it works:

  1. Wizard analyzes your existing HTML structure and style
  2. Applies changes while preserving your design language
  3. Maintains functionality - doesn't break existing features
  4. Updates incrementally - each change builds on the last

Redesign Workflow:

Load existing page → Tweak colors → Adjust spacing →
Add animations → Polish typography → Done!

Wizard Controls

  • Enter: Generate HTML
  • Escape: Close wizard
  • Ctrl+M: Change AI model
  • ⚙️ Settings icon: Select different AI model
  • Edit/Create toggle: Switch between editing and creating

Important: Wizard vs. URL Loading

⚠️ The wizard does NOT fetch from URLs

  • Wizard only generates or edits HTML based on prompts
  • URL loading happens via the Load button or workflow input
  • These are separate, independent operations

Workflow Execution

When the Web node executes in a workflow, it processes inputs in this priority order:

1. URL Fetching (Highest Priority)

Input:

{
  "value": {
    "url": "https://example.com"
  }
}

Action: Fetches HTML from the URL

Output:

{
  "value": {
    "html": "<html>fetched content...</html>"
  }
}

2. AI Generation

Input:

{
  "value": {
    "prompt": "Create a login form with email and password"
  }
}

Action:

  • Generates HTML using AI
  • Uses existing node HTML as style reference if available
  • Applies AI model settings from node config

Output:

{
  "value": {
    "html": "<html>generated content...</html>"
  }
}

3. Pass-Through (Default)

Input:

{
  "value": {
    "html": "<div>Custom HTML</div>"
  }
}

Action: Uses provided HTML or saved HTML from node

Output: Same HTML in output.value.html

Configuration Options

Display Settings

  • Width: Preview width in pixels (default: 600)
  • Height: Preview height in pixels (default: 400)
  • Show Editor: Whether to show HTML editor tab

AI Settings

  • Model: AI model for generation (GPT-4, Claude, etc.)
  • Temperature: Creativity control (0.0 - 1.0)
  • Provider: OpenAI, Anthropic, or local endpoint

Content Storage

  • Saved HTML: The HTML content stored in the node
  • External URL: Source URL if loaded from external site
  • Wizard Prompt: Last prompt used in wizard

Use Cases

1. Design Studio - Iterative Prototyping

Workflow: Web Node → Edit → Tweak → Polish → Export

Scenario: You're designing a landing page and want to iterate quickly

Step 1 - Initial Design:

Create a modern landing page for a SaaS product.
Include hero section with CTA, features grid,
testimonials, and footer with social links.
Use blue gradient and clean typography.

Step 2 - Refine Colors:

Change the blue gradient to purple and teal

Step 3 - Add Animation:

Add subtle fade-in animations as you scroll

Step 4 - Polish:

Make the CTA button more prominent with a glow effect

Result: Professional landing page built through natural conversation, no code written

2. Dynamic Reports

DataGrid → Web Node → Email Node

Flow:

  1. DataGrid outputs sales data
  2. Web Node receives data and prompt: 
    {
  "value": {
    "prompt": "Create a sales report with charts",
    "data": [...]
  }
}
  3. AI generates HTML report with data visualized
  4. Email node sends the report

3. Web Scraping

HTTP Node → Web Node → Code Node

Flow:

  1. HTTP node outputs: { "value": { "url": "https://news.site.com" } }
  2. Web Node fetches HTML
  3. Code Node parses and extracts data: 
    const parser = new DOMParser()
const doc = parser.parseFromString(input.value.html, 'text/html')
const headlines = [...doc.querySelectorAll('.headline')]
  .map(h => h.textContent)
return { headlines }

4. Form Generation

Agent Node → Web Node → User Input

Flow:

  1. Agent determines what data to collect
  2. Outputs prompt: "Create a form to collect user feedback with rating and comments"
  3. Web Node generates interactive form
  4. User interacts with form in workflow

5. Redesigning Existing Pages

Workflow: Load URL → Redesign → Tweak → Export

Scenario: You want to modernize an existing website

Step 1 - Load:

Load: https://your-old-site.com

Step 2 - Major Redesign:

Redesign this with a modern, minimalist aesthetic.
Use card-based layout, larger typography, and lots of whitespace.

Step 3 - Color Update:

Update the color scheme to use navy blue and coral accents

Step 4 - Mobile Optimization:

Make this fully responsive for mobile devices

Result: Completely transformed page while preserving content and structure

6. Quick Tweaks & Adjustments

Workflow: Existing HTML → Small change → Done

Common Tweaks:

Make all buttons rounded

Increase font size throughout by 20%

Add hover effects to all links

Change background from white to light gray

Add subtle box shadows to cards

Perfect for: Last-minute adjustments, A/B testing variations, client feedback implementation

Template Variables

The Web node supports dynamic content via template variables:

<div>
  <h1>Welcome, ${{input.value.name}}!</h1>
  <p>Your account balance: $${{input.value.balance}}</p>
  <p>Last login: ${{input.value.lastLogin}}</p>
</div>

Input:

{
  "value": {
    "name": "Alice",
    "balance": 1250.50,
    "lastLogin": "2025-10-01"
  }
}

Rendered Output:

<div>
  <h1>Welcome, Alice!</h1>
  <p>Your account balance: $1250.50</p>
  <p>Last login: 2025-10-01</p>
</div>

Output Format

The Web node always outputs in this structure:

{
  "value": {
    "html": "<html>...</html>"
  },
  "html": "<html>...</html>",
  "config": {
    "externalUrl": "https://...",
    "width": 600,
    "height": 400,
    "showEditor": false
  }
}

Accessing in downstream nodes:

  • ${{output.value.html}} (recommended)
  • ${{output.html}}

Web Proxy

External URLs are loaded through Circuitry's web proxy (/api/web-proxy) which:

✅ Handles CORS: Bypasses browser CORS restrictions ✅ Rewrites URLs: Images, CSS, JS load through proxy ✅ Removes blockers: Strips headers that prevent iframe embedding ✅ Processes resources: CSS url() references updated

How it works:

User enters: https://example.com
         ↓
Proxy fetches: GET https://example.com
         ↓
Rewrites: <img src="/path/img.jpg"> → <img src="/api/web-proxy?url=https://example.com/path/img.jpg">
         ↓
Returns: Modified HTML to iframe

Security

Iframe Sandbox

The Web node uses iframe sandboxing for security:

Allowed:

  • ✅ JavaScript execution
  • ✅ Form submissions
  • ✅ Modal dialogs
  • ✅ Popups

Blocked:

  • ❌ Top-level navigation (can't redirect parent page)
  • ❌ Automatic downloads

External Content

When loading external URLs:

⚠️ Be aware:

  • Content is proxied through your server
  • Some sites block iframe embedding
  • Verify sources are trustworthy
  • Consider privacy implications

✅ Best practices:

  • Test URLs in UI before workflow execution
  • Use HTTPS URLs when possible
  • Avoid loading sensitive content
  • Check for broken resources

Tips & Best Practices

1. Write Detailed Prompts

Good:

Create a responsive pricing table with 3 tiers (Basic $9, Pro $29, Enterprise $99).
Show monthly pricing, feature lists with checkmarks, and a gradient CTA button
for each tier. Use modern card design with shadows and blue accent colors.

Less effective:

pricing table

More detail = better results!

2. Iterative Design is Powerful

Design in layers, starting broad and getting specific:

Layer 1 - Structure:

Create a portfolio page with hero, projects grid, and contact section

Layer 2 - Style:

Make this dark mode with neon accents

Layer 3 - Details:

Add smooth scroll animations and gradient backgrounds

Layer 4 - Polish:

Increase spacing between sections and add subtle glow to headings

Each step refines the previous one - the AI maintains context!

3. Use Edit Mode for Redesigns

Perfect for:

  • Client feedback: "Make the CTA more prominent"
  • A/B testing: "Try this with a red button instead"
  • Quick fixes: "Add padding around the header"
  • Style updates: "Update colors to match our new branding"

Tip: Be specific about what to change but vague about what to preserve. The AI will maintain everything else.

4. Combine Manual & AI Editing

Workflow:

  1. Let AI generate initial design
  2. Switch to HTML editor for precise tweaks
  3. Use wizard for next major change
  4. Repeat

Best for: When you want control over specifics but speed for major changes

5. Start Simple, Add Complexity

Don't try to describe everything at once:

Bad:

Create a landing page with hero, features (3 columns with icons),
pricing table (3 tiers with features and CTAs), testimonials carousel,
FAQ accordion, newsletter signup, and footer with social links, all
with animations and dark mode toggle

Good - Step by step:

Step 1: Create a landing page with hero and 3-column features section
Step 2: Add pricing table below with 3 tiers
Step 3: Add testimonials and FAQ sections
Step 4: Add dark mode toggle
Step 5: Add subtle animations throughout

Complex designs emerge from simple iterations!

6. Test External URLs First

Before using URLs in workflows:

  1. Enter URL in node
  2. Click Load button
  3. Check Web preview renders correctly
  4. Verify resources loaded (images, CSS)
  5. Then use in automated workflow

5. Combine with Other Nodes

Web nodes shine in workflows:

DataGrid → Web (generate chart) → Email
HTTP → Web (scrape) → Code (parse) → DataGrid
Form → Web (confirmation) → Webhook
Agent → Web (create UI) → Message

Keyboard Shortcuts

When Web Designer Wizard is open:

  • Enter: Generate HTML
  • Escape: Close wizard
  • Ctrl+M: Toggle model menu
  • Shift+Enter: New line in prompt (don't generate)

In HTML Editor:

  • Standard Monaco editor shortcuts apply
  • Ctrl/Cmd + F: Find
  • Ctrl/Cmd + Z: Undo
  • Ctrl/Cmd + /: Comment/uncomment

Troubleshooting

HTML Not Displaying

Symptoms: Blank Web view

Check:

  1. Switch to HTML view - is there content?
  2. Open browser console - any JavaScript errors?
  3. Check for syntax errors in HTML
  4. Try simplifying HTML to isolate issue

Fix:

  • Validate HTML syntax
  • Check <script> tags for errors
  • Ensure external resources are accessible
  • Test in standalone HTML file

URL Loading Failed

Symptoms: Error message when loading URL

Check:

  1. Does URL work in regular browser?
  2. Does site allow iframe embedding?
  3. Is URL correct (https://)?

Fix:

  • Verify URL is accessible
  • Try different URL
  • Check network console for errors
  • Some sites block iframe embedding (e.g., google.com)

Wizard Not Generating

Symptoms: Generate button does nothing or shows error

Check:

  1. Is prompt field empty?
  2. Is API key configured? (Settings → API Keys)
  3. Is selected model available?
  4. Any errors in browser console?

Fix:

  • Enter a prompt
  • Configure API key for selected model
  • Try different AI model
  • Check Settings for model configuration

Template Variables Not Working

Symptoms: Variables show as ${{variable}} in output

Check:

  1. Are you testing in workflow execution (not just UI preview)?
  2. Does input structure match variable path?
  3. Is variable path correct?

Fix:

  • Test in actual workflow execution
  • Check input data format matches template
  • Use correct path: ${{input.value.field}}
  • Review previous node output

Advanced Features

Custom Styling with Existing HTML

When using Edit mode, the wizard analyzes your HTML and:

  • Matches color schemes
  • Preserves layout structure
  • Uses same CSS patterns
  • Maintains design language

This lets you build consistent UI families.

Multi-Step Workflows

Agent → Web → Code → Web → Email
  ↓        ↓      ↓      ↓
Decide   Create  Parse  Format  Send
Content  HTML    Data   Report

Build sophisticated workflows where Web nodes:

  • Generate initial UI from AI decisions
  • Transform data into visualizations
  • Create final formatted outputs

Dynamic Content Injection

Combine template variables with AI generation:

Prompt:

Create a personalized welcome page

Input:

{
  "value": {
    "prompt": "Create a personalized welcome page",
    "userName": "Alice",
    "userRole": "Administrator"
  }
}

AI generates HTML using the context and variables!

Examples

Example 1: Animated Dashboard

Wizard Prompt:

Create an analytics dashboard with:
- 4 metric cards showing KPIs with icons
- Line chart for trends (use Chart.js)
- Table showing recent activity
- Dark theme with neon accents
- Animated number counters

Result: Full dashboard with working animations

Example 2: Email Template

Workflow: DataGrid (order data) → Web Node → Email

Web Node Prompt:

Create an order confirmation email template

Input Data:

{
  "orderNumber": "12345",
  "items": [...],
  "total": 129.99
}

Result: Formatted email HTML with order details

Example 3: Interactive Calculator

Wizard Prompt:

Build a mortgage calculator with:
- Input fields for loan amount, interest rate, term
- Calculate button
- Display monthly payment and total interest
- Amortization schedule table
- Modern, professional design

Result: Working calculator with all functionality

Related Documentation

Need help? Check the Troubleshooting section or visit our community forums.