# Create Rich Text in a Workspace

**URL:** <https://community.bluescape.com/t/create-rich-text-in-a-workspace/2019>\
**Category:** Developer\
**Tags:** api\
**Created:** [July 26, 2022, 6:43pm UTC](https://community.bluescape.com/t/create-rich-text-in-a-workspace/2019 "2022-07-26T18:43:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom\_Garrett](https://avatars.discourse-cdn.com/v4/letter/t/258eb7/32.png) [@Tom\_Garrett](https://community.bluescape.com/u/Tom_Garrett)\
**Post date:** [July 26, 2022, 6:43pm UTC](https://community.bluescape.com/t/create-rich-text-in-a-workspace/2019/1 "2022-07-26T18:43:51Z")

</div>

**Objective** : Create Rich Text elements which can be customized and stylized at creation time in order to add more depth to the Workspace. To perform this, the user only needs the **workspaceId** of where they want the text Element to be added.

All GraphQL API endpoints share the same base URL:

`https://api.apps.us.bluescape.com/v3/graphql`

### Implementation using GraphQL APIs

| Query | createText |
| --- | --- |
| **Comments** | Only workspaceId is needed for this call |

**Example Query** :

```auto
mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {
        createText(workspaceId: $workspaceId, input: $input) {
            id
            transform {x y scaleX scaleY}
            pinned
            zIndex
            text
            style { textTransform fontSize fontFamily verticalAlign color {r g b a }}
            blocks {
                ...on TextBlock { align content}
            }
        }
    }

```

This mutation can be called with the following variables:

```auto
{
    "workspaceId": <workspaceId>,
    "input": {
        "blocks": {
            "block": {
            "align": "left",
            "content": {
                "span": {
                    "text": "Rich Text Example...",
                    "fontSize": 30,
                    "fontFamily": "Helvetica",
                    "fontWeight": "normal",
                    "fontStyle": "italic",
                    "textDecoration": "underline",
                    "color": { "r": 255, "g": 255, "b":255, "a": 1},
                    "backgroundColor": { "r": 0, "g": 0, "b": 200, "a": 1}
                        }
                    }
                }
            } 
        }
    }

```

And this is the text you see created in your workspace:

 ![image](https://us1.discourse-cdn.com/bluescape/original/2X/2/25d912daff930e7a5d04eba758b8f879c76d549a.png)

### Code sample

See below for full code examples of this implementation in cURL, Python, and Node.js.

> **cURL**
>
> ```auto
> curl --location --request POST 'https://api.apps.us.bluescape.com/v3/graphql/' \
> --header 'Authorization: Bearer <SET_TOKEN>' \
> --header 'Content-Type: application/json' \
> --data-raw '{"query":"mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {\n createText(workspaceId: $workspaceId, input: $input) {\n ... on Text {\n id\n transform {x y scaleX scaleY}\n pinned\n zIndex\n text\n style { textTransform fontSize fontFamily verticalAlign color {r g b a }}\n blocks {\n ...on TextBlock {\n align content}}\n }\n }\n }","variables":{"workspaceId":{workspaceId},"input":{"blocks":{"block":{"align":"left","content":{"span":{"text":"Rich Text Example...","fontSize":30,"fontFamily":"Helvetica","fontWeight":"normal","fontStyle":"italic","textDecoration":"underline","color":{"r":23,"g":56,"b":100,"a":1},"backgroundColor":{"r":223,"g":156,"b":200,"a":1}}}}}}}}'
> 
> ```

> **Node.js**
>
> ```auto
> const axios = require('axios');
> 
> const url = "https://api.apps.us.bluescape.com/v3/graphql/"
> const token = "<SET_TOKEN>"
> const workspaceId = "<WORKSPACE_ID>";
> const createTextQuery = 
> `mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {
> createText(workspaceId: $workspaceId, input: $input) {
> ... on Text {
> id
> transform {x y scaleX scaleY}
> pinned
> zIndex
> text
> style { textTransform fontSize fontFamily verticalAlign color {r g b a }}
> blocks {
> ...on TextBlock {
> align content}}
> }
> }
> }`
> 
> const textParams = {
> "workspaceId": workspaceId,
> "input": {
> "blocks": {
> "block": {
> "align": "left",
> "content": {
> "span": {
> "text": "Rich Text Example...",
> "fontSize": 30,
> "fontFamily": "Helvetica",
> "fontWeight": "normal",
> "fontStyle": "italic",
> "textDecoration": "underline",
> "color": { "r": 255, "g": 255, "b":255, "a": 1},
> "backgroundColor": { "r": 0, "g": 0, "b": 200, "a": 1}
> }
> }
> }
> } 
> }
> }
> const createText = async () => {
> try {
> const response = await axios.post(url,
> {query: createTextQuery, variables: textParams}, 
> {headers: {"Authorization": "Bearer " + token}})
>         
> console.log(response.data);
> return response
> }
> catch(error) {
> console.error(error)
> }
> }
> 
> createText();
> 
> ```

> **Python**
>
> ```auto
> import requests
> import pprint
> 
> url = "https://api.apps.us.bluescape.com/v3/graphql/"
> token = "<SET_TOKEN>"
> workspaceId = "<WORKSPACE_ID>";
> query = """
> mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {
> createText(workspaceId: $workspaceId, input: $input) {
> ... on Text {
> id
> transform {x y scaleX scaleY}
> pinned
> zIndex
> text
> style { textTransform fontSize fontFamily verticalAlign color {r g b a }}
> blocks {
> ...on TextBlock {
> align content}}
> }
> }
> }
> """
> 
> params = {
> "workspaceId": workspaceId,
> "input": {
> "blocks": {
> "block": {
> "align": "left",
> "content": {
> "span": {
> "text": "Rich Text Example...",
> "fontSize": 30,
> "fontFamily": "Helvetica",
> "fontWeight": "normal",
> "fontStyle": "italic",
> "textDecoration": "underline",
> "color": { "r": 255, "g": 255, "b":255, "a": 1},
> "backgroundColor": { "r": 0, "g": 0, "b": 200, "a": 1}
> }
> }
> }
> } 
> }
> }
> def makeQuery():
> try:
> response = requests.post(url, 
> headers={"Authorization": "Bearer " + token},
> json={'query': query,
> 'variables': params})
> response.raise_for_status()
> except requests.exceptions.HTTPError as err:
> raise SystemExit(err)
>     
> return response.json()
>     
> 
> if __name__ == " __main__":
> response = makeQuery()
> pprint.pprint(response)
> 
> ```

**Output**

```auto
{
    "data": {
        "createText": {
            "id": "<object_ID>",
            "transform": {
                "x": 0,
                "y": 0,
                "scaleX": 1,
                "scaleY": 1
            },
            "pinned": false,
            "zIndex": 4,
            "text": "Rich Text Example...",
            "style": {
                "textTransform": "none",
                "fontSize": 64,
                "fontFamily": "Dosis",
                "verticalAlign": "top",
                "color": {
                    "r": 255,
                    "g": 255,
                    "b": 255,
                    "a": 1
                }
            },
            "blocks": [
                {
                    "align": "left",
                    "content": [
                        {
                            "span": {
                                "fontFamily": "Helvetica",
                                "fontSize": 30,
                                "fontStyle": "italic",
                                "textDecoration": [
                                    "underline"
                                ],
                                "color": {
                                    "r": 255,
                                    "g": 255,
                                    "b": 255,
                                    "a": 1
                                },
                                "backgroundColor": {
                                    "r": 0,
                                    "g": 0,
                                    "b": 200,
                                    "a": 1
                                },
                                "content": [
                                    {
                                        "text": "Rich Text Example..."
                                    }
                                ]
                            }
                        }
                    ]
                }
            ]
        }
    }
}

```

After running the mutation above, the Rich Text element is added to the workspace.

If you want to create more complex structures, such as lists and applying specific format to a particular word or group of words, please see the example below.

To generate the following Text element use the graphQL mutation below:

 ![image](https://us1.discourse-cdn.com/bluescape/original/2X/2/216a71d8b5dcf2b64794d5100c6114a51e57fcba.png)

```auto
mutation myCreateTextWithBlocks($ws: String! $x: Float! $y: Float!, $width:Float!, $height:Float!) {
        createText(
            workspaceId: $ws
            input: {
                transform: {
                    x:$x 
                    y:$y
                }
                style:{
                    width:$width
                    height:$height
                    fontSize:65
                    fontFamily:"Helvetica"
                    textTransform:none
                    verticalAlign:top
                    color:{ r:255 g:255 b:255 a:1 }
                    backgroundColor:{ r:0 g:0 b:255 a:1 }
                }
                blocks: [
                    {
                        block:{
                            align: left
                            content: [
                                { text: "text block example, line one" }
                            ]
                        }
                    },
                    {
                        block:{
                            align: left
                            content: [
                                { text: "" }
                            ]
                        }
                    },
                    {
                        list:{
                            kind:bullet
                            items: [
                            {
                                indent: 0,
                                content: [
                                    { text: "list 1" }
                                ]
                            },
                            {
                                indent: 1,
                                content: [
                                    { text: "list 2" }
                                ]
                            }
                        ]
                        }
                    },
                    {
                        block:{
                            align: left
                            content: [
                                { text: "" }
                            ]
                        }
                    },
                    {
                        block:{
                            content:[
                                { text:"new " },
                                {
                                    span:{
                                        fontWeight:bold
                                        content:[
                                            { text:"BOLD" }
                                        ]
                                    }
                                },
                                { text:" text" }
                            ]
                        }
                    }       
                ]
            }
        )
        {
            id
            text
            transform {x y}
        }
      }

```

with these variables:

```auto
{
    "ws": "",
    "x": 0,
    "y": 0,
    "width": 900,
    "height":600
}

```

## Query Rich Text in GraphQL

If you want to see the details of the format of Text elements with Rich Text, you can use the query below:

```auto
query getTextElementsfromWorkspace ($workspaceId: String!){
    elements(workspaceId: $workspaceId type: Text ) {
        type: __typename        
        id        
        ... on Text {
              id
            transform {
              x y
            }
            style {
                color { r g b a}
            } 
          blocks {
            ... on TextBlock {
              align            
              content               
            }
            ... on TextList {
              align
              kind
              items {
                align
                indent
                content
              }
            }
            
          }
              
        } 
    }
}

```

use these variables:

```auto
{
    "workspaceId": <workspaceId>
}

```

This query returns a large amount of information on the text element, however, it can be altered to return more or fewer details depending on what is needed.

 

> # Where to Next?
> 
> - [Application Authorization](https://community.bluescape.com/t/api-application-authorization/2025)
> - [Bluescape API Guides](https://community.bluescape.com/t/bluescape-api-guides-landing-page/2020)
> - [Bluescape API Overview](https://community.bluescape.com/t/wip-bluescape-api-overview/2021/2)
> - [Latest Developer topics](https://community.bluescape.com/c/developer/14)
> 
> **Not what you were looking for? Reply below or [Search](https://community.bluescape.com/search) the community and discover more Bluescape.**