Skip to content

Home

Jump to bottom
Supun Lakmal Abesekara edited this page Jan 22, 2026 · 2 revisions

Welcome to the Spreadsheet Wiki

Spreadsheet is a privacy-focused, serverless, dynamic spreadsheet web application. Unlike traditional spreadsheets, it requires no database and no user accounts. All data is persisted directly within the URL hash using high-performance compression, making your data portable, shareable, and private.

Navigation

Core Concept

The application follows a "State in URL" philosophy. When you edit a cell, change a color, or add a row, the application minifies the entire grid state, compresses it using LZ-String, and updates the browser's URL fragment (#).

Benefits:

  • Zero Backend: No data is ever stored on a server.
  • Instant Sharing: Sending the link is equivalent to sending the file.
  • Privacy: Your data exists only in your browser history and the links you choose to share.

Key Features

  • Visual Formula Tracing: A unique "Trace Dependencies" tool that draws Bezier curves between formula cells and their data sources.
  • Presentation Mode: Converts your spreadsheet rows into a slide-deck style interface.
  • Visual Functions: Support for rendering Progress Bars, Tags, and Star Ratings directly via formulas.
  • Client-Side Encryption: Optional AES-GCM 256-bit encryption with password protection.
  • Import/Export: Support for CSV and raw JSON (AI-Bridge) for easy data manipulation via LLMs.
  • Responsive UI: Includes a mobile-friendly grid and a QR code generator for seamless cross-device handoff.

Formula Reference

The app supports a custom-built formula engine. All formulas must start with =.

1. Arithmetic Expressions

Standard math with operator precedence (* / before + -) and parentheses.

  • Operators: +, -, *, /
  • References: =A1 + B2 * (C1 / 10)

2. Range Functions

Function Syntax Description
SUM =SUM(A1:B10) Adds all numeric values in the specified range.
AVG =AVG(A1:A5) Calculates the mean of non-empty numeric cells.

3. Visual Functions (Unique)

These render interactive UI elements instead of plain text.

  • PROGRESS: =PROGRESS(value, [max], [label], [color])
    • Example: =PROGRESS(B2, 100, "Completion", "green")
  • TAG: =TAG(text, color)
    • Example: =TAG("High Priority", "#ef4444")
  • RATING: =RATING(value, [max_stars])
    • Example: =RATING(4, 5)

Data Architecture & URL Persistence

To keep URLs as short as possible, the state is minified using the following schema:

Key Full Name Description
r Rows Total number of rows.
c Cols Total number of columns.
d Data Sparse array of values: [row, col, "value"].
f Formulas Sparse array of formulas: [row, col, "=..."].
s Styles Sparse array of styles: [row, col, {style_obj}].
t Theme "dark" or "light".

Sparse Array Strategy

The app uses triplets for data and styles. Instead of saving a 100x100 grid (10,000 cells), it only records cells that actually contain data.

  • Example: [1, 0, "Hello"] means Row 2, Column A contains "Hello".

Security & Encryption

Password Protection

Users can encrypt their spreadsheets via the Lock tool.

  • Algorithm: AES-GCM 256-bit.
  • Key Derivation: PBKDF2 with 100,000 iterations.
  • Storage: The encrypted payload is prefixed with ENC: and stored in the URL. Without the password, the data is cryptographically unreadable.

Sanitization

To prevent XSS (Cross-Site Scripting), the app uses a DOMParser-based whitelist approach (security.js). It strips dangerous attributes like onclick or <script> tags while preserving basic formatting like <b>, <i>, and <span> with safe CSS.

Live Collaboration (P2P)

The app features a serverless real-time collaboration mode using WebRTC via PeerJS.

  1. Host: One user clicks "Start Hosting" and receives a Peer ID.
  2. Join: A second user enters that ID to connect directly.
  3. Sync: Changes are broadcasted over a DataChannel. Since it is P2P, no data ever passes through a central spreadsheet server.

Developer Guide

Project Structure

/modules
  ├── constants.js          # App limits and config
  ├── formulaManager.js     # Tokenizer and Evaluator
  ├── dependencyTracer.js   # SVG drawing logic
  ├── urlManager.js         # Minification and LZ-compression
  ├── p2pManager.js         # PeerJS implementation
  └── ...
script.js                   # Main entry point & event orchestration
styles.css                  # Custom grid and theme variables

Installation

  1. Clone the repository.
  2. Open index.html via a local server (e.g., Live Server in VS Code) to allow ES6 modules to load correctly.
  3. No npm install is required as dependencies (PeerJS, LZ-String, QRCode) are bundled in the lib/ folder.

Clone this wiki locally