Bind and style display text.
Text accepts a literal or field. The host measures the value it paints.
Render a literal
Use a string when the copy belongs to the interface.
import { TextFont, definePlugin, hexColor } from '@editful/canvas-sdk';
export const CANVAS_UI_LITERAL_KIND = 'docs:literal-text';
export default definePlugin({
register(context) {
const kind = context.kind(CANVAS_UI_LITERAL_KIND);
const ui = kind.ui;
kind.hit('rect');
kind.view({
root: ui.text('Display text is not editable canvas text.', {
font: {
family: TextFont.Sans,
size: 20,
weight: 400,
lineHeight: 1.3,
},
color: hexColor('#f0f6fc'),
}),
width: { mode: 'user', min: 240 },
height: { mode: 'fit-content' },
});
},
});Bind fields
Resize the live output or edit its fields. Text reflows without plugin layout code.
import { TextFont, definePlugin, hexColor } from '@editful/canvas-sdk';
export const CANVAS_UI_TEXT_KIND = 'docs:text-card';
export default definePlugin({
register(context) {
const kind = context.kind(CANVAS_UI_TEXT_KIND);
const title = kind.field.string('title');
const caption = kind.field.string('caption');
const ui = kind.ui;
kind.hit('rect');
kind.defaults({
fill: hexColor('#0d1117'),
stroke: hexColor('#30363d'),
strokeWidth: 1,
cornerRadius: 8,
fontSize: 20,
textColor: hexColor('#f0f6fc'),
lineHeight: 1.3,
});
kind.view({
root: ui.box({
fill: 'node',
stroke: 'node',
strokeWidth: 'node',
cornerRadius: 'node',
padding: 24,
child: ui.stack({
axis: 'block',
gap: 10,
children: [
ui.text('Release note', {
font: {
family: TextFont.Mono,
size: 11,
weight: 400,
lineHeight: 1.25,
},
color: hexColor('#9198a1'),
wrap: false,
}),
ui.text(title, {
font: {
family: TextFont.Sans,
size: 'node',
weight: 'node',
lineHeight: 'node',
},
color: 'node',
}),
ui.text(caption, {
font: {
family: TextFont.Sans,
size: 12,
weight: 400,
lineHeight: 1.4,
},
color: hexColor('#9198a1'),
}),
],
}),
}),
width: { mode: 'user', min: 280 },
height: { mode: 'fit-content' },
});
},
});Choose the value source
- Literal
- Use fixed interface copy such as
'Release note'. - Field handle
- Use node data such as
title. Field updates reflow the view. - Fixed style
- Set font metrics and a packed color at registration.
- Node style
- Use
'node'to inherit matching typography or color.
Wrap deliberately
Wrapping is on by default. Set wrap: false only for short labels whose intrinsic width should participate in an inline stack.
Display is not editing. A text view never creates a text facet or opens the canvas text editor.