Turns text into a styled, rasterizable image layer — pick font, size, weight, alignment, transform, and fill (solid or gradient); it auto-rasterizes when connected downstream and outputs a transparent PNG.
Where: canvas → left rail → Add → Words & data → Styled Text — Type text, style it, then connect or Force Rasterize
Key ideas
- Live styled preview: The node renders your text live as DOM (font family, size, weight, alignment, italic/underline/uppercase) so you see the result instantly without a rasterize round-trip.
- Fill picker: Open the Fill modal to set a solid color or a linear gradient for the type via the shared MultiSelector picker.
- Auto-rasterize on demand: When the output is connected to a consumer (e.g. Layer Compose), style edits debounce and auto-rasterize to a PNG; you can also hit Force Rasterize. Disconnected nodes skip the expensive render.
- Styled Text card: TextStyleNode uses the generic shared-card path. Render styled typography as an image with detailed type, fill, layout, and transform controls.
- Properties sidebar: TextStylePanel.tsx
- Opened surfaces: Fill modal; image lightbox
Steps
- Add a Text Style node, expand it, and type your text in the Text Content box.
- Set Font Family (searchable), Size, Weight, and toggle alignment / italic / underline / uppercase.
- Click the Fill control to choose a solid color or gradient.
- Connect the Image Output handle to a downstream node (it auto-rasterizes) or click Force Rasterize, then use the result ⋯ menu to Add to canvas / Paste to Replace / Download.
Styled Text controls and presets
- Add path: Flowgen → Add → Image & Vector → Styled Text.
- Card: TextStyleNode.
- Properties: TextStylePanel.tsx.
- Controls: Font/size/weight; line height/tracking; fill; alignment/direction; decoration/style/transform; rasterize.
- Opened surfaces: Fill modal; image lightbox.
FAQ
Does it rasterize automatically?
Yes, but only when the node is connected to a downstream consumer — style edits debounce and re-render. A disconnected node stays as a live preview to save work; use Force Rasterize to render anyway.
Can I use a gradient on the text?
Yes. Open the Fill control and switch the picker to gradient (linear) instead of solid.