Developer Integration Docs

Developer SDK & Web Components

Quickstart guides for integrating Tools Vault calculation engines into React, Next.js, Vue, Webflow, and WordPress.

1. React / Next.js Integration

Embed any calculator as a responsive React component with zero dependencies:

import React from 'react';

export function SolarSizerWidget() {
  return (
    <div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>
      <iframe
        src="https://tools-vault-4ml.pages.dev/solar_generator_battery_storage_backup_sizer"
        width="100%"
        height="750"
        style={{ border: '1px solid #e2e8f0', borderRadius: '12px' }}
        title="Solar Sizer Widget"
      />
    </div>
  );
}

2. Webflow & WordPress HTML Embed

Drop this standard responsive snippet into any HTML Embed block:

<div class="tools-vault-embed-wrapper" style="position:relative;width:100%;height:750px;">
  <iframe 
    src="https://tools-vault-4ml.pages.dev/mobile_welding_fabrication_job_cost_estimator" 
    width="100%" 
    height="100%" 
    frameborder="0" 
    style="border-radius:12px;border:1px solid rgba(255,255,255,0.1);">
  </iframe>
</div>

3. Open Data API Endpoints

Fetch the complete machine-readable index of 400+ calculators via JSON:

curl -s https://tools-vault-4ml.pages.dev/api/v1/tools.json | jq '.tools[0]'