Create Cord messages

Learn how Cord's message format works and how to set message contents


Looking for how to display or send messages?

If you're looking for how to display messages, check out the Message component and Message Content component.

If you're looking for how to send messages using the Cord SDK, check out the Messages REST API and sendMessage JS API.

Text Formatting #

Simple Message #

Cord messages are represented as JSON objects in an array. The simplest message you can send is a text-only message:

JSON:
[
    {
        "type": "p",
        "children": [
            {
                "text": "This is the text of the message"
            }
        ]
    }
]
[
    {
        "type": "p",
        "children": [
            {
                "text": "This is the text of the message"
            }
        ]
    }
]
Copy

Bold, Underline, and Italic Text #

To achieve basic formatting like bold, italic, and underline text, use the example structures below.

JSON:
[
    {
        "type": "p",
        "children": [
            {
                "text": "This is unformatted. "
            },
            {
                "text": "This text is bold.",
                "bold": true
            },
            {
                "text": " "
            },
            {
                "text": "This is underlined.",
                "underline": true
            },
            {
                "text": " "
            },
            {
                "text": "This is italic.",
                "italic": true
            },
            {
                "text": " "
            },
            {
                "text": "I put"
            },
            {
                "text": " "
            },
            {
                "text": "everything",
                "bold": true,
                "underline": true,
                "italic": true
            },
            {
                "text": " "
            },
            {
                "text": "on a bagel. 🥯"
            }
        ]
    }
]
[
    {
        "type": "p",
        "children": [
            {
                "text": "This is unformatted. "
            },
            {
                "text": "This text is bold.",
                "bold": true
            },
            {
                "text": " "
            },
            {
                "text": "This is underlined.",
                "underline": true
            },
            {
                "text": " "
            },
            {
                "text": "This is italic.",
                "italic": true
            },
            {
                "text": " "
            },
            {
                "text": "I put"
            },
            {
                "text": " "
            },
            {
                "text": "everything",
                "bold": true,
                "underline": true,
                "italic": true
            },
            {
                "text": " "
            },
            {
                "text": "on a bagel. 🥯"
            }
        ]
    }
]
Copy

To create a message with link, use the follow structure:

JSON:
[
    {
        "type": "p",
        "children": [
            {
                "type": "link",
                "url": "https://docs.cord.com/",
                "children": [
                    {
                        "text": "Get your docs here!"
                    }
                ]
            }
        ]
    }
]
[
    {
        "type": "p",
        "children": [
            {
                "type": "link",
                "url": "https://docs.cord.com/",
                "children": [
                    {
                        "text": "Get your docs here!"
                    }
                ]
            }
        ]
    }
]
Copy

Mentions #

Message with an @-mention #

To create a message with an @-mention, use the follow structure:

JSON:
[
    {
        "type": "p",
        "children": [
            {
                "text": "Hi, "
            },
            {
                "type": "mention",
                "user": {
                    "id": "123"
                },
                "children": [
                    {
                        "text": "@Unknown User"
                    }
                ]
            },
            {
                "text": "!"
            }
        ]
    }
]
[
    {
        "type": "p",
        "children": [
            {
                "text": "Hi, "
            },
            {
                "type": "mention",
                "user": {
                    "id": "123"
                },
                "children": [
                    {
                        "text": "@Unknown User"
                    }
                ]
            },
            {
                "text": "!"
            }
        ]
    }
]
Copy

Code #

Messages with a code block #

To create a message with a code block, use the following JSON structure:

JSON:
[
    {
        "type": "p",
        "children": [
            {
                "text": "Here's a code block that will work forever, literally!"
            }
        ]
    },
    {
        "type": "code",
        "children": [
            {
                "text": "for (;;);"
            }
        ]
    },
    {
        "type": "p",
        "children": [
            {
                "text": "Here's something after the code block"
            }
        ]
    }
]
[
    {
        "type": "p",
        "children": [
            {
                "text": "Here's a code block that will work forever, literally!"
            }
        ]
    },
    {
        "type": "code",
        "children": [
            {
                "text": "for (;;);"
            }
        ]
    },
    {
        "type": "p",
        "children": [
            {
                "text": "Here's something after the code block"
            }
        ]
    }
]
Copy

Quote #

Messages with a quote #

To create a message with a quote block, use the following JSON structure:

JSON:
[
    {
        "type": "p",
        "children": [
            {
                "text": "Is it not written..."
            }
        ]
    },
    {
        "type": "quote",
        "children": [
            {
                "text": "Don't go out with a wet head, you'll catch cold"
            }
        ]
    },
    {
        "type": "p",
        "children": [
            {
                "text": "- Lu Tze, quoting Mrs. Cosmopilite"
            }
        ]
    }
]
[
    {
        "type": "p",
        "children": [
            {
                "text": "Is it not written..."
            }
        ]
    },
    {
        "type": "quote",
        "children": [
            {
                "text": "Don't go out with a wet head, you'll catch cold"
            }
        ]
    },
    {
        "type": "p",
        "children": [
            {
                "text": "- Lu Tze, quoting Mrs. Cosmopilite"
            }
        ]
    }
]
Copy

Lists #

Messages with Lists #

To create a message with lists, use the following JSON structure:

JSON:
[
    {
        "type": "bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "Bullet list"
                    }
                ]
            }
        ]
    },
    {
        "type": "bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "Two items!"
                    }
                ]
            }
        ]
    }
]
[
    {
        "type": "bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "Bullet list"
                    }
                ]
            }
        ]
    },
    {
        "type": "bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "Two items!"
                    }
                ]
            }
        ]
    }
]
Copy

Messages with Numbered Lists #

To create a message with numbered lists, use the following JSON structure:

JSON:
[
    {
        "type": "number_bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "foo"
                    }
                ]
            }
        ],
        "bulletNumber": 1
    },
    {
        "type": "number_bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "bar"
                    }
                ]
            }
        ],
        "bulletNumber": 2
    },
    {
        "type": "number_bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "baz"
                    }
                ]
            }
        ],
        "bulletNumber": 3
    }
]
[
    {
        "type": "number_bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "foo"
                    }
                ]
            }
        ],
        "bulletNumber": 1
    },
    {
        "type": "number_bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "bar"
                    }
                ]
            }
        ],
        "bulletNumber": 2
    },
    {
        "type": "number_bullet",
        "children": [
            {
                "type": "p",
                "children": [
                    {
                        "text": "baz"
                    }
                ]
            }
        ],
        "bulletNumber": 3
    }
]
Copy

Messages with custom CSS classes #

To create a message with a custom class, that you can then target with your own CSS selectors, use the following JSON structure:

JSON:
[
    {
        "type": "p",
        "class": "purple",
        "children": [
            {
                "text": "Please "
            },
            {
                "text": "read the documentation ",
                "class": "important"
            },
            {
                "text": "carefully."
            }
        ]
    }
]
CSS:
.cord-message-content .purple {
    color: var(--color-purple);
  }
.cord-message-content .important {
  color: red;
  font-weight: bold;
  font-size: 1.2em;
}

[
    {
        "type": "p",
        "class": "purple",
        "children": [
            {
                "text": "Please "
            },
            {
                "text": "read the documentation ",
                "class": "important"
            },
            {
                "text": "carefully."
            }
        ]
    }
]
Copy

Ask Cordy