Text & layout
Text & HTML tags
Headings, paragraphs, links, images, lists, badges, progress bars and more.
Text nodes
H1–H6, P, SPAN, SMALL, STRONG, EM, LABEL and BLOCKQUOTE draw that HTML tag with props.text. Text with props.tag does the same for any of them.
A is a link (href, text, target), IMG a responsive image (src, alt), DIV a box (children text, className), and LIST a bullet list (items).
Small Bootstrap components
Badge, Breadcrumb, ProgressBar, Spinner and ListGroup take their data in props. Like every node, their props can be changed later with api.setNodeProps — the buttons below do that.
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-text",
"props": {
"className": "mb-2"
},
"children": [
{
"type": "column",
"id": "col-text",
"props": {
"className": "col-12 col-lg-6"
},
"children": [
{
"type": "H3",
"id": "heading",
"props": {
"text": "H3 heading"
}
},
{
"type": "P",
"id": "para",
"props": {
"text": "A paragraph (P) of body text."
}
},
{
"type": "Text",
"id": "custom-tag",
"props": {
"tag": "h6",
"text": "Text with tag \"h6\"",
"className": "text-primary"
}
},
{
"type": "SPAN",
"id": "span",
"props": {
"text": "SPAN · "
}
},
{
"type": "STRONG",
"id": "strong",
"props": {
"text": "STRONG · "
}
},
{
"type": "EM",
"id": "em",
"props": {
"text": "EM · "
}
},
{
"type": "SMALL",
"id": "small",
"props": {
"text": "SMALL"
}
},
{
"type": "BLOCKQUOTE",
"id": "quote",
"props": {
"text": "BLOCKQUOTE — a quoted passage.",
"className": "border-start border-4 ps-3 my-3 text-body-secondary"
}
},
{
"type": "A",
"id": "link",
"props": {
"text": "A — link to getbootstrap.com",
"href": "https://getbootstrap.com",
"target": "_blank"
}
},
{
"type": "LIST",
"id": "list",
"props": {
"className": "mt-2",
"items": [
"LIST item one",
"LIST item two",
{
"text": "Items can also be { text } objects"
}
]
}
}
]
},
{
"type": "column",
"id": "col-media",
"props": {
"className": "col-12 col-lg-6"
},
"children": [
{
"type": "IMG",
"id": "image",
"props": {
"src": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22120%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%2212%22%20fill%3D%22%232a78d6%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22sans-serif%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3EIMG%20320%20%C3%97%20120%3C%2Ftext%3E%3C%2Fsvg%3E",
"alt": "Sample image",
"style": {
"maxWidth": 320
}
}
},
{
"type": "DIV",
"id": "box",
"props": {
"className": "border rounded p-2 my-3 bg-body-tertiary",
"children": "DIV — a box for any text"
}
},
{
"type": "Badge",
"id": "badge-new",
"props": {
"text": "New",
"bg": "success",
"className": "me-1"
}
},
{
"type": "Badge",
"id": "badge-beta",
"props": {
"text": "Beta",
"bg": "warning",
"textColor": "dark",
"pill": true,
"className": "me-1"
}
},
{
"type": "Badge",
"id": "badge-count",
"props": {
"text": "3 unread",
"bg": "danger",
"pill": true
}
},
{
"type": "Breadcrumb",
"id": "crumbs",
"props": {
"className": "mt-3",
"items": [
{
"text": "Home",
"href": "#"
},
{
"text": "Library",
"href": "#"
},
{
"text": "Data",
"active": true
}
]
}
},
{
"type": "ProgressBar",
"id": "progress",
"props": {
"now": 40,
"showLabel": true,
"striped": true,
"className": "mb-3"
}
},
{
"type": "Spinner",
"id": "spinner",
"props": {
"animation": "border",
"variant": "primary",
"size": "sm",
"text": "Loading..."
}
},
{
"type": "ListGroup",
"id": "list-group",
"props": {
"className": "mt-3",
"items": [
{
"text": "Inbox",
"badge": 14,
"active": true
},
{
"text": "Drafts",
"badge": 2
},
{
"text": "Archived",
"disabled": true
}
]
}
}
]
}
]
},
{
"type": "row",
"id": "row-buttons",
"children": [
{
"type": "column",
"id": "col-buttons",
"props": {
"className": "d-flex flex-wrap gap-2"
},
"children": [
{
"type": "ButtonField",
"id": "btn-heading",
"props": {
"text": "Change heading",
"onClick": "changeHeading()"
}
},
{
"type": "ButtonField",
"id": "btn-progress",
"props": {
"text": "+10% progress",
"onClick": "addProgress()"
}
},
{
"type": "ButtonField",
"id": "btn-badge",
"props": {
"text": "Recolor badge",
"onClick": "recolorBadge()"
}
}
]
}
]
}
]Options used here
| Option | What it does |
|---|---|
H1–H6, P, SPAN, ... { text } | Text in that HTML tag. Text { tag, text } picks the tag. |
A { href, text, target } | A link. |
IMG { src, alt } | A responsive, rounded image. |
DIV { children, className } | A box with text. |
LIST { items } | Bullet list from strings or { text } objects. |
Badge { text, bg, pill, textColor } | Small colored label. |
Breadcrumb { items: [{ text, href, active }] } | Navigation trail. |
ProgressBar { now, min, max, showLabel, variant, striped, animated } | Progress bar. |
Spinner { animation, variant, size, text } | Loading spinner (border or grow). |
ListGroup { items: [{ text, href, active, disabled, variant, badge }], flush, numbered, horizontal } | List group. |
Events
| Event | When it runs | Your action receives |
|---|---|---|
onClick | Any node can have it; buttons and links are the usual place. | (event, { name }) |
Tips
- Keep values that actions update (like the progress here) outside
actions— the actions object is created again on every render.