@gridd/embed

v1.0.0

Published

7 days ago

Drop-in script that turns gridd YAML fenced code blocks into Gridd iframe embeds on any static HTML page

0High
0Medium
0Low

sandornagy

gridd embed iframe slides powerpoint yaml

@gridd/embed

Drop-in script that turns ```gridd YAML fenced code blocks into live, read-only Gridd iframe embeds on any static HTML page.

Usage

CDN

Include js-yaml (for YAML blocks; plain JSON works without it), then the embed script. Point data-gridd-base-url at the Gridd app you want to render into.

<script src="https://cdn.jsdelivr.net/npm/js-yaml@4/dist/js-yaml.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@gridd/embed/gridd-embed.min.js"
        data-gridd-base-url="https://wonderful-smoke-03be4ab0f.5.azurestaticapps.net/embeddable.html"></script>

Inline

Copy gridd-embed.min.js (or the full gridd-embed.js) into a <script> tag in your page. Set the base URL via the global before the script runs:

<script>
  window.GRIDD_EMBED_BASE_URL = "https://wonderful-smoke-03be4ab0f.5.azurestaticapps.net/embeddable.html";
</script>
<script>/* contents of gridd-embed.min.js */</script>

npm

npm install @gridd/embed

Then copy or serve node_modules/@gridd/embed/gridd-embed.min.js as a static asset.

Configuration

| Attribute / global | Description | Default | |---|---|---| | data-gridd-base-url on the <script> tag | URL of embeddable.html | https://localhost:3000/embeddable.html | | data-gridd-style-uri on the <script> tag | URI of a shared Gridd stylesheet JSON | (none) | | window.GRIDD_EMBED_BASE_URL | Same as above, set before the script loads | — | | window.GRIDD_STYLE_URI | Same as above | — |

Embeds are always read-only — gridd_readonly=1 is appended to every iframe URL automatically.

Markup

Place a <pre><code class="language-gridd"> block anywhere in the page body. The script replaces it with an iframe on DOMContentLoaded.

<pre><code class="language-gridd">
cells: |
  | * | **Label** | **Value** |
  |---|-----------|-----------|
  | * | Revenue   | $4.2M     |
</code></pre>

JSON is also accepted without js-yaml:

<pre><code class="language-gridd">{"cols":["*","*"],"rows":["*"],...}</code></pre>

YAML format

cells: |          ← markdown table; first row = col weights, first col = row weights
  |      | 0.5   | 1.5          |
  |------|-------|--------------|
  | *    | **Header** | Body   |

borders:
  - index: 1        ← row/col index of the border line
    isVertical: false
    preset: level3  ← visual style defined in the stylesheet

cellStyles:
  templates:
    MyHeader:
      preset: Header
      weight: bold
      size: 14pt
      fontFamily: Arial
      color: "#FFFFFF"
      isInverted: true     ← dark background + light text
      textAlign: center
      verticalAlign: middle
      shape:
        type: RoundedRectangle
        color: "#1B4F72"   ← fill colour
        outline: none
        radius: 8
        margin: 4
        marginLeft: 4
    MyBody:
      preset: Body
      weight: normal
      size: 11pt
      fontFamily: Arial
      color: "#333333"
      textAlign: left
      verticalAlign: middle
      paddingLeft: 12
      shape:
        type: RoundedRectangle
        color: "#F4F6F7"
        outline: solid
        outlineColor: "#D5D8DC"
        outlineWeight: 1
        radius: 6
        margin: 4
        marginLeft: 4
  "0,0": { template: MyHeader }   ← row,col → template name
  "0,1": { template: MyHeader }
  "1,0": { template: MyBody }
  "1,1": { template: MyBody }

Cell content supports **bold** and <br> line breaks.

Full example

Save the snippet below as example.html, open it in a browser (internet access required for the CDN scripts and the Gridd app).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gridd embed example</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 20px; }
    h1   { font-size: 1.4rem; margin-bottom: 8px; }
    p    { color: #555; margin-bottom: 20px; }
    /* make the iframe fill the container instead of a fixed 600px */
    iframe { width: 100%; height: 360px; border: 0; display: block; }
  </style>
</head>
<body>
  <h1>Strategic options</h1>
  <p>Three paths Meridian Wealth can take with its mass-affluent segment.</p>

  <pre><code class="language-gridd">
cells: |
  |     | 0.45             | 1.5                                                                        | 1.1                                            |
  |-----|------------------|----------------------------------------------------------------------------|------------------------------------------------|
  | 0.5 | **Option**       | **Description**                                                            | **Implication**                                |
  | *   | **Defend**       | Retain the segment with targeted improvements to pricing, UX, and coverage | Lower investment; incremental gains            |
  | *   | **Transform**    | Build a competitive hybrid digital offering for mass-affluent clients       | Higher investment; structural advantage        |
  | *   | **Exit & Refer** | Wind down the segment; establish structured referral partnerships           | Margin improvement; feeder pipeline risk       |

borders:
  - index: 1
    isVertical: false
    preset: level3
  - index: 1
    isVertical: true
    preset: level3
  - index: 2
    isVertical: true
    preset: level3

cellStyles:
  templates:
    TH:
      preset: Header
      weight: bold
      size: 12pt
      fontFamily: Arial
      color: "#FFFFFF"
      textAlign: left
      verticalAlign: middle
      isInverted: true
      paddingLeft: 10
      shape:
        type: RoundedRectangle
        color: "#1B4F72"
        outline: none
        radius: 0
        margin: 2
        marginLeft: 2
    Option:
      preset: SubHeader
      weight: bold
      size: 12pt
      fontFamily: Arial
      color: "#1A5276"
      textAlign: left
      verticalAlign: middle
      paddingLeft: 10
      shape:
        type: RoundedRectangle
        color: "#D6EAF8"
        outline: solid
        outlineColor: "#A9CCE3"
        outlineWeight: 1
        radius: 0
        margin: 2
        marginLeft: 2
    TD:
      preset: Body
      weight: normal
      size: 11pt
      fontFamily: Arial
      color: "#333333"
      textAlign: left
      verticalAlign: middle
      paddingLeft: 10
      shape:
        type: RoundedRectangle
        color: "#FFFFFF"
        outline: solid
        outlineColor: "#E5E8EB"
        outlineWeight: 1
        radius: 0
        margin: 2
        marginLeft: 2
  "0,0": { template: TH }
  "0,1": { template: TH }
  "0,2": { template: TH }
  "1,0": { template: Option }
  "1,1": { template: TD }
  "1,2": { template: TD }
  "2,0": { template: Option }
  "2,1": { template: TD }
  "2,2": { template: TD }
  "3,0": { template: Option }
  "3,1": { template: TD }
  "3,2": { template: TD }
  </code></pre>

  <script src="https://cdn.jsdelivr.net/npm/js-yaml@4/dist/js-yaml.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@gridd/embed/gridd-embed.min.js"
          data-gridd-base-url="https://wonderful-smoke-03be4ab0f.5.azurestaticapps.net/embeddable.html"></script>
</body>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@gridd/embed

Usage

CDN

Inline

npm

Configuration

Markup

YAML format

Full example