n8n Community Node: HTML to TOON Converter

A powerful n8n community node that extracts structured data from HTML tables and lists, converting it to the TOON format - a compact, AI-friendly text representation perfect for data pipelines and LLM prompts.

✨ Features

• HTML Table Extraction: Extract tabular data from HTML tables with nested table support
• HTML List Extraction: Extract structured data from ordered/unordered lists
• TOON Format Conversion: Convert extracted data to compact TOON format
• Multiple Output Formats: Output as TOON string, JSON object, or both
• Flexible Input Sources: HTML string, URL fetching, or previous node data
• AI-Optimized: TOON format is perfect for LLM prompts and AI processing
• Error Handling: Robust error handling with detailed error messages
• Performance Optimized: Memory-efficient processing with performance tracking

📦 Installation

Option 1: Install in n8n (Recommended)

1. In your n8n instance, go to Settings → Community Nodes
2. Click Install community node
3. Enter the package name: n8n-nodes-html-toon
4. Click Install
5. Restart n8n

Option 2: Manual Installation

# Clone the repository
git clone https://github.com/rexia-intel-automation/n8n-nodes-html-toon.git

# Install dependencies
cd n8n-nodes-html-toon
npm install

# Build the node
npm run build

# Copy the dist folder to your n8n custom nodes directory
cp -r dist /path/to/n8n/custom-nodes/

🚀 Quick Start

Basic Usage

1. Add the "HTML to TOON" node to your workflow
2. Configure the node:
   • Source Type: Choose where to get HTML from
   • HTML/URL: Provide HTML string or URL
   • Extraction Type: Tables, Lists, or Both
   • Output Format: TOON string, JSON, or Both
   • Output Name: Name for your data (e.g., "users", "products")

Example Workflows

Example 1: Extract Product Table from Website

[HTTP Request] → [HTML to TOON] → [AI Chat Model]

Configuration:

• Source Type: URL
• URL: https://example.com/products
• Extraction Type: Tables
• Output Format: TOON String
• Output Name: products

Example 2: Process HTML from Previous Node

[Webhook] → [HTML to TOON] → [Database] → [Email]

Configuration:

• Source Type: Previous Node Data
• Extraction Type: Both (Tables and Lists)
• Output Format: Both (TOON and JSON)
• Output Name: extractedData

📖 TOON Format Explained

TOON (Table Object Object Notation) is a compact text format designed for AI consumption:

Basic Syntax

name[count]{fields}: value1, value2, ...; valueN

Examples

Simple Array:

users[2]{id, name, role}: 1, Alice, admin; 2, Bob, user

Nested Objects:

user{id, name, address{street, city}}: 1, Alice, Main St, NYC

Mixed Array:

products[3]{name, price, stock}: "Laptop", "$999", 10; "Mouse", "$49", 50; "Keyboard", "$79", 25

Key Features

• Compact: Minimal syntax overhead
• Readable: Human and AI readable
• Structured: Preserves data relationships
• Escaped: Handles special characters automatically
• Consistent: Predictable output format

🔧 Node Configuration

Input Parameters

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | Source Type | Options | Yes | url, html, or input | | URL | String | Conditional | Required if source type is url | | HTML | String | Conditional | Required if source type is html | | Extraction Type | Options | Yes | tables, lists, or both | | Output Format | Options | Yes | toon, json, or both | | Output Name | String | Yes | Name for the output data | | TOON Options | Collection | No | TOON formatting options | | Extraction Options | Collection | No | HTML extraction options |

TOON Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | Null Symbol | String | ∅ | Symbol for null/undefined values | | Indent Size | Number | 2 | Indentation for nested structures | | Include Count | Boolean | true | Include [N] count in output |

Extraction Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | Include Attributes | Boolean | false | Include HTML attributes in output | | Remove Empty | Boolean | true | Remove empty rows/columns | | Max Depth | Number | 3 | Maximum depth for nested tables/lists | | Infer Headers | Boolean | true | Use first row as headers if no <th> |

📊 Output Examples

TOON Output

{
  "toon": "products[2]{name, price}: \"Laptop\", \"$999\"; \"Mouse\", \"$49\"",
  "metadata": {
    "count": 2,
    "type": "array",
    "sourceType": "html",
    "extractionType": "tables",
    "performance": {
      "total": 45,
      "extraction": 15,
      "conversion": 5
    }
  }
}

JSON Output

{
  "json": [
    { "name": "Laptop", "price": "$999" },
    { "name": "Mouse", "price": "$49" }
  ],
  "metadata": { ... }
}

Both Outputs

{
  "toon": "users[1]{id, name}: 1, Alice",
  "json": { "id": 1, "name": "Alice" },
  "parsed": { "users": [{ "id": 1, "name": "Alice" }] },
  "metadata": { ... }
}

🔄 Advanced Usage

Processing Large HTML Files

For large HTML documents, use extraction options to optimize performance:

{
  "extractionOptions": {
    "removeEmpty": true,
    "maxDepth": 2,
    "includeAttributes": false
  }
}

AI Pipeline Integration

Use TOON format directly in AI prompts:

# Example Python with OpenAI
prompt = f"""
Extract insights from this product data:
{toon_string}

What are the top 3 most expensive products?
"""

Error Handling

The node includes comprehensive error handling:

{
  "error": true,
  "message": "Failed to fetch URL: Network error",
  "itemIndex": 0,
  "timestamp": "2024-01-01T12:00:00Z"
}

🧪 Testing

Run the test suite:

# Install dependencies
npm install

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Run specific test
npm test -- test/converters.test.ts

Test Coverage

npm test -- --coverage

🏗️ Development

Project Structure

n8n-nodes-html-toon/
├── nodes/                    # n8n node implementation
│   └── HtmlToonNode/
│       ├── HtmlToonNode.ts  # Main node class
│       ├── HtmlToonNode.json # Node configuration
│       └── index.ts         # Node export
├── src/                     # Core library
│   ├── converters/         # TOON conversion logic
│   ├── extractors/        # HTML extraction logic
│   └── utils/             # Utilities
├── test/                   # Test files
├── examples/              # Example workflows
└── dist/                  # Built files

Building the Node

# Install dependencies
npm install

# Build TypeScript
npm run build

# Development watch mode
npm run dev

Adding New Features

1. Implement feature in src/
2. Add tests in test/
3. Update node in nodes/HtmlToonNode/
4. Build and test
5. Update documentation

🤝 Contributing

We welcome contributions! Here's how:

1. Fork the repository
2. Create a branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Run tests: npm test
5. Commit: git commit -m 'Add amazing feature'
6. Push: git push origin feature/amazing-feature
7. Open a Pull Request

Contribution Guidelines

• Follow TypeScript best practices
• Add tests for new features
• Update documentation
• Use descriptive commit messages
• Keep code consistent with existing style

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

🙏 Acknowledgments

• n8n for the amazing automation platform
• Cheerio for fast HTML parsing
• Axios for reliable HTTP requests
• All contributors and users of this node

📞 Support

• Issues: GitHub Issues
• Documentation: This README and code comments
• Community: n8n Community Forum

Made with ❤️ by Rexia Intel Automation

If you find this node useful, please give it a star on GitHub! ⭐