Getting started

Schema basics

Rows, columns, ids, props and children: how a schema describes a page.

Nodes

A schema is an array of nodes. Every node is an object with a type and a unique id.

Layout nodes (row, column, containers like Card or Tabs) have children: a list of more nodes. Other nodes have props: the settings for that element (its text, label, color, ...).

{ type: "row", id: "row-1", props: { className: "mb-3" }, children: [
  { type: "column", id: "col-1", children: [
    { type: "H4", id: "title", props: { text: "Hello" } }
  ] }
]}

Rows and columns

row and column are Bootstrap's grid. Columns share the row equally; give a column className: "col-12 col-md-8" to set its width per screen size. Rows at the top level are wrapped in a Bootstrap Container.

Any node can have props.className and props.style — use Bootstrap classes such as p-3, bg-light, text-center, border and rounded.

Why ids matter

Actions find nodes by id. In this example the button runs changeTitle(), which calls api.setNodeProps("title", { text: ... }) — it changes the node whose id is title.

Try it

Loading example…

Events0

Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "row",
    "id": "row-header",
    "props": {
      "className": "mb-3"
    },
    "children": [
      {
        "type": "column",
        "id": "col-header",
        "props": {
          "className": "col-12 bg-primary-subtle rounded p-3"
        },
        "children": [
          {
            "type": "H4",
            "id": "title",
            "props": {
              "text": "Page title",
              "className": "mb-1"
            }
          },
          {
            "type": "P",
            "id": "subtitle",
            "props": {
              "text": "A row with one full-width column.",
              "className": "mb-0 text-body-secondary"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-body",
    "props": {
      "className": "g-3 mb-3"
    },
    "children": [
      {
        "type": "column",
        "id": "col-main",
        "props": {
          "className": "col-12 col-md-8"
        },
        "children": [
          {
            "type": "DIV",
            "id": "main-box",
            "props": {
              "className": "border rounded p-3 h-100",
              "children": "Main column (col-md-8): two thirds of the width on medium screens and up."
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "col-side",
        "props": {
          "className": "col-12 col-md-4"
        },
        "children": [
          {
            "type": "DIV",
            "id": "side-box",
            "props": {
              "className": "border rounded p-3 h-100 bg-body-tertiary",
              "children": "Side column (col-md-4)."
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-three",
    "props": {
      "className": "g-3 mb-3 text-center"
    },
    "children": [
      {
        "type": "column",
        "id": "col-a",
        "children": [
          {
            "type": "DIV",
            "id": "box-a",
            "props": {
              "className": "border rounded p-2",
              "children": "Equal"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "col-b",
        "children": [
          {
            "type": "DIV",
            "id": "box-b",
            "props": {
              "className": "border rounded p-2",
              "children": "Equal"
            }
          }
        ]
      },
      {
        "type": "column",
        "id": "col-c",
        "children": [
          {
            "type": "DIV",
            "id": "box-c",
            "props": {
              "className": "border rounded p-2",
              "children": "Equal"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-button",
    "children": [
      {
        "type": "column",
        "id": "col-button",
        "children": [
          {
            "type": "ButtonField",
            "id": "change",
            "props": {
              "text": "Change the title",
              "variant": "primary",
              "onClick": "changeTitle()"
            }
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`type`	The kind of node: layout (`row`, `column`), text (`H4`, `P`, `DIV`), field, container, table, chart, ...
`id`	Unique per schema; used by actions and as React key.
`children`	Nested nodes (rows, columns and containers).
`props.className / props.style`	Bootstrap classes or inline styles for that element.
`props.text`	The text of text nodes (`H1`–`H6`, `P`, `SPAN`, ...). `DIV` uses `props.children`.

Events

Event	When it runs	Your action receives
`onClick`	The button is pressed.	`(event, context)` — `context.name` is the button's id.