Skip to main content

Adding Text

The Kittl SDK enables text addition and styling directly to the canvas using kittl.design.text.

Adding Text to the Board​

To insert a text object, specify its content string, positional data (the left and top properties), dimensions, and adjust its visual properties using textProperties.

const textResult = await kittl.design.text.addText({
    text: 'Hello, Kittl',
    position: {
        absolute: {
            left: 100,
            top: 100,
        },
    },
    size: {
        width: 400,
        height: 100
    },
    textProperties: {
        fontFamily: 'Inter',
        fontSize: 48,
        fill: '#FF0055',
        textAlign: 'center'
    }
});

if (textResult.isOk) {
    console.log('Text object added:', textResult.result);
}

This base setup is enough to render initialized typography on the artboard.

Updating Text​

Use updateText to modify an existing text element's content, position, rotation, or styling. All properties except textId are optional.

// Update content and position
await kittl.design.text.updateText({
    textId: 'my-text-id',
    text: 'Updated content',
    left: 200,
    top: 150,
});

// Update styling
await kittl.design.text.updateText({
    textId: 'my-text-id',
    fontFamily: 'Helvetica',
    fontSize: 64,
    fill: '#0000FF',
    fontWeight: 'Bold',
    textAlign: 'right',
    lineHeight: 1.5,
});

// Rotate text
await kittl.design.text.updateText({
    textId: 'my-text-id',
    angle: 15,
});

Updating Render Plugins​

Render plugins control how text shadows are rendered. Use updateRenderPlugin to modify one on an existing text element.

await kittl.design.text.updateRenderPlugin({
    textId: 'my-text-id',
    renderPluginId: 'plugin-id',
    renderPlugin: {
        color: '#000000',  // Shadow color
        angle: 45,         // Shadow angle in degrees
        offset: 5,         // Shadow offset distance
    },
});

See Text API Reference for render plugin properties.

Render plugins may also accept additional type-specific properties beyond the ones listed above.

Updating Decoration Plugins​

Decoration plugins add visual embellishments to text. Use updateDecorationPlugin to modify one.

await kittl.design.text.updateDecorationPlugin({
    textId: 'my-text-id',
    decorationPluginId: 'decoration-id',
    decorationPlugin: {
        fillStyle: '#FF0000', // Decoration fill color
    },
});

See Text API Reference for decoration plugin properties.

Decoration plugins may also accept additional type-specific properties beyond the ones listed above.

TextProperties Reference​

The textProperties object is used both when adding and updating text. All properties are optional.

See Text API Reference for the full list of TextProperties.