# index

## Content

<style>
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");

    @scope (.spreadjs-api-home) {
    :scope {
        --ink: var(--body-color, #3a4652);
        --muted: #66717d;
        --white: #ffffff;
        --surface: #fafafa;
        --line: #dddddd;
        --code-line: #dee2e6;
        --link: var(--link-color, #1364c4);
        --product: var(--ds-product-color, #809b59);
        --product-light: var(--ds-product-color-light, #f4f8eb);
        --max: 1180px;
        width: 100%;
        display: block;
        color: var(--ink);
        background: var(--white);
        font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0;
        text-align: left;
        color-scheme: light;
        isolation: isolate;
    }

    :scope,
    :scope *,
    :scope *::before,
    :scope *::after {
        box-sizing: border-box;
    }

    a,
    a:visited,
    a:focus,
    a:focus-visible {
        color: var(--link);
        text-decoration: none;
    }

    a:hover {
        color: var(--link);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    a:focus-visible {
        outline: 2px solid var(--product);
        outline-offset: 3px;
    }

    h1,
    h2,
    h3,
    p {
        color: inherit;
        font-family: inherit;
        letter-spacing: 0;
    }

    .page-shell {
        width: min(calc(100% - 40px), var(--max));
        margin: 0 auto;
        padding: 16px 0 64px;
    }

    .page-header {
        padding-bottom: 22px;
        border-bottom: 1px solid var(--line);
    }

    h1 {
        margin: 16px 0 8px;
        font-size: 32px;
        font-weight: 700;
        line-height: normal;
    }

    .header-copy>p {
        max-width: 680px;
        margin: 0;
        color: var(--muted);
        font-size: 16px;
        line-height: 24px;
    }

    .section-nav {
        display: flex;
        gap: 24px;
        padding: 18px 0;
        border-bottom: 1px solid var(--line);
    }

    .section-nav a {
        padding: 4px 0;
        border-bottom: 2px solid transparent;
        color: var(--link);
        font-size: 14px;
        font-weight: 600;
    }

    .section-nav a:hover {
        border-bottom-color: var(--product);
        text-decoration: none;
    }

    .api-section {
        padding-top: 30px;
        scroll-margin-top: 20px;
    }

    .section-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 16px;
    }

    h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        line-height: 36px;
    }

    .section-header p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
    }

    .api-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .api-item {
        min-width: 0;
        min-height: 226px;
        display: flex;
        flex-direction: column;
        padding: 16px;
        border: 1px solid var(--line);
        border-top: 3px solid var(--product);
        border-radius: 4px;
        background: var(--white);
        transition: box-shadow .18s ease, transform .18s ease;
    }

    .api-item:hover {
        box-shadow: 0 6px 16px rgba(58, 70, 82, .08);
        transform: translateY(-2px);
    }

    .item-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .item-type {
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
    }

    .item-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: grid;
        place-items: center;
        border-radius: 4px;
        color: var(--product);
        background: var(--product-light);
        font-size: 14px;
    }

    h3 {
        margin: 0 0 7px;
        font-size: 19.2px;
        font-weight: 500;
        line-height: 28.8px;
    }

    .item-title-link {
        color: var(--link);
    }

    .api-item>p {
        margin: 0 0 15px;
        color: var(--ink);
        font-size: 14px;
        line-height: 1.65;
    }

    .quick-links {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 9px;
        margin-top: 0;
        padding-top: 11px;
        border-top: 1px solid var(--line);
    }

    .quick-links a {
        color: var(--link);
        font-size: 13px;
    }

    .quick-links code {
        padding: 0 6px;
        border: 1px solid var(--code-line);
        border-radius: 4px;
        color: var(--link);
        background: var(--surface);
        font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .new-section {
        margin-top: 12px;
        padding-top: 30px;
        border-top: 1px solid var(--line);
    }

    .new-section .api-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .new-section .api-item {
        min-height: 206px;
    }

    @media (max-width: 900px) {
        .api-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px) {
        .page-shell {
            width: min(calc(100% - 28px), var(--max));
            padding: 12px 0 48px;
        }

        h1 {
            font-size: 28px;
        }

        .section-nav {
            gap: 20px;
        }

        .api-section {
            padding-top: 24px;
        }

        .section-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 2px;
        }

        h2 {
            font-size: 22px;
            line-height: 33px;
        }

        .api-grid,
        .new-section .api-grid {
            grid-template-columns: 1fr;
        }

        .api-item,
        .new-section .api-item {
            min-height: 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            transition: none !important;
        }
    }
    }
</style>

<div class="spreadjs-api-home">
    <main class="page-shell" id="top">
        <header class="page-header">
            <div class="header-copy">
                <h1>API Reference</h1>
                <p>Quick access to commonly used classes, modules, and method groups.</p>
            </div>
        </header>

        <nav class="section-nav" aria-label="API sections">
            <a href="#common-apis">Common APIs</a>
            <a href="#new-apis">New APIs</a>
        </nav>

        <section class="api-section" id="common-apis">
            <div class="section-header">
                <h2>Common APIs</h2>
                <p>Frequently used in application development.</p>
            </div>

            <div class="api-grid">
                <article class="api-item">
                    <div class="item-meta"><span class="item-type">Class</span><span class="item-icon"><i
                                class="fa-solid fa-table-cells-large" aria-hidden="true"></i></span></div>
                    <h3><a class="item-title-link"
                            href="classes/GC.Spread.Sheets.Workbook"
                            target="_blank" rel="noreferrer">Workbook</a></h3>
                    <p>Manage worksheets, workbook state, calculation, serialization, and application-wide behavior.</p>
                    <div class="quick-links" aria-label="Workbook methods">
                        <a href="classes/GC.Spread.Sheets.Workbook#getactivesheet"
                            target="_blank" rel="noreferrer"><code>getActiveSheet</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#fromjson"
                            target="_blank" rel="noreferrer"><code>fromJSON</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#tojson"
                            target="_blank" rel="noreferrer"><code>toJSON</code></a>
                    </div>
                </article>

                <article class="api-item">
                    <div class="item-meta"><span class="item-type">Class</span><span class="item-icon"><i
                                class="fa-solid fa-table" aria-hidden="true"></i></span></div>
                    <h3><a class="item-title-link"
                            href="classes/GC.Spread.Sheets.Worksheet"
                            target="_blank" rel="noreferrer">Worksheet</a></h3>
                    <p>Work with cells, rows, columns, ranges, tables, formulas, and sheet-level options.</p>
                    <div class="quick-links" aria-label="Worksheet methods">
                        <a href="classes/GC.Spread.Sheets.Worksheet#getrange"
                            target="_blank" rel="noreferrer"><code>getRange</code></a>
                        <a href="classes/GC.Spread.Sheets.Worksheet#getvalue"
                            target="_blank" rel="noreferrer"><code>getValue</code></a>
                        <a href="classes/GC.Spread.Sheets.Worksheet#setvalue"
                            target="_blank" rel="noreferrer"><code>setValue</code></a>
                        <a href="classes/GC.Spread.Sheets.Worksheet#setformula"
                            target="_blank" rel="noreferrer"><code>setFormula</code></a>
                        <a href="classes/GC.Spread.Sheets.Worksheet#getformula"
                            target="_blank" rel="noreferrer"><code>getFormula</code></a>
                    </div>
                </article>

                <article class="api-item">
                    <div class="item-meta"><span class="item-type">Interface</span><span class="item-icon"><i
                                class="fa-solid fa-bars-staggered" aria-hidden="true"></i></span></div>
                    <h3><a class="item-title-link"
                            href="designer/interfaces/GC.Spread.Sheets.Designer.IRibbonPanelConfig"
                            target="_blank" rel="noreferrer">Designer Ribbon Component</a></h3>
                    <p>Configure ribbon panels and connect Designer commands to the application UI.</p>
                    <div class="quick-links" aria-label="Designer ribbon APIs">
                        <a href="designer/classes/GC.Spread.Sheets.Designer.Designer#constructor"
                            target="_blank" rel="noreferrer"><code>constructor</code></a>
                        <a href="designer/classes/GC.Spread.Sheets.Designer.Designer#setconfig"
                            target="_blank" rel="noreferrer"><code>setConfig</code></a>
                        <a href="designer/interfaces/GC.Spread.Sheets.Designer.IDesignerConfig"
                            target="_blank" rel="noreferrer"><code>IDesignerConfig</code></a>
                        <a href="designer/modules/GC.Spread.Sheets.Designer#defaultconfig"
                            target="_blank" rel="noreferrer"><code>defaultConfig</code></a>
                        <a href="designer/modules/GC.Spread.Sheets.Designer#toolbarmodeconfig"
                            target="_blank" rel="noreferrer"><code>toolbarModeConfig</code></a>
                        <a href="designer/modules/GC.Spread.Sheets.Designer#registertemplate"
                            target="_blank" rel="noreferrer"><code>registerTemplate</code></a>
                        <a href="designer/modules/GC.Spread.Sheets.Designer#getcommand"
                            target="_blank" rel="noreferrer"><code>getCommand</code></a>
                    </div>
                </article>

                <article class="api-item">
                    <div class="item-meta"><span class="item-type">Module</span><span class="item-icon"><i
                                class="fa-solid fa-square-root-variable" aria-hidden="true"></i></span></div>
                    <h3><a class="item-title-link"
                            href="modules/GC.Spread.CalcEngine"
                            target="_blank" rel="noreferrer">Calculation Engine</a></h3>
                    <p>Evaluate formulas and create synchronous or asynchronous custom functions.</p>
                    <div class="quick-links" aria-label="Calculation Engine APIs">
                        <a href="modules/GC.Spread.CalcEngine.Functions"
                            target="_blank" rel="noreferrer"><code>Functions</code></a>
                        <a href="classes/GC.Spread.CalcEngine.Functions.Function"
                            target="_blank" rel="noreferrer"><code>Function</code></a>
                        <a href="classes/GC.Spread.CalcEngine.Functions.AsyncFunction"
                            target="_blank" rel="noreferrer"><code>AsyncFunction</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#calculate"
                            target="_blank" rel="noreferrer"><code>calculate</code></a>
                        <a href="modules/GC.Spread.Sheets.CalcEngine#evaluateformula"
                            target="_blank" rel="noreferrer"><code>evaluateFormula</code></a>
                        <a href="modules/GC.Spread.Sheets.CalcEngine#rangetoformula"
                            target="_blank" rel="noreferrer"><code>rangeToFormula</code></a>
                    </div>
                </article>

                <article class="api-item">
                    <div class="item-meta"><span class="item-type">Method group</span><span class="item-icon"><i
                                class="fa-solid fa-file-arrow-up" aria-hidden="true"></i></span></div>
                    <h3><a class="item-title-link"
                            href="classes/GC.Spread.Sheets.Workbook#import"
                            target="_blank" rel="noreferrer">File I/O</a></h3>
                    <p>Load and save complete workbook state with the SJS file format.</p>
                    <div class="quick-links" aria-label="File I/O methods">
                        <a href="classes/GC.Spread.Sheets.Workbook#import"
                            target="_blank" rel="noreferrer"><code>import</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#export"
                            target="_blank" rel="noreferrer"><code>export</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#open"
                            target="_blank" rel="noreferrer"><code>open</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#save"
                            target="_blank" rel="noreferrer"><code>save</code></a>
                    </div>
                </article>

                <article class="api-item">
                    <div class="item-meta"><span class="item-type">Method group</span><span class="item-icon"><i
                                class="fa-solid fa-gauge-high" aria-hidden="true"></i></span></div>
                    <h3><a class="item-title-link"
                            href="classes/GC.Spread.Sheets.Workbook#suspendpaint"
                            target="_blank" rel="noreferrer">Performance</a></h3>
                    <p>Pause painting, calculation, or events while applying large batches of workbook changes.</p>
                    <div class="quick-links" aria-label="Performance methods">
                        <a href="classes/GC.Spread.Sheets.Workbook#suspendpaint"
                            target="_blank" rel="noreferrer"><code>suspendPaint</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#resumepaint"
                            target="_blank" rel="noreferrer"><code>resumePaint</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#suspendcalcservice"
                            target="_blank" rel="noreferrer"><code>suspendCalcService</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#resumecalcservice"
                            target="_blank" rel="noreferrer"><code>resumeCalcService</code></a>
                    </div>
                </article>

                <article class="api-item">
                    <div class="item-meta"><span class="item-type">Class</span><span class="item-icon"><i
                                class="fa-solid fa-bell" aria-hidden="true"></i></span></div>
                    <h3><a class="item-title-link"
                            href="classes/GC.Spread.Sheets.Events"
                            target="_blank" rel="noreferrer">Events</a></h3>
                    <p>Find event names and bind application handlers to workbook and worksheet changes.</p>
                    <div class="quick-links" aria-label="Event APIs">
                        <a href="classes/GC.Spread.Sheets.Workbook#bind"
                            target="_blank" rel="noreferrer"><code>bind</code></a>
                        <a href="classes/GC.Spread.Sheets.Workbook#unbind"
                            target="_blank" rel="noreferrer"><code>unbind</code></a>
                        <a href="designer/classes/GC.Spread.Sheets.Designer.Events"
                            target="_blank" rel="noreferrer"><code>Designer.Events</code></a>
                    </div>
                </article>
            </div>
        </section>

        <section class="api-section new-section" id="new-apis">
            <div class="section-header">
                <h2>New APIs</h2>
                <p>Recently added platform capabilities.</p>
            </div>

            <div class="api-grid">
                <article class="api-item">
                    <div class="item-meta"><span class="item-type">Package family</span><span class="item-icon"><i
                                class="fa-solid fa-user-group" aria-hidden="true"></i></span></div>
                    <h3><a class="item-title-link"
                            href="collaboration" target="_blank"
                            rel="noreferrer">Collaboration</a></h3>
                    <p>Connect server and browser packages for real-time, multi-user workbook editing.</p>
                    <div class="quick-links" aria-label="Collaboration packages">
                        <a href="collaboration/js-collaboration/README"
                            target="_blank" rel="noreferrer"><code>Server</code></a>
                        <a href="collaboration/js-collaboration-client/README"
                            target="_blank" rel="noreferrer"><code>Client</code></a>
                        <a href="collaboration/spread-sheets-collaboration-client/README"
                            target="_blank" rel="noreferrer"><code>Workbook client</code></a>
                    </div>
                </article>

                <article class="api-item">
                    <div class="item-meta"><span class="item-type">Module</span><span class="item-icon"><i
                                class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i></span></div>
                    <h3><a class="item-title-link"
                            href="modules/GC.Spread.Sheets.AI"
                            target="_blank" rel="noreferrer">AI</a></h3>
                    <p>Configure AI requests for formula, pivot table, translation, sentiment, and query features.</p>
                    <div class="quick-links" aria-label="AI types">
                        <a href="modules/GC.Spread.Sheets.AI#airequestcallback"
                            target="_blank" rel="noreferrer"><code>AIRequestCallback</code></a>
                        <a href="modules/GC.Spread.Sheets.AI#iaiconfig"
                            target="_blank" rel="noreferrer"><code>IAIConfig</code></a>
                        <a href="modules/GC.Spread.Sheets.AI#iaienvironment"
                            target="_blank" rel="noreferrer"><code>IAIEnvironment</code></a>
                    </div>
                </article>
            </div>
        </section>
    </main>
</div>
