# Quick Start
## 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 Designer Component [here](https://developer.mescius.com/spreadjs/download). For more information on adding references, see [Getting Started](/spreadjs/docs/v16/spreadjs_designer_component/getting-started-designer) topic.
> **Note:** The Designer Component can only be used with sheets component. To know how to work with sheets component, see [Quick Start](/spreadjs/docs/v16/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 SpreadJS Designer Component along with a new spreadsheet.
1. Open ‘Notepad’ or your preferred code editor.
2. Add the following HTML syntax code in the file.
```HTML
```
3. Add the following SpreadJS CSS and JS files inside the HEAD element tag.
```HTML
```
To use the Pivot Table feature, add the following additional script file.
```HTML
```
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.
### ASP.NET Web Application
Follow the below steps to create an ASP.NET Web application that will display SpreadJS Designer Component along with a new spreadsheet.
1. Create an Empty ASP.Net Web Application in Visual Studio.
2. Create the 'scripts' folder in your project's root location and include the following script files:
```
// SpreadJS script files
gc.spread.sheets.all.x.x.x.min.js
gc.spread.sheets.charts.x.x.x.min.js
gc.spread.sheets.shapes.x.x.x.min.js
gc.spread.sheets.print.x.x.x.min.js
gc.spread.sheets.barcode.x.x.x.min.js
gc.spread.sheets.pdf.x.x.x.min.js
gc.spread.sheets.tablesheet.x.x.x.min.js
// SpreadJS Designer Component script files
gc.spread.sheets.designer.resource.en.0.0.0.min.js
gc.spread.sheets.designer.all.x.x.x.min.js
```
> 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`.
To use the Pivot Table feature, add the following additional script file.
```HTML
```
To add export functionality, add the following additional script file:
```HTML
```
3. Create a 'css' folder in your project's root location and include the following CSS:
* SpreadJS CSS file - `gc.spread.sheets.x.x.x.css`
* SpreadJS Designer Component CSS file - `gc.spread.sheets.designer.x.x.x.min.css`
4. Add an HTML Page to the Visual Studio project.
5. Modify the content of the added HTML Page to the following code:
* Initialize the Designer Component
* Create the Designer Component target DOM element
```HTML
```
6. 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(document.getElementById("designerHost"), '', 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:
