JavaScript Spreadsheet SDK: How to Embed Excel-Like XLSX Editing into Your React App

Data sovereignty and user experience are everything. Forcing your users to leave your app to edit a spreadsheet is a risky move. Whether they are downloading a sensitive financial report to open it in Excel or jumping over to a shared Google Sheet, you’ve lost control of the workflow, and potentially the security of that data.

Embedding a professional spreadsheet editor, like the Apryse Spreadsheet Editor, directly into your web application keeps the data in-house and the user focused.

Google Sheets and Excel Online are powerful, but they work only until they don't. A dedicated JavaScript SDK gives you the control they can't:

Custom Branding: You aren't stuck with third-party logos or UI breaking your app's immersion.

Offline Support: A dedicated SDK, like the Apryse Web SDK, allows for in-memory editing that doesn't die the moment the Wi-Fi drops.

Data Sovereignty: Crucial for banks or healthcare; files are processed in the browser, not on an external server.

Accessibility: Professional SDKs often come with WCAG 2.2-AA compliance out of the box.

You might think that a data grid, like AG Grid, can handle all your spreadsheet editing needs like a spreadsheet editor does, but in reality, they just can’t compete. They solve different problems:

Data Grids: Designed to render JSON data. They are great for sorting and filtering database records, but they don't handle .xlsx files very well, especially complex workbooks.

Spreadsheet SDKs: These are built for .xlsx files. They support cell merging, complex formula engines (SUMIF, VLOOKUP), and multiple tabs. If your users need to upload an Excel file, change a formula, and export it back out; you need an SDK.

Most enterprise apps manage a mixture of document types such as contracts (PDF), letters (Word), and reports (Excel). Using separate SDKs for each means multiple dependencies and inconsistent UI.

The Apryse Spreadsheet Editor (a WebViewer add-on) handles all three in one component. Since Summer 2025, it has supported full client-side editing, performing all operations in memory via WebAssembly. This ensures sensitive data, like financial proposals or compliance checklists, never leaves the client’s machine. It even supports chart rendering and editing, so users can refine data points and see visual updates in real-time.

Financial Proposals: Banks can present Excel-based proposals safely within their portals without sensitive data leaving the browser.

Compliance Checklists: Users can view and edit templates without file downloads or format breakage.

Collaborating on Reports: Generate spreadsheets for client reviews without users having to switch tools.

Embedding a spreadsheet editor into your React app is a straightforward process. The engine is entirely client-side, meaning you can load files from local storage or remote URLs.

For a quick reference of the whole set up, check out the React with Vite video for Spreadsheet Editor 11.10+. It shows the integration of the Apryse WebViewer with Spreadsheet Editor enabled, all within a React project.

Note: If you are using Vite 8, see our blog on how to handle an error when trying to access WebViewer.

Before we start setting up Spreadsheet Editor, we need to do some groundwork for our project:

Now that we’ve done that, we can start our project.

First, we need to create the project.

1. On the command line, switch to the folder where you want your new project to sit.

2. Run the following on the command line:

3. Next, complete the following tasks from the command line during project creation:

a. Change the default Project name to a project name of your choice.

b. Select React for your framework.

c. Select JavaScript for your variant.

Enter the following on the command line to navigate into your new project, replacing <project-name> with the name you chose:

1. Run the following command on the command line, from your React project directory:

2. Then run the project with this command:

Now we can start editing the code in the files using Visual Studio Code as our editor.

Let’s install vite-plugin-static-copy so that when we install WebViewer, all the static assets that are required will be copied over.

Let’s also edit the vite.config file to specify where to copy the files from and to. After adding the necessary code, the vite.config file should look like this:

1. To install WebViewer, run the following command:

2. Now we’ll set up our CSS files. First, delete all the contents from the app.css and index.css files.

Note: Don't delete the files completely in case you want to add your own CSS later.

3. Next, let’s modify the app.css file to specify the height of the webviewer class. Your code for this file should now look like this:

1. In the app.jsx file, delete most of the code so that your file looks like this:

2. Now we’ll add some code back into the app.jsx file to import WebViewer and enable Spreadsheet Editor. The file should now look like this:

And now we have a React app with Spreadsheet Editor running and able to view and edit spreadsheets.

The most important line of all the code above is:

This single line of code transforms your app from a PDF editor into a spreadsheet editor, opening up a world of new functionality.

There’s a wide range of modifications you can now make to a spreadsheet including changes to sheets, rows and columns, individual or groups of cells, formulas, and more. Check out our Spreadsheet Editor - Edit Mode page for examples with code.

What file types are supported?

The editor is purpose-built for high-fidelity .xlsx viewing and editing.

Does this work on mobile?

Currently, the Spreadsheet Editor add-on is not supported on mobile browsers due to the complexity of the grid interactions.

How does client-side editing improve security?

Because it uses WebAssembly (WASM), the file is never uploaded to a third-party server for processing.

Is search and replace available?

Yes. Developers can perform search and replace programmatically across the entire workbook.

As we’ve seen in this blog, adding spreadsheet editing capabilities to an app is easily done using the Apryse Web SDK and Spreadsheet Editor add-on.

Choosing a Spreadsheet Editor SDK is about maintaining the integrity of your users' data. By bringing these capabilities in-house, you reduce workflow interruptions and ensure your sensitive data stays exactly where it belongs: inside your application.

Check out our Spreadsheet Editor demo or get started with the Apryse Web SDK.

For support or sales questions, you can contact our sales team.