Architecture¶

OpenSuite is a pure vanilla JavaScript application with zero framework dependencies. The entire suite -- OpenSheets (spreadsheets), OpenDocs (documents), and OpenPresentation (presentations) -- runs client-side in the browser. No server-side processing is needed; all data is stored in the browser's localStorage and can be shared via base64-encoded URLs.

This page describes the module structure and how the pieces fit together.

High-Level Overview¶

index.html
js/
  main.js              -- entry point, bootstraps all modules
  models/              -- data model layer
  engine/              -- formula parsing and evaluation
  commands/            -- undo/redo command system
  ui/                  -- all UI components
  io/                  -- storage and import/export
  clipboard/           -- clipboard and paste special
  autofill/            -- autofill/drag-fill logic

All modules are ES modules loaded via dynamic import() in main.js. A central APP object holds references to every initialized module and is passed into each constructor for cross-module communication. An EventBus provides a lightweight publish-subscribe system for decoupled events.

Models¶

The data layer lives in js/models/ and contains three classes:

Module	Purpose
`Workbook`	Top-level container. Holds an array of `Sheet` instances and workbook-level metadata.
`Sheet`	Represents a single sheet. Stores a 2D map of `Cell` objects, column widths, row heights, and sheet-level settings.
`Cell`	Represents a single cell. Stores raw value, formula, computed value, formatting, validation rules, and comments.

Engine¶

The formula engine in js/engine/ processes formulas through a pipeline:

Raw formula string
    --> Tokenizer  (lexical analysis into tokens)
    --> Parser     (tokens into an AST)
    --> Evaluator  (walks the AST, resolves references, computes result)

Module	Purpose
`Tokenizer`	Splits a formula string into tokens (numbers, strings, cell references, operators, function names, parentheses).
`Parser`	Builds an abstract syntax tree (AST) from the token stream. Handles operator precedence, function calls, and range expressions.
`Evaluator`	Recursively evaluates the AST. Resolves cell references via the `DependencyGraph`, calls built-in functions, and handles errors.
`DependencyGraph`	Tracks which cells depend on which other cells. When a cell value changes, it determines the minimal set of cells that need recalculation and provides a topological evaluation order.
`Functions`	Registry of 200+ built-in functions organized by category: math, text, logical, lookup, date/time, statistical, financial, engineering, array, web, chart, and database.

Commands¶

js/commands/Commands.js implements a command pattern for undo/redo. Every user action that modifies data (cell edits, formatting changes, row/column operations) is wrapped in a command object with execute() and undo() methods. The CommandManager maintains undo and redo stacks.

UI Components¶

All UI modules live in js/ui/. Each class receives the APP object and manages a specific part of the interface.

Core UI¶

Module	Purpose
`Grid`	Renders the spreadsheet grid (cells, headers, gridlines). Handles scrolling and viewport virtualization.
`Selection`	Manages cell/range selection, multi-select, and visual selection indicators.
`Editor`	Inline cell editor and formula bar input handling.
`Toolbar`	Formatting toolbar -- font, size, bold, italic, colors, alignment, borders, number format, merge.
`SheetTabs`	Sheet tab bar at the bottom. Add, rename, delete, reorder, and switch sheets.
`ContextMenu`	Right-click context menu for cells, rows, and columns.
`StatusBar`	Bottom status bar showing SUM, AVERAGE, COUNT of the current selection and cell info.
`FormatDialog`	Dialog for detailed cell formatting (number, alignment, font, border, fill).

Feature Modules¶

Module	Purpose
`ChartManager`	Create and manage charts (bar, line, pie, scatter, area).
`PivotTable`	Pivot table builder with drag-and-drop field configuration.
`ConditionalFormatting`	Rule-based formatting: highlight rules, color scales, data bars.
`DataValidation`	Cell validation rules (number ranges, lists, dates, custom formulas).
`FilterSort`	Column filtering and multi-column sorting.
`FindReplace`	Find and replace across cells with regex support.
`AdvancedSearch`	Structured search with field-level criteria.
`GoalSeek`	Goal seek / what-if analysis solver.
`DescriptiveStats`	Compute descriptive statistics for a data range.
`TextToColumns`	Split cell content by delimiter into multiple columns.
`RemoveDuplicates`	Identify and remove duplicate rows.
`FormulaAuditing`	Trace precedents and dependents, evaluate formula step by step.
`ProtectionManager`	Sheet and cell protection with password support.
`PrintLayout`	Print-ready layout with page breaks, headers, and footers.
`ThemeManager`	Light/dark theme switching.
`HelpPanel`	In-app help and documentation viewer.
`ShortcutsPanel`	Keyboard shortcut reference overlay.
`HowTo`	Step-by-step interactive tutorials.
`ScriptEngine`	Built-in JavaScript scripting environment for automation.
`QueryBuilder`	SQL-like query interface for filtering and transforming data.
`FormBuilder`	Build data entry forms linked to sheet data.

Database-Style Modules¶

These modules provide MS Access-inspired database functionality:

Module	Purpose
`TableDesigner`	Define structured tables with typed columns, primary keys, and constraints.
`VisualQueryDesigner`	Drag-and-drop visual query builder with joins, filters, and aggregation.
`ReportDesigner`	Design printable reports with grouping, sorting, and computed fields.
`RelationshipManager`	Define and visualize relationships between tables.
`MacroSystem`	Record and run macros -- sequences of automated actions.
`NavigationPanel`	Sidebar navigation for tables, queries, forms, and reports.
`DashboardBuilder`	Build interactive dashboards with charts, KPI widgets, and data tables.

I/O¶

The js/io/ module handles persistence and data exchange:

Module	Purpose
`URLStorage`	Encode/decode the entire workbook state into a URL hash for sharing.
`SupabaseStorage`	Cloud persistence via a Supabase backend (save, load, list workbooks).
`CSVHandler`	Import from and export to CSV format.
`ImportExportManager`	Unified import/export supporting Excel (.xlsx), JSON, HTML, and CSV formats.

Clipboard and Autofill¶

Module	Path	Purpose
`Clipboard`	`js/clipboard/`	Copy, cut, paste cells with formatting. Supports system clipboard integration.
`PasteSpecial`	`js/clipboard/`	Paste values only, formulas only, formatting only, transpose, and other paste-special modes.
`AutoFill`	`js/autofill/`	Drag-fill handle logic. Detects number sequences, date patterns, and custom series to auto-extend data.

Data Flow¶

The user types into a cell via the Editor.
The CommandManager wraps the edit in a command and executes it.
The Cell model is updated with the new raw value or formula.
The DependencyGraph identifies all downstream dependent cells.
The Evaluator recalculates affected cells in topological order.
The Grid re-renders the changed cells.
The StatusBar updates summary statistics for the current selection.
The EventBus emits change events so other modules (charts, conditional formatting, etc.) can react.