Embed2 min

How to add a calculator to your Next.js app

Embed ToolKnife calculators and tools into your Next.js application with a single iframe. Supports theming, auto-resize, and 18 languages.

Prerequisites

  • A Next.js application
1

Add the iframe

The simplest way to embed a ToolKnife tool is with an iframe. Replace `mortgage-calculator` with any tool slug from toolknife.com.
app/components/calculator.tsx
export function MortgageCalculator() {
  return (
    <iframe
      src="https://toolknife.com/embed/mortgage-calculator"
      width="100%"
      height="600"
      style={{ border: "none", borderRadius: "12px" }}
      title="Mortgage Calculator"
      loading="lazy"
    />
  );
}
2

Customize the theme

Add query parameters to match your site's look. Available options: `theme` (light/dark), `accent` (hex color without #), `locale` (2-letter code).
Themed embed
<iframe
  src="https://toolknife.com/embed/mortgage-calculator?theme=dark&accent=3B82F6&locale=de"
  width="100%"
  height="600"
  style={{ border: "none", borderRadius: "12px" }}
  title="Mortgage Calculator"
  loading="lazy"
/>
3

Create a reusable component

Wrap the iframe in a component for consistent usage across your app.
app/components/toolknife-embed.tsx
type ToolKnifeEmbedProps = {
  tool: string;
  height?: number;
  theme?: "light" | "dark";
  accent?: string;
  locale?: string;
};

export function ToolKnifeEmbed({
  tool,
  height = 600,
  theme = "light",
  accent,
  locale,
}: ToolKnifeEmbedProps) {
  const params = new URLSearchParams();
  params.set("theme", theme);
  if (accent) params.set("accent", accent);
  if (locale) params.set("locale", locale);

  return (
    <iframe
      src={`https://toolknife.com/embed/${tool}?${params}`}
      width="100%"
      height={height}
      style={{ border: "none", borderRadius: "12px" }}
      title={tool.replace(/-/g, " ")}
      loading="lazy"
    />
  );
}

// Usage:
// <ToolKnifeEmbed tool="compound-interest-calculator" theme="dark" />
4

Enable auto-resize (optional)

ToolKnife embeds send a `postMessage` with height updates. Listen for it to auto-resize the iframe and avoid scrollbars.
Auto-resize hook
"use client";

import { useEffect, useRef } from "react";

export function AutoResizeEmbed({ tool }: { tool: string }) {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    function handleMessage(event: MessageEvent) {
      if (
        event.origin === "https://toolknife.com" &&
        event.data?.type === "toolknife-resize"
      ) {
        if (iframeRef.current) {
          iframeRef.current.style.height = event.data.height + "px";
        }
      }
    }
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      src={`https://toolknife.com/embed/${tool}`}
      width="100%"
      height="600"
      style={{ border: "none" }}
      title={tool}
      loading="lazy"
    />
  );
}
5

Browse available tools

Explore all 273+ embeddable tools at toolknife.com/embed. The configurator lets you preview the tool, customize settings, and copy the embed code.

Related guides

WordPress Embed

2 min

JavaScript + REST API

3 min

Tools used in this guide

mortgage-calculatorcompound-interest-calculatorbmi-calculator

Ready to integrate? Browse all 273+ tools with interactive examples.

API DocumentationMCP Server