Examples

Quick Start

import { initWasm, Workbook } from 'modern-xlsx';
await initWasm();
const wb = new Workbook();
const ws = wb.addSheet('Hello');
ws.cell('A1').value = 'Hello, World!';
ws.cell('A2').value = 42;
await wb.toFile('hello.xlsx');

Reading and Modifying

import { readFile } from 'modern-xlsx';
const wb = await readFile('input.xlsx');
const ws = wb.getSheet('Sheet1');
if (ws) {
 console.log(ws.cell('A1').value);
 ws.cell('A1').value = 'Updated!';
 await wb.toFile('output.xlsx');
}

Styling Cells

const headerStyle = wb.createStyle()
 .font({ name: 'Arial', size: 14, bold: true, color: 'FFFFFF' })
 .fill({ pattern: 'solid', fgColor: '4472C4' })
 .alignment({ horizontal: 'center', vertical: 'center' })
 .border({ bottom: { style: 'medium', color: '000000' } })
 .build(wb.styles);
const headers = ['Name', 'Age', 'City'];
headers.forEach((h, i) => {
 const cell = ws.cell(`${String.fromCharCode(65 + i)}1`);
 cell.value = h;
 cell.styleIndex = headerStyle;
});

Formulas

ws.cell('A1').value = 100;
ws.cell('A2').value = 200;
ws.cell('A3').value = 300;
ws.cell('A4').formula = 'SUM(A1:A3)';
ws.cell('B1').formula = 'AVERAGE(A1:A3)';

Merged Cells

ws.cell('A1').value = 'Spans three columns';
ws.addMergeCell('A1:C1');

Column Widths and Row Heights

ws.setColumnWidth(1, 30); // Column A
ws.setRowHeight(1, 40); // Row 1
ws.setRowHidden(5, true); // Hide row 5

Frozen Panes

// Freeze top row
ws.frozenPane = { rows: 1, cols: 0 };
// Freeze first column
ws.frozenPane = { rows: 0, cols: 1 };
// Freeze both
ws.frozenPane = { rows: 1, cols: 1 };

Data Validation

// Dropdown list
ws.addValidation('B2', {
 validationType: 'list',
 formula1: '"Yes,No,Maybe"',
 showDropDown: true,
 prompt: 'Select an option',
 promptTitle: 'Choice',
});
// Number range
ws.addValidation('C2', {
 validationType: 'whole',
 operator: 'between',
 formula1: '1',
 formula2: '100',
 errorTitle: 'Invalid',
 error: 'Enter a number between 1 and 100',
});

Hyperlinks

ws.cell('A1').value = 'Visit Example';
ws.addHyperlink('A1', 'https://example.com', {
 display: 'Visit Example',
 tooltip: 'Opens example.com',
});

Comments

ws.cell('A1').value = 'Hover for comment';
ws.addComment('A1', 'Author Name', 'This is a comment on A1');

Named Ranges

wb.addNamedRange('SalesTotal', 'Data!$A1ドル:$A2ドル');
const range = wb.getNamedRange('SalesTotal');

Document Properties

wb.docProperties = {
 title: 'Sales Report Q4',
 creator: 'Finance Team',
 description: 'Quarterly sales data',
 created: '2026-01-01T00:00:00Z',
};

Rich Text

import { RichTextBuilder } from 'modern-xlsx';
const richText = new RichTextBuilder()
 .bold('Important: ')
 .text('Normal text. ')
 .colored('Red text', 'FF0000')
 .styled('Custom', { bold: true, italic: true, fontSize: 14 })
 .build();

Sheet Conversions

import { aoaToSheet, jsonToSheet, sheetToJson, sheetToCsv } from 'modern-xlsx';
// Array of arrays → rows
const rows = aoaToSheet([['Name', 'Age'], ['Alice', 30]]);
// JSON → rows
const rows = jsonToSheet([{ name: 'Alice', age: 30 }]);
// Rows → JSON
const data = sheetToJson(ws);
// Rows → CSV
const csv = sheetToCsv(ws);

Auto Filter

ws.autoFilter = 'A1:B3';

Page Setup

ws.pageSetup = {
 orientation: 'landscape',
 paperSize: 1,
 fitToWidth: 1,
 fitToHeight: 0,
};

Sheet Protection

ws.sheetProtection = {
 sheet: true,
 selectLockedCells: false,
 selectUnlockedCells: false,
};

Date Handling

import { dateToSerial, serialToDate, isDateFormatCode } from 'modern-xlsx';
dateToSerial({ year: 2026, month: 3, day: 1 }); // 46113
serialToDate(46113); // { year: 2026, month: 3, day: 1 }
isDateFormatCode('yyyy-mm-dd'); // true

Cell Reference Utilities

import { columnToLetter, letterToColumn, decodeCellRef, encodeCellRef } from 'modern-xlsx';
columnToLetter(0); // 'A'
letterToColumn('A'); // 0
decodeCellRef('B3'); // { row: 2, col: 1 }
encodeCellRef(2, 1); // 'B3'

Browser Download

import { writeBlob } from 'modern-xlsx';
const blob = writeBlob(wb);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'output.xlsx';
a.click();
URL.revokeObjectURL(url);

Barcode & QR Generation

import { Workbook, generateBarcode, encodeQR, renderBarcodePNG, initWasm } from 'modern-xlsx';
await initWasm();
const wb = new Workbook();
const ws = wb.addSheet('Barcodes');
// Embed a QR code into the worksheet
ws.cell('A1').value = 'Product QR';
const { drawing, rels, media } = generateBarcode(wb, ws, {
 type: 'qr',
 data: 'https://example.com/product/123',
 anchor: { from: { col: 1, row: 1 }, to: { col: 4, row: 8 } },
});
// Standalone PNG rendering
const matrix = encodeQR('Hello World');
const pngBytes = renderBarcodePNG(matrix, { scale: 4, margin: 2 });

Table Layout Engine

Basic Table

import { initWasm, Workbook, drawTable } from 'modern-xlsx';
await initWasm();
const wb = new Workbook();
const ws = wb.addSheet('Sales');
drawTable(wb, ws, {
 headers: ['Product', 'Region', 'Q1', 'Q2', 'Total'],
 rows: [
 ['Widget', 'North', 45000, 52000, 97000],
 ['Widget', 'South', 38000, 41000, 79000],
 ['Gadget', 'North', 62000, 68000, 130000],
 ['Gadget', 'South', 55000, 59000, 114000],
 ],
 headerColor: '2F5496',
 alternateRowColor: 'D6E4F0',
 freezeHeader: true,
 autoFilter: true,
 columns: [
 { align: 'left', width: 14 },
 { align: 'center', width: 12 },
 { align: 'right', numberFormat: '$#,##0', width: 12 },
 { align: 'right', numberFormat: '$#,##0', width: 12 },
 { align: 'right', numberFormat: '$#,##0', width: 14 },
 ],
});
await wb.toFile('sales-report.xlsx');

JSON Data to Table

import { drawTableFromData } from 'modern-xlsx';
const employees = [
 { name: 'Alice', department: 'Engineering', salary: 95000 },
 { name: 'Bob', department: 'Marketing', salary: 72000 },
 { name: 'Carol', department: 'Design', salary: 88000 },
];
drawTableFromData(wb, ws, employees, {
 headerMap: { name: 'Employee', department: 'Dept', salary: 'Salary' },
 autoWidth: true,
 alternateRowColor: 'F5F5F5',
});

Stacked Tables

const q1 = drawTable(wb, ws, {
 headers: ['Q1 Revenue'],
 rows: [['North: 120ドルK'], ['South: 95ドルK']],
 origin: 'A1',
});
const nextRow = q1.lastDataRow + 2;
drawTable(wb, ws, {
 headers: ['Q2 Revenue'],
 rows: [['North: 135ドルK'], ['South: 102ドルK']],
 origin: `A${nextRow + 1}`,
});

Browser & CDN

Script Tag (IIFE)

<script src="https://cdn.jsdelivr.net/npm/modern-xlsx@0.5.0/dist/modern-xlsx.min.js"></script>
<script>
 (async () => {
 await ModernXlsx.initWasm();
 const wb = new ModernXlsx.Workbook();
 const ws = wb.addSheet('Sheet1');
 ws.cell('A1').value = 'Hello from CDN!';
 ws.cell('B1').value = 42;
 const blob = ModernXlsx.writeBlob(wb);
 const a = document.createElement('a');
 a.href = URL.createObjectURL(blob);
 a.download = 'output.xlsx';
 a.click();
 })();
</script>

Web Worker

import { createXlsxWorker } from 'modern-xlsx';
const worker = createXlsxWorker({
 workerUrl: '/modern-xlsx.worker.js',
});
// Read a file in the worker
const data = await worker.readBuffer(xlsxBytes);
console.log(data.sheets[0].name);
// Write in the worker
const output = await worker.writeBuffer(data);
worker.terminate();

Framework Integration

Edge Runtimes