Declarative API Reference

The Declarative API lets you link HTML elements to NExS app cells using CSS classes and data attributes—no JavaScript required.

Overview

Add specific class names and a data-nexs-cell-addr attribute to HTML elements to create automatic two-way binding with your NExS app cells.

Input Elements

Class: `nexs__input`

Links an input element to an editable cell. Changes flow both directions:

User edits the HTML input → value sent to NExS cell
NExS cell changes → HTML input updates

Supported Input Types

Text Input

<input type="text"
       class="nexs__input"
       data-nexs-cell-addr="B5">

Checkbox

<input type="checkbox"
       class="nexs__input"
       data-nexs-cell-addr="C3">

Checked = sends 1 to cell
Unchecked = sends 0 to cell

Radio Buttons

<input type="radio" name="plan" class="nexs__input"
       data-nexs-cell-addr="B8" value="Basic"> Basic

<input type="radio" name="plan" class="nexs__input"
       data-nexs-cell-addr="B8" value="Premium"> Premium

<input type="radio" name="plan" class="nexs__input"
       data-nexs-cell-addr="B8" value="Enterprise"> Enterprise

All radio buttons in a group share the same data-nexs-cell-addr. The selected button’s value is sent to the cell.

<select class="nexs__input" data-nexs-cell-addr="D2">
  <option value="Option A">Option A</option>
  <option value="Option B">Option B</option>
  <option value="Option C">Option C</option>
</select>

The selected option’s value is sent to the cell.

Output Elements

Class: `nexs__output_formatted`

Displays the cell’s formatted value (as shown in Excel).

<span class="nexs__output_formatted"
      data-nexs-cell-addr="B10"></span>

If cell B10 contains 1234.56 formatted as currency, displays: $1,234.56

Class: `nexs__output_raw`

Displays the cell’s raw value (unformatted).

<span class="nexs__output_raw"
      data-nexs-cell-addr="B10"></span>

If cell B10 contains 1234.56 formatted as currency, displays: 1234.56

Comparison

Cell Value	Format	`nexs__output_formatted`	`nexs__output_raw`
1234.56	Currency	$1,234.56	1234.56
0.15	Percentage	15%	0.15
44927	Date	1/15/2023	44927
Hello	Text	Hello	Hello

View Selector

Class: `nexs__viewselect`

Creates a dropdown that switches between views.

<select class="nexs__viewselect"></select>

The dropdown automatically populates with your app’s view names.

Multiple Apps

For pages with multiple embedded apps, specify which app:

<!-- View selector for second app (index 1) -->
<select class="nexs__viewselect" data-nexs-app="1"></select>

<!-- View selector for app named "My App" -->
<select class="nexs__viewselect" data-nexs-app="My App"></select>

Cell Address Syntax

The data-nexs-cell-addr attribute uses the extended cell reference syntax: [appRef]viewRef!cellRef

Components

Component	Description	Examples
`appRef`	App name or index	`[My App]`, `[0]`, `[1]`
`viewRef`	View name or index	`Dashboard`, `0`, `1`
`cellRef`	Cell address or name	`B7`, `Input_1`

Default Values

If appRef is omitted, defaults to first app ([0])
If viewRef is omitted, defaults to first view (0)

Examples

Address	Meaning
`B5`	Cell B5 on first view of first app
`Dashboard!B5`	Cell B5 on “Dashboard” view of first app
`[My App]Dashboard!B5`	Cell B5 on “Dashboard” view of “My App”
`[1]B5`	Cell B5 on first view of second app
`[0]2!B5`	Cell B5 on third view of first app
`Input_1`	Named cell “Input_1” on first view of first app
`[My App]Settings!Config`	Named cell “Config” on “Settings” view of “My App”

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>Mortgage Calculator</title>
  <style>
    .calculator {
      font-family: Arial, sans-serif;
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    .field {
      margin-bottom: 15px;
    }
    .field label {
      display: block;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .field input, .field select {
      width: 100%;
      padding: 8px;
      font-size: 16px;
      box-sizing: border-box;
    }
    .result {
      background: #f0f8ff;
      padding: 15px;
      border-radius: 4px;
      text-align: center;
    }
    .result .amount {
      font-size: 32px;
      font-weight: bold;
      color: #2a7;
    }
  </style>
</head>
<body>

<div class="calculator">
  <h2>Mortgage Calculator</h2>

  <div class="field">
    <label>Loan Amount</label>
    <input type="text"
           class="nexs__input"
           data-nexs-cell-addr="B3"
           placeholder="$250,000">
  </div>

  <div class="field">
    <label>Interest Rate (%)</label>
    <input type="text"
           class="nexs__input"
           data-nexs-cell-addr="B4"
           placeholder="6.5">
  </div>

  <div class="field">
    <label>Loan Term</label>
    <select class="nexs__input" data-nexs-cell-addr="B5">
      <option value="15">15 years</option>
      <option value="20">20 years</option>
      <option value="30" selected>30 years</option>
    </select>
  </div>

  <div class="field">
    <label>
      <input type="checkbox"
             class="nexs__input"
             data-nexs-cell-addr="B6">
      Include PMI
    </label>
  </div>

  <div class="result">
    <div>Monthly Payment</div>
    <div class="amount">
      <span class="nexs__output_formatted"
            data-nexs-cell-addr="B10"></span>
    </div>
  </div>
</div>

<!-- NExS app (handles calculations) -->
<script class="nexs"
  src="https://static.nexs.com/js/nexs_embed.js"
  data-nexs-app-url="https://platform.nexs.com/app/YOUR-APP-ID">
</script>

</body>
</html>

Tips

Hiding the NExS App

If you’re building a fully custom UI and don’t want the spreadsheet view visible, you can hide the embed container with CSS:

<div style="display:none;">
  <script class="nexs"
    src="https://static.nexs.com/js/nexs_embed.js"
    data-nexs-app-url="https://platform.nexs.com/app/YOUR-APP-ID">
  </script>
</div>

The Declarative API elements will still work even when the app view is hidden.

Combining with JavaScript

The Declarative API works alongside the JavaScript API. Use declarative binding for simple cases and JavaScript for complex logic:

<input type="text" class="nexs__input" data-nexs-cell-addr="B5">

<script>
  document.addEventListener("nexsappupdated", function() {
    // React to changes with JavaScript
    const value = NEXS.cell("B10").data;
    if (value > 1000) {
      alert("High value detected!");
    }
  });
</script>

Multiple Apps

When embedding multiple apps, always specify the app reference:

<!-- Inputs for first app -->
<input class="nexs__input" data-nexs-cell-addr="[0]B5">

<!-- Inputs for second app -->
<input class="nexs__input" data-nexs-cell-addr="[1]B5">

<!-- View selector for second app -->
<select class="nexs__viewselect" data-nexs-app="1"></select>

JavaScript API — Programmatic control
Events Reference — React to app changes
Embedding Basics — Getting started guide

Declarative API Reference

Overview

Input Elements

Class: nexs__input

Supported Input Types

Text Input

Checkbox

Radio Buttons

Select (Dropdown)

Output Elements

Class: nexs__output_formatted

Class: nexs__output_raw

Comparison

View Selector

Class: nexs__viewselect

Multiple Apps

Cell Address Syntax

Components

Default Values

Examples

Complete Example

Tips

Hiding the NExS App

Combining with JavaScript

Multiple Apps

Related

Class: `nexs__input`

Class: `nexs__output_formatted`

Class: `nexs__output_raw`

Class: `nexs__viewselect`