Implementing Online Word Document Editing in React with Spire.WordJS

Amid the wave of digital transformation, more and more enterprises and developers are moving document processing capabilities to pure front-end architectures to improve application responsiveness, security, and usability. Traditional Word document editing often relies on local Office software or complex back-end services. However, with the maturation of web technologies, creating, editing, and exporting Word documents directly in the browser has become a reality.

This article introduces Spire.WordJS, a powerful front-end document editing control, and walks you through integrating it into a React project to quickly build a fully functional online Word document editor.

What is Spire.WordJS?

Spire.WordJS is a pure front-end online Word document editor component from E-ICEBLUE. Built on WebAssembly technology, it requires no installation of Microsoft Office and no back-end dependencies , enabling a complete document processing workflow—from opening and editing to exporting—entirely within the browser.

As a core component of the Spire.OfficeJS suite, Spire.WordJS covers viewing, editing, creating, and converting capabilities for Word, Excel, PowerPoint, PDF, and other formats.

Key Features

1. Visual Editing for Team Efficiency

Real-time display of editor cursors and comments, along with built-in comment resolution workflows, makes team collaboration more efficient.

2. High-Fidelity Word Compatibility

Using a mature parsing engine, it preserves the original document’s layout, styles, tables, headers, footers, and footnotes to the greatest extent possible, ensuring documents open without the need for additional manual adjustments.

3. Advanced Formatting Editor

Offers rich style settings, including headings, body text, quotes, and support for custom style templates, enabling one-click application of corporate templates.

4. Enterprise-Grade Security and Permission Management

Supports role‑based access control, allowing users to be assigned read‑only, edit, or comment permissions; also supports static file encryption storage.

5. Intelligent Document Annotation and Markup

Supports highlighting, underlining, strikethrough, comments, and tag management, making it easy for teams to mark key content during review or proofreading.

6. Rich Table and Graphic Editing

Allows insertion and editing of tables, images, and graphical objects, with adjustable sizes, styles, and layouts.

7. Cross-Platform Access and Cloud Storage

Supports both web and desktop access, enabling cloud storage and synchronization of documents.

Why Choose Spire.WordJS?

• Enterprise‑grade Compatibility – Highly compatible with Microsoft Office, maximizing the preservation of document formatting and styles.
• No Installation, Ready to Use – Pure web experience, supporting all major browsers.
• Extensible APIs and Integration Capabilities – Provides comprehensive REST APIs and SDKs for easy integration into existing systems.
• High Availability and Security Compliance – Supports multi‑region deployment and automated backup strategies.
• Flexible Solutions and Customization – Offers various licensing and usage plans with on‑demand customization.

Integrating Spire.WordJS in React

Now, let’s go step by step through integrating Spire.WordJS into a React project.

Step 1: Install Node.js

First, download and install Node.js. After installation, verify the versions in the command line:

node -v
npm -v

Step 2: Create a React Project with Vite

Run the following command in your desired directory to create the project:

npm create vite@latest my-officejs-app -- --template react

Step 3: Install Dependencies

Navigate to the project directory and install the routing library:

cd my-officejs-app
npm install react-router-dom

Step 4: Integrate Spire.OfficeJS

Download the Spire.OfficeJS product package.

Windows environment : Double‑click to run the run_genallfonts.bat file inside the extracted package.

Linux environment : Run sh run_genallfonts.sh start.

After execution, a fontsweb folder will appear inside the web directory.

Inside the React project’s public folder, create a new folder named spire.cloud and copy the entire web folder (including fontsweb) into it.

Step 5: Build the File Upload and Editor Pages

App.jsx – Routing and State Management

import { createContext, useContext, useState } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './Home';
import Editor from './Editor';

const FileContext = createContext();
export const useFileStore = () => useContext(FileContext);

function FileProvider({ children }) {
  const [file, setFile] = useState(null);
  const [fileUint8Data, setFileUint8Data] = useState(null);
  return (
    <FileContext.Provider value={{ file, setFile, fileUint8Data, setFileUint8Data }}>
      {children}
    </FileContext.Provider>
  );
}

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/editor', element: <Editor /> },
]);

function App() {
  return (
    <FileProvider>
      <RouterProvider router={router} />
    </FileProvider>
  );
}

export default App;

Home.jsx – File Upload Functionality

Implements drag‑and‑drop upload, local file selection, and conversion of the file to Uint8Array using FileReader:

import { useRef, useEffect } from 'react';
import { useFileStore } from './App';
import { useNavigate } from 'react-router-dom';

function Home() {
  const { setFile, setFileUint8Data } = useFileStore();
  const navigate = useNavigate();
  const fileInput = useRef();

  useEffect(() => {
    // Prevent default drag‑and‑drop behavior
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
      document.addEventListener(eventName, preventDefaults, false);
    });
    document.addEventListener('drop', handleDrop, false);
  }, []);

  const preventDefaults = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = async (e) => {
    const file = e.dataTransfer?.files[0];
    if (!file) return;
    const uint8Data = await readFileAsUint8Array(file);
    setFile(file);
    setFileUint8Data(uint8Data);
    navigate('/editor');
  };

  const readFileAsUint8Array = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        const arrayBuffer = reader.result;
        resolve(new Uint8Array(arrayBuffer));
      };
      reader.onerror = reject;
      reader.readAsArrayBuffer(file);
    });
  };

  return (
    <div>
      <h2>File Upload</h2>
      <p>Drag and drop a file into the browser or</p>
      <input type="file" ref={fileInput} onChange={handleDrop} />
    </div>
  );
}

export default Home;

Note : FileReader is used to read local files, and Uint8Array is the binary format expected by OfficeJS’s WebAssembly.

Editor.jsx – Integrating the Editor

import { useRef, useEffect } from 'react';
import { useFileStore } from './App';
import { useNavigate } from 'react-router-dom';

function Editor() {
  const { file, fileUint8Data } = useFileStore();
  const navigate = useNavigate();
  const config = useRef({});
  const originUrl = window.location.origin;

  useEffect(() => {
    if (!file) {
      navigate('/');
      return;
    }
    loadScript();
  }, []);

  const loadScript = () => {
    const script = document.createElement('script');
    script.setAttribute('src', '/spire.cloud/web/editors/spireapi/SpireCloudEditor.js');
    script.onload = initEditor;
    document.head.appendChild(script);
  };

  const initEditor = () => {
    initConfig();
    const editor = new SpireCloudEditor.OpenApi('iframeEditor', config.value);
    window.Api = editor.GetOpenApi();
  };

  const initConfig = () => {
    config.value = {
      fileAttrs: {
        fileInfo: {
          name: file.name,
          ext: getFileExtension(),
          primary: String(new Date().getTime()),
          creator: 'User',
          createTime: new Date().toLocaleString()
        },
        sourceUrl: originUrl + '/files/' + file.name,
        createUrl: originUrl + '/open',
        mergeFolderUrl: '',
        fileChoiceUrl: '',
        templates: {}
      },
      user: {
        id: 'uid-1',
        name: 'User',
        canSave: true
      },
      editorAttrs: {
        editorMode: 'edit',
        editorWidth: '100%',
        editorHeight: '100%',
        editorType: 'document',
        platform: 'desktop',
        viewLanguage: 'zh',
        isReadOnly: false,
        canChat: true,
        canComment: true,
        canReview: true,
        canDownload: true,
        canEdit: true,
        canForcesave: true,
        embedded: {
          saveUrl: '',
          embedUrl: '',
          shareUrl: '',
          toolbarDocked: 'top'
        },
        useWebAssemblyDoc: true,
        useWebAssemblyExcel: true,
        useWebAssemblyPpt: true,
        spireDocJsLicense: '',
        spireXlsJsLicense: '',
        spirePresentationJsLicense: '',
        spirePdfJsLicense: '',
        serverless: {
          useServerless: true,
          baseUrl: originUrl,
          fileData: fileUint8Data
        },
        events: {
          onSave: onFileSave
        },
        plugins: {
          pluginsData: []
        }
      }
    };
  };

  const getFileExtension = () => {
    const filename = file.name.split(/[\\/]/).pop();
    return filename.substring(filename.lastIndexOf('.') + 1).toLowerCase() || '';
  };

  const onFileSave = (data) => {
    console.log('Save data:', data);
    // Implement save logic here: send to server or download file, etc.
  };

  return <div id="iframeEditor"></div>;
}

export default Editor;

Configuration notes :

• editorType: Set to "document" for a Word document editor.
• viewLanguage: Can be "zh" or "en".
• useWebAssemblyDoc: Enables WebAssembly for better performance.
• serverless: Serverless mode uses file data directly without a back‑end server.

main.jsx – Entry Configuration

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(<App />);

Note : StrictMode causes the editor to render twice; it is recommended to disable it in production.

vite.config.js – Port Configuration

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 8050
  },
  plugins: [react()]
});

Step 6: Run the Project

npm run dev

Visit http://localhost:8050 to experience the online Word document editing functionality.

Conclusion

Through the steps above, we have successfully integrated Spire.WordJS into a React project and built a fully functional online Word document editor. The entire process requires no installation of Microsoft Office and no complex back‑end services .

With its high‑fidelity compatibility, rich editing features, enterprise‑grade security controls, and flexible integration capabilities , Spire.WordJS provides developers with a lightweight, efficient, and easy‑to‑integrate document processing solution. Whether you are building an online document platform, knowledge base, educational platform, or various management back‑ends, Spire.WordJS helps you quickly implement document editing capabilities.