Web Excel Editor

SpreadJS Designer Component

List of Services

    Do you want to implement Google Sheets, an online MS Excel-like UI, menu structure, and Excel functionality on your web pages?

    Try the SpreadJS designer component, a complete front-end Excel editor.

    It provides components for Excel functions, starting from the screen structure, so you can freely customize and expand it as you like.

    * A SpreadJS Developer license is required to use the Designer Component.

    The screen above is implemented as an actual SpreadJS designer component.

    Run Demo How to apply

    Ask Anything!

    Share your vague concerns and questions about Spread.NET with MESCIUS's expert team. We empathize with your concerns and are here to help.

    Online Consultation

    How to apply designer components

    Learn how to integrate designer components with your new spreadsheet.

    Step 1. Reference SpreadJS CSS and JS files to your project. 

     <!--CSS file-->
<link href="css/gc.spread.sheets.excel2013white.0.0.0css" rel="stylesheet" type="text/css" />
<!--script file-->
<script type="text/javascript" src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.shapes.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.charts.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.datacharts.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.slicers.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.print.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.barcode.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.pdf.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.pivot.pivottables.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.tablesheet.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.ganttsheet.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.formulapanel.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.report.reportsheet.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.io.0.0.0.min.js"></script>
<!--Culture settings-->
<script type="text/javascript" src="scripts/resources/ko/gc.spread.sheets.resources.ko.0.0.0.min.js"></script>

    Step 2. Reference the CSS and JS files of the designer component in your project. 

     <!--CSS file-->
<link href="css/gc.spread.sheets.designer.0.0.0.min.css" rel="stylesheet" type="text/css" />
<!--script file-->
<script type="text/javascript" src="scripts/gc.spread.sheets.designer.resource.ko.0.0.0.min.js"></script>
<script type="text/javascript" src="scripts/gc.spread.sheets.designer.all.0.0.0.min.js"></script>

    Step 3: Include the DOM element as a container in the page body. 

     <div id="gc-designer-container" role="application"></div>

    Step 4: Initialize the designer component. Before initializing, also set the license key for the designer component and SpreadJS.

     // Set license key
GC.Spread.Sheets.LicenseKey = 'xxx';
GC.Spread.Sheets.Designer.LicenseKey = 'xxxx';
// Designer reset
var designer = new GC.Spread.Sheets.Designer.Designer(
    document.getElementById("gc-designer-container")
);

    ✅ The complete HTML code is as follows:
    Include the content within the <style> tags in the code.

     <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="spreadjs culture" content="ko-kr" />
    <title>spreadsheet designer</title>
    <!-- CSS file -->
    <link href="css/gc.spread.sheets.excel2013white.0.0.0.css" rel="stylesheet" type="text/css" />
    <link href="css/gc.spread.sheets.designer.0.0.0.min.css" rel="stylesheet" type="text/css" />
</head>
<style>
.designer {
    height: calc(100% - 15px);
}
.ribbon-button-welcome {
    background-image: url('./welcome.png');
    background-size: 35px 35px;
}
html, body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    height: 100%;
}
#gc-designer-container {
    height: 100%;
}
</style>
<body unselectable="on">
    <!-- DOM element -->
    <div id="gc-designer-container" role="application"></div>
    <!-- script file -->
    <script type="text/javascript" src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.shapes.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.charts.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.datacharts.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.slicers.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.print.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.barcode.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.pdf.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.pivot.pivottables.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.tablesheet.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.ganttsheet.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.formulapanel.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.report.reportsheet.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.io.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/resources/ko/gc.spread.sheets.resources.ko.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/gc.spread.sheets.designer.resource.ko.0.0.0.min.js"></script>
    <script type="text/javascript" src="scripts/gc.spread.sheets.designer.all.0.0.0.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            // License key setting
            GC.Spread.Sheets.LicenseKey = 'xxx';
            GC.Spread.Sheets.Designer.LicenseKey = 'xxxx';
            var designer = new GC.Spread.Sheets.Designer.Designer(
                document.getElementById("gc-designer-container")
            );
        }
    </script>
</body>
</html>

    Step 5: You can check the designer component in the browser.

    Ask Anything!

    Share your vague concerns and questions about Spread.NET with MESCIUS's expert team. We empathize with your concerns and are here to help.

    Online Consultation

    Designer Component Screen Configuration

    View

    React

    Angular

    Framework support

    SpreadJS designer components provide support for JavaScript frameworks, enabling developers to easily achieve rapid web development and efficient code maintenance. Learn how to get started with designer components in each framework.

    FAQ

    • What is the difference between SpreadJS and designer components?

       The Designer component can be thought of as a complete Excel web editor built with the UI and API provided by SpreadJS. With the Designer component, you can implement a familiar Excel screen on the web with just a few lines of code, without developing a separate screen layout. 

    • What is the licensing policy for using designer components?

       To officially use the designer component, a "SpreadJS Developer License" is required. The designer component license can only be purchased by customers with a developer license, and you only need one license per project. (A deployment license is not required for development and testing on a local PC or localhost.)  

    • Does the SpreadJS designer component also include SpreadJS controls?

       The SpreadJS designer component is sold separately from SpreadJS, per project, and is not included with other controls in the package. Furthermore, purchasing and using the designer component requires a SpreadJS developer license.  

    • How do I get the deployment key when deploying a designer component?

       To obtain a designer distribution key, you must own or purchase the following three licenses:

      SpreadJS Developer License

      Designer Component License

      Distribution License If you have purchased/owned a distribution license, we will provide you with the following two distribution keys for the requested domain/IP:

      SpreadJS Distribution Key

      Designer Component Distribution Key You must register both keys in your JS code so that the designer component will work properly when deployed to the server. 


      * Note

      If you are already using a SpreadJS distribution key for the same version, you can purchase a designer component license without purchasing an additional distribution license and then request a distribution key, and we will provide you with a designer component distribution key.


    • Do SpreadJS and designer components support macros and VBA?

      Unfortunately, macros and VBA are limited to desktop Excel and are technically difficult to support on the web. This also applies to other Excel services offered on the web, such as Google Sheets and MS Excel for the Web. 


      However, if you need the functionality of a previously used macro, you can implement the same code or actions yourself using JavaScript coding.