# SpreadJS Designer Component

An explanation of the SpreadJS Deisgner component, which provides UI to customize the spreadsheet easily with a few clicks, including built-in dialogs, UI, and links to documentation topics

## Content

SpreadJS provides a set of designer components that can be embedded in your web application in addition to the spreadsheet component. These components provide you the flexibility to customize a spreadsheet easily in a few clicks. The designer components include ribbon, formula bar, status bar, side panel, and context menu. These components can also be embedded to React, Angular, or Vue frameworks by using the respective wrappers.
Please note that this is separate from the [SpreadJS Designer application](/spreadjs/docs/spdesigner) that can be installed on your machine and allows you to customize the spreadsheet templates.
The built-in dialogs and options in SpreadJS Designer Component can be used to define minute details like hyperlink's link color, cell padding, spreadsheet settings, etc. You can also customize the designer components by adding new buttons or tabs or customizing the existing ones.

> **Note:** SpreadJS Designer Component requires a separate deployment license to deploy this functionality in your own application(s). For more information on licensing, refer [Getting Started](/spreadjs/docs/spreadjs-designer-component/getting-started-designer).

The below image shows the Designer Component integrated with a blank spreadsheet component.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260401.57847a.png?width=1000)
To learn more about the Designer Component, refer to the following topics:

| **Topic** | **Content** |
| ----- | ------- |
| [Getting Started](/spreadjs/docs/spreadjs-designer-component/getting-started-designer) | Provides information on installation files and license to get started with Designer Component. |
| [Quick Start](/spreadjs/docs/spreadjs-designer-component/quick-start-designer) | Step-by-step instructions to initialize Designer Component with a new and existing spreadsheet. |
| [Theme](/spreadjs/docs/spreadjs-designer-component/theme) | Introduces three preset themes and ​​custom theme system​​. |
| [Designer Interface](/spreadjs/docs/spreadjs-designer-component/designerinterface) | Shows the basic layout of the Designer Component. |
| [JavaScript Frameworks](/spreadjs/docs/spreadjs-designer-component/designer-javaScript-frameworks) | Lists JavaScript Frameworks that can be used with the Designer Component. |
| [Template-Based Workbook Initialization](/spreadjs/docs/spreadjs-designer-component/template-based-workbook-initialization) | Explains how to control the starting experience of the Designer by defining custom workbook templates.  |
| [Customizations](/spreadjs/docs/spreadjs-designer-component/customizations) | Customizes the Designer Component by adding, removing, or overriding various commands. |
| [Work in Designer Component](/spreadjs/docs/spreadjs-designer-component/spdesignerwork) | Specifies settings for cells, columns, rows, and sheets, and for the entire spreadsheet, using the Designer Component's ribbon menu options. |
| [Toolbar Ribbon](/spreadjs/docs/spreadjs-designer-component/designer-toolbar-ribbon) | Provides different ribbon modes for SpreadJS features. |
| [API Documentation](/spreadjs/docs/spreadjs-designer-component/DesignerAPIdocumentation) | Provides namespaces in the APIs for SpreadJS Designer Components. |