# Quick Start
A quick start guide for the SpreadJS Designer Component, including UI and code examples for using it with a new or existing spreadsheet in different types of applications
## Content
The following quick start section will help you to use the SpreadJS Designer Component in your project with a new and an existing spreadsheet. You can download the latest script and CSS files for the Designer Component [here](https://developer.mescius.com/spreadjs/download). For more information on adding references, see the [Getting Started](/spreadjs/docs/spreadjs-designer-component/getting-started-designer) topic.
> **Note:** The Designer Component can only be used with the sheets component. To know how to work with the sheets component, see the [Quick Start](/spreadjs/docs/getstarted/quick-start) topic.
## Use Designer Component with a New Spreadsheet
### HTML Page
Follow the below steps to create an HTML page that will display the SpreadJS Designer Component along with a new spreadsheet.
1. Open ‘Notepad’ or your preferred code editor.
2. Add the following HTML syntax code to the file.
```HTML
```
3. Add the following SpreadJS CSS and JS files inside the HEAD element tag.
```HTML
```
Depending on your needs, you can include JS files here for different add-on features such as barcodes, pivot tables, tablesheets, ganttsheets, import/export, and so on.
4. Add the following Designer Component's CSS and JS files inside the HEAD element tag.
```HTML
```
> **Note:** Spreadsheet references should be added above the Designer Component references. Moreover, the Designer Component resource file (*gc.spread.sheets.designer.resource.en.x.x.x.min.js*, in this case) must always be referenced before *gc.spread.sheets.designer.all.x.x.x.min.js*.
5. Include a DOM element as the container in the BODY element.
```HTML
```
6. Initialize the Designer Component inside the script element tag in the HEAD section. Also, set the license key for Designer Component and SpreadJS before initialization.
```JavaScript
```
The complete code in the HTML file will look like the below:
```HTML
```
7. Save it as an HTML file. For example, ‘index.html’
8. Create a new folder at the same location where you have saved the HTML file. Add the script and CSS files mentioned in steps 3 and 4 to that folder.
9. View the HTML file in the browser to observe the Designer Component with a new spreadsheet.
## Use Designer Component with an Existing Spreadsheet
You can also use the Designer Component with any existing spreadsheet. For example, the below image shows a spreadsheet with a treemap chart and its data.
To use the Designer Component with the above spreadsheet, implement the below steps in your existing HTML file:
1. Include the Designer Component script and CSS file references.
```HTML
```
> **Note:** Spreadsheet references should be added above the Designer Component references as explained in above steps.
2. Pass the spreadsheet's variable as a parameter while initializing the Designer Component.
```JavaScript
var designer = new GC.Spread.Sheets.Designer.Designer("designerHost", null, spread);
```
3. Include the Designer Component's DOM element along with the sheet DOM element.
```HTML
```
The complete code in the HTML file will look like the one below where the existing spreadsheet adds data and creates a treemap chart. This spreadsheet is further used with the designer component to perform any UI operation.
```HTML
```
The above code will generate the below output:
