SpreadJS: Designer Component

Powerful and Complete JS-Based Web Excel Performance

    Deliver the same UI/UX as the most familiar tools, MS 365 Excel and Google Sheets.

    With SpreadJS Designer, you can implement Excel features and layouts in a web environment with just a few lines of code.

    Components are provided for both screen structure and Excel functionality, giving you the freedom to customize and extend as needed.

    The screen above is an actual screen implemented using the SpreadJS Designer Component

    A SpreadJS developer license is required to use the Designer Component.

    Run Designer Component Demo How to Apply

    Ask Anything!

    Share your questions and concerns about SpreadJS with the MESCIUS expert team. We are here to listen and help.

    Online Consultation

    How to Apply the Designer Component

    Learn how to integrate the Designer Component with a new spreadsheet.

    Step 1. Reference the SpreadJS CSS and JS files in 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 a 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, set the license keys for both the Designer Component and SpreadJS.

    // Set license key

    GC.Spread.Sheets.LicenseKey = 'xxx';

    GC.Spread.Sheets.Designer.LicenseKey = 'xxxx';


    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 when writing your 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 () {

                // Set license key

                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 view the Designer Component in your browser.

    Ask Anything!

    Share your questions and concerns about SpreadJS with the MESCIUS expert team. We are here to listen and help.

    Online Consultation

    Designer Component Screen Layout

    Vue

    React

    Angular

    Framework Support

    SpreadJS Designer Component provides JavaScript framework support to help developers achieve rapid web development and efficient code maintenance. Learn how to get started with the Designer Component in each framework.

    Frequently Asked Questions

    SpreadJS Web Excel Editor FAQ

    Q. What is the difference between SpreadJS and the Designer Component? +

    A. The Designer Component is a complete Excel web editor built on the UI and APIs provided by SpreadJS.


    With the Designer Component, you can implement a familiar Excel interface on the web with just a few lines of code, without having to build a separate UI from scratch.

    Q. What is the licensing policy for using the Designer Component? +

    A. A SpreadJS Developer License and Deployment License are required to use the Designer Component officially.


    The Designer Component license is available for purchase only to customers who already hold a Developer License, and one license per project is sufficient.


    (A Deployment License is not required for development and testing on a local PC or localhost.)

    Q. Does the SpreadJS Designer Component include the SpreadJS control? +

    A. The SpreadJS Designer Component is sold separately from SpreadJS on a per-project basis and is not bundled with other controls or packages. Additionally, a SpreadJS Developer License is required to purchase and use the Designer Component.

    Q. How do I obtain a deployment key when deploying the Designer Component? +

    A. To obtain a Designer Component deployment key, you must own or purchase the following three licenses:


    - SpreadJS Developer License

    - Designer Component License

    - Deployment License


    Once you have purchased or already hold a Deployment License, we will provide two deployment keys for your requested domain/IP:


    - SpreadJS Deployment Key

    - Designer Component Deployment Key


    Both keys must be registered in your JS code for the Designer Component to function correctly when deployed to a server.


    *Note


    If you are already using a SpreadJS Deployment Key for the same version, you can purchase the Designer Component License and request a deployment key without purchasing an additional Deployment License. We will then provide you with the Designer Component Deployment Key.

    Q. Does SpreadJS or the Designer Component support macros and VBA? +

    A. Unfortunately, macros and VBA are features exclusive to desktop Excel and are not technically supported in a web environment. This applies equally to other web-based Excel services such as Google Sheets and Microsoft Excel for the web.


    However, if you need to replicate the functionality of a macro you previously used, you can implement the same logic or behavior directly through JavaScript coding.

    Diverse Enterprise Business Features Powered by SpreadJS

    Explore the Business Excel Add-Ons for SpreadJS

    SpreadJS provides Excel-based features tailored to diverse enterprise business needs, enabling fast and efficient development of even the most complex business systems.

    Real-Time Collaboration
    NEW

    Real-Time Collaboration

    Build an environment where multiple users can collaborate on a single sheet simultaneously.

    • Server Framework Build a stable Collaboration server based on Node.js
    • Real-Time Collaboration Multi-user simultaneous input with live user action and cursor display
    • Conflict Prevention Precise conflict control and permission management powered by OT engine
    Learn More
    AI Assistant
    NEW

    AI Assistant

    Maximize productivity with natural language formula generation and data analysis.

    • Multi-AI Model Support Connect with OpenAI, Gemini, Claude, and custom in-house AI
    • Natural Language Command Generate and explain Excel formulas and auto-build pivot tables
    • Excel AI Functions Dedicated AI function library for data analysis
    Learn More
    Pivot Table

    Pivot Table

    Quickly summarize large volumes of Excel data and extract insights.

    • Excel-Like Experience Bring the same pivot UI and usability as Excel to the web
    • JS Control Set Custom controls for pivot UI customization
    • View Manager Save and load per-user pivot analysis views
    Learn More
    Gantt Sheet

    Gantt Sheet

    Integrate project scheduling and resource management into your Excel sheet.

    • Project Management Full support for timescales, task bars, calendars, and more
    • Data Binding Easy data binding via DataManager
    • Flexible Compatibility Import/export support based on Excel and JSON
    Learn More
    Report Sheet

    Report Sheet

    Transform complex business data into dynamic Excel reports.

    • Dynamic Reporting JSON-based data binding and automatic report generation
    • Professional Styling Consistent report layouts with precise formatting
    • Advanced Analytics Cross-sheet references and data aggregation support
    Learn More
    Data Chart

    Data Chart

    Visualize Excel data and create intuitive dashboards.

    • Dashboard Designer A dedicated designer for building Excel dashboards without coding
    • Diverse Charts Support for various Excel chart types with real-time data updates
    • Easy Binding Fast and simple JSON data connection via DataManager
    Learn More