DocumentationServerExcel like app

Build an Excel-like Application

ULTIMATE

intrasheets is an Excel-like interface packaged as a library: ribbon, formula bar, sheet tabs, backstage, status bar and an AI assistant, on top of Jspreadsheet and its extensions. Connected to Jspreadsheet Server, it becomes a private collaborative spreadsheet application inside your product.

Try the Intrasheets demo

Architecture

browser                                  your infrastructure
┌──────────────────────────┐            ┌───────────────────────────────┐
│ your page                │  socket.io │ @jspreadsheet/server          │
│   intrasheets (library)  │───────────▶│   + server-api   (REST)       │──▶ your database
│   your login, your UI    │  REST /api │   + server-agent (AI chat)    │
└──────────────────────────┘───────────▶│   + your routes (login, list) │──▶ model provider
                                        └───────────────────────────────┘

The library renders the interface and talks to the server. Your page owns the login, the routes and the layout; your server owns the documents, the identity checks and the storage.

The library

npm install intrasheets

import intrasheets from 'intrasheets';
import 'intrasheets/dist/style.css';

Or with a script tag: https://cdn.jsdelivr.net/npm/intrasheets/dist/index.min.js and .../dist/style.css. The script build is self-contained and exposes the global intrasheets; the ES build keeps the Jspreadsheet bundle and its few dependencies as packages.

intrasheets(options)

Configures the library. Call it once, before rendering.

intrasheets.load(element, options)

Renders one document. Returns a promise of the worksheets, as jspreadsheet() returns them, and rejects when the document does not exist or the token cannot open it.

intrasheets.list(element, options)

Renders the user's document list with a "Blank workbook" card and XLSX upload. Takes width and height.

Inside a page

• Without width and height the shell fills the container the page gives it.
• Menus and dialogs float over the page; the backstage (File) stays inside the container.
• The Material Symbols icon font is added to the page when it is not already there.
• The library sets no global styles on html or body.

What the server provides

Besides the realtime connection, the library calls these routes on the REST base:

The document list is an application concern, so you add it with the extension API:

const routes = function(actions) {
    actions.list = {
        get: async function(Server) {
            if (! this.authQuery.token) {
                this.code = 401;
                this.result = { error: 'authentication required' };
                return;
            }
            this.result = await Server.options.list(this.authQuery) || [];
        },
    };
};

const application = function() {};
application.license = function(license, server) {
    server.options.extensions.api.setAction(routes);
};

server({
    // ...
    list: async (auth) => adapter.list(auth),
    extensions: { api, application, agent },
});

Authentication

The token you pass in client.token reaches every server hook as auth.token. A typical setup:

• Your login issues a JWT whose sub is the user.
• beforeLoad opens a document to its owner, to invited users, or to everyone when it is public.
• beforeChange refuses read-only users.
• The adapter stores the creator as the owner.

const getUser = (auth) => {
    try { return jwt.verify(auth.token, process.env.JWT_SECRET); } catch (e) { return null; }
};

server({
    beforeConnect: async () => true,                  // runs on every REST call: gate documents below
    beforeLoad: async (guid, auth) => await level(guid, getUser(auth)) !== false,
    beforeChange: async (guid, changes, auth) => await level(guid, getUser(auth)) >= 1,
    // ...
});

beforeConnect runs on every REST request, including your login route, so keep it open and put the document rules in beforeLoad and beforeChange. See Authentication and Sharing & privacy.

The AI assistant

With agent: true, the shell shows an assistant button that opens a chat calling the AI agent. On the server, install @jspreadsheet/server-agent, set CLAUDE_API_KEY, and add agent to the extensions. Before opening it to users, set budgets and usage tracking: when your allow hook refuses a prompt, the chat shows your message.

The reference application

github.com/intrasheets/demo is a complete application built only from published packages: a React front end, the server and MongoDB in Docker.

git clone https://github.com/intrasheets/demo.git intrasheets-demo
cd intrasheets-demo
cp .env.example .env      # your Jspreadsheet license
docker compose up

Its README has step-by-step instructions for people and for AI coding agents, with the commands to verify each step.

Production notes

• Serve your page as static files and the server on its own origin, or proxy /socket.io and /api to it. With a path prefix, set client.path and client.api. See Nginx.
• Replace the demo login with your identity provider; keep issuing tokens whose subject is the user.
• Configure images to S3 through the API extension so pictures do not live inside documents. See Images & media.
• Pin the library version in production and upgrade deliberately.