Note: SDK packages will be published at launch. This tutorial previews the API.

Embed a Spreadsheet in Next.js

Add a fully interactive spreadsheet to any Next.js page in under five minutes. By the end of this tutorial you will load an XLSX file, listen for cell changes, and customize the toolbar.

beginner~15 min

Prerequisites

•Node.js 18+
•An existing Next.js 13+ app (App Router or Pages Router both work)

1Install @mog-sdk/embed

The embed package includes the React component and the WASM runtime.

bash

npm install @mog-sdk/embed

2Add the MogSheet component

Import MogSheet and render it on any page. The component is a client component, so use "use client" if you are in the App Router.

tsx

"use client";

import { MogSheet } from "@mog-sdk/embed/react";

export default function SpreadsheetPage() {
  return (
    <main className="p-8">
      <h1>My Spreadsheet</h1>
      <MogSheet width={1200} height={600} />
    </main>
  );
}

This renders an empty spreadsheet. Next, let's populate it with data from an XLSX file.

3Load data from an XLSX file

Place an XLSX file in your public/ directory and pass its path as the src prop.

tsx

<MogSheet
  src="/data/quarterly-report.xlsx"
  width={1200}
  height={600}
/>

The WASM engine parses the file client-side -- no server round-trip required. Formulas are recalculated automatically after loading.

4Handle events

MogSheet exposes callbacks for common spreadsheet events.

tsx

"use client";

import { MogSheet } from "@mog-sdk/embed/react";
import type { CellChangeEvent, SelectionEvent } from "@mog-sdk/embed";

function handleCellChange(event: CellChangeEvent) {
  console.log(
    `Cell ${event.ref} changed from ${event.oldValue} to ${event.newValue}`
  );
}

function handleSelection(event: SelectionEvent) {
  console.log(`Selected range: ${event.range}`);
}

export default function SpreadsheetPage() {
  return (
    <MogSheet
      src="/data/quarterly-report.xlsx"
      width={1200}
      height={600}
      onCellChange={handleCellChange}
      onSelectionChange={handleSelection}
    />
  );
}

5Customize toolbar and features

Use the toolbar and features props to control what the user sees.

tsx

<MogSheet
  src="/data/quarterly-report.xlsx"
  width={1200}
  height={600}
  toolbar={{
    show: true,
    items: ["bold", "italic", "underline", "separator", "align", "merge"],
  }}
  features={{
    formulaBar: true,
    sheetTabs: true,
    contextMenu: true,
    resize: true,
  }}
  theme={{
    primaryColor: "#6366f1",
    headerBackground: "#1e1e2e",
  }}
/>

Complete example

Here is the full page with everything wired together:

tsx

"use client";

import { MogSheet } from "@mog-sdk/embed/react";
import type { CellChangeEvent, SelectionEvent } from "@mog-sdk/embed";
import { useCallback, useState } from "react";

export default function SpreadsheetPage() {
  const [lastEdit, setLastEdit] = useState<string | null>(null);

  const handleCellChange = useCallback((e: CellChangeEvent) => {
    setLastEdit(`${e.ref}: ${e.oldValue} -> ${e.newValue}`);
  }, []);

  const handleSelection = useCallback((e: SelectionEvent) => {
    console.log("Selected:", e.range);
  }, []);

  return (
    <main className="mx-auto max-w-7xl p-8">
      <h1 className="mb-4 text-2xl font-bold">Quarterly Report</h1>

      {lastEdit && (
        <p className="mb-2 text-sm text-gray-500">Last edit: {lastEdit}</p>
      )}

      <MogSheet
        src="/data/quarterly-report.xlsx"
        width={1200}
        height={600}
        onCellChange={handleCellChange}
        onSelectionChange={handleSelection}
        toolbar={{
          show: true,
          items: ["bold", "italic", "underline", "separator", "align", "merge"],
        }}
        features={{
          formulaBar: true,
          sheetTabs: true,
          contextMenu: true,
          resize: true,
        }}
      />
    </main>
  );
}

Next steps

Process XLSX Files Server-Side

Read, modify, and write Excel files on the server with @mog-sdk/node.

Build a Budget Tracker

Build a full app with formulas, conditional formatting, charts, and XLSX export.

API Reference

Explore the full MogSheet component API and configuration options.

Getting Started

Install the SDK, create a workbook, and learn the basics.