JavaScript Spreadsheet Designers
Quickly Design JavaScript Spreadsheets Using the SpreadJS Designers
JavaScript developers can use the Desktop Spreadsheet Designer Application to easily design workbooks and templates with a full-featured interface that supports all SpreadJS capabilities. Users can define cell types and formats, add data, create charts, insert sparklines, and build complex spreadsheet layouts, then save to Spread (.sjs) or Excel (.xlsx) formats for use in their applications.
Developers can also embed these same capabilities directly into their apps with the Designer Ribbon Component Add-On, including the ribbon UI, formula bar, status bar, side panel, and context menus—giving end-users the ability to create and customize spreadsheets in-app.
For developers working in modern environments, the XLSX Editor for VS Code offers a convenient way to open and edit spreadsheet files directly within the editor.
JavaScript Spreadsheet Designer Ribbon Component
The SpreadJS Designer Ribbon Component is a separate optional deployment add-on package that provides JavaScript Developers the ability to embed the same UI components and capabilities of the Desktop Spreadsheet Designer in their JS applications. This allows their end-users to easily customize spreadsheets using a familiar UI ribbon, formula bar, status bar, side panel, and context menus directly from their apps interface.
The SpreadJS Designer Ribbon Component is also fully customizable, so developers can add, remove, and re-arrange buttons, tabs, and designer sections by adding, removing, or moving corresponding entries in the configuration file.
To interact with and customize the Designer Ribbon Component, open the downloaded SpreadJS zip file and navigate to the “Designer\Designer Component” folder, for example "\Designer\Designer Component\samples\purejs\index.html”.
Offer Familiar Spreadsheet UI In JavaScript Apps
The SpreadJS Designer Ribbon Component provides users the flexibility to customize a spreadsheet easily in a few clicks. The designer component includes the ribbon, formula bar, status bar, side panel, and context menu. The built-in dialogs and options in the SpreadJS Designer Ribbon Component can be used to define minute details like hyperlink's link color, cell padding, spreadsheet settings, etc.
Full Framework Support
The SpreadJS Designer Ribbon Component includes Angular, React, and Vue wrappers, to embed the designer into your projects easily. Using the Designer in these frameworks is as simple as referencing the required node packages, importing the required modules, and implementing the required framework script code to initialize the designer.
Customize The JavaScript Designer Ribbon
The Designer Ribbon Component provides the DefaultConfig field which contains the default configuration of designer components in a command tree structure. Using this, developers can make desired customizations in the config structure and then, pass the new config structure when initiating the designer component.
Pre-Defined Workbook Templates
Initialize the Designer with pre-defined workbook templates using templatesConfig, enabling controlled starting states, reusable layouts, and structured workflows instead of blank spreadsheets. This allows developers to load templates from JSON, .sjs, .ssjson, or Excel formats (including .xltx) and manage them dynamically at runtime for consistent application behavior.
Optional License Upgrade for PivotTable Support
SpreadJS offers an optional license add on to include support for PivotTables. A PivotTable Enabled Designer Ribbon Component will show the user the Pivot Area, Pivot Panel, and a PivotTable Analyze Tab on the UI ribbon to easily create the PivotTable and analyze data.
Bind File Import Events
Developers can add functions in the SpreadJS Designer Ribbon Component during file import operations. This allows them to perform complex calculations, data transformations, and validations on the imported spreadsheet data. All-in-all creating more robust, efficient, and tailored solutions for data processing and analysis.
Add a Custom Component
The Designer Ribbon Component supports adding custom components, such as a specialized chart or a custom data input control, to enhance the functionality of the designer. By adding this custom component, you can provide users with advanced data visualization capabilities or enable them to input data in a more intuitive and tailored manner.
Command Palette
Quickly trigger actions with the Designer Component's Command Palette—just like VS Code. Search and run formatting, layout, and data commands using simple keystrokes (Ctrl/Cmd + P).
Desktop Spreadsheet Designer Application
Easily design JavaScript spreadsheets with SpreadJS’s Desktop Spreadsheet Designer WYSIWYG spreadsheet designer. Quickly design complex spreadsheet layouts using a familiar UI. You can also load existing Excel .xlsx template files and start being productive immediately. Supports creating templates that can populate data at run-time. Export your finished spreadsheet to .ssjson, or .xlsx to load into your SpreadJS application.
To install the Spreadsheet Designer App, open the downloaded SpreadJS zip file, navigate to the “Designer\Designer Runtime” folder, and select “SpreadJS-Designer-x-x-x” application.
Design Spreadsheets with Familiar UI
SpreadJS’s Desktop Designer Application provides users with the flexibility to customize a spreadsheet easily in a few clicks. The designer includes ribbon, formula bar, status bar, side panel, and context menu. The built-in dialogs and options can be used to define minute details like hyperlink's link color, cell padding, spreadsheet settings, etc.
Open and Save Files
The Designer supports opening and saving existing Excel-formatted (.xlsx), comma-delimited (.csv), and Spread files (.ssjson) files. While saving files, SpreadJS remembers the sheet view position whenever a workbook is saved. Just like in Excel, the next time you open the same workbook, it will automatically scroll to the position where you left off previously before saving it.
Printing JavaScript Spreadsheets
SpreadJS Designer provides a print menu that lets you preview and print all or part of a worksheet or workbook with the information you need. The print menu is accessed in the same "File" window as the New, Import, and Export options.
Create Range Template Cells
The Range Template cell type allows custom rendering of cell data based on a cell range template. Data is bound to the template and rendered into the cell. Create custom rendering, such as card view, multi-row, and custom KPI blocks all without extra code.
Excel-Like Context Menus
SpreadJS Designer includes an Excel-like context pop up menu for interacting with the sheet when the mouse is right-clicked on the control.
Easily Create Table Slicers
Similar to filters, Excel-like slicers offer an intuitive visual way to filter your spreadsheet data. You can create a slicer for a table using the SpreadJS Designer.
XLSX Editor VS Code Extension
The SpreadJS XLSX Editor for Visual Studio Code brings full spreadsheet design capabilities directly into your development workflow. Open and edit Excel files (.xlsx, .xlsm, .xltx, .csv), along with SpreadJS formats like .sjs and .ssjson, without leaving your editor. With a simple “Open with SpreadJS” action, developers can quickly preview, modify, and save spreadsheet files as part of their existing projects.
Built specifically for the VS Code environment, the extension integrates with the editor’s file system, themes, and command palette. It supports password-protected Excel files, automatic light/dark theme adaptation, customizable ribbon modes, and localized language settings—making it easy to design and manage spreadsheets alongside your application code.
What's New in SpreadJS v19.1
SpreadJS v19.1 is available! This release offers several new enhancements and features to its JavaScript spreadsheet component and new optional add-ons, including:
- NEW! VS Code Spreadsheet Editor – Open, edit, and design spreadsheets directly in VS Code
- Faster Custom Functions with Calc Worker – Run logic off the UI thread for up to 3× performance gains
- Excel-Style What-If Analysis – Add data tables and Goal Seek for advanced scenario modeling
- Richer Cell & Formatting Features – Support picture-in-cell, named templates, and enhanced formatting
- Enhanced Data & Pivot Workflows – Improve PivotTables, TableSheet sorting, and Data Manager usability
- Improved UI/UX Experience – Deliver cleaner interfaces with auto scrollbars, Excel-like controls, and drag-and-drop interactions
- Expanded Collaboration Features – Extend real-time editing across more data and workflow scenarios
- Updated Framework Support – Add compatibility for Angular 21 and Next.js 16
SpreadJS Media and Content
Award-Winning Products and First-Class Support
"I have been using a various form of Spread back to the COM days. Spread is the most reliable spreadsheet that retrieves and stores data, whether interacting with a database or simply an Excel file. Try it out, and you will not go back to any other control"
TRUSTED CUSTOMER
"Great support through evaluation process, Spread is my favorite development add-in, adds great, high value capabilities to applications!"
TRUSTED CUSTOMER
"Excellent Products. I have been using their products for around 15 years. Always there to help."
TRUSTED CUSTOMER
 |
 |
MESCIUS Spread is Trusted by the World's Leading Companies
