Instances and what they can change
Component instances in Tessolo stay in sync with the original but can override chosen content — overrides, exposed props, nesting, translations.
Each copy of a component on a page is an instance. It follows the component's structure and style — and can override specific pieces of content.
That's the useful shape: five feature cards that are identical in layout and different in what they say.
Selecting an instance
Click it and the right panel says Component instance · {name}. Clicking a piece inside it also selects the instance — you can't select its internals from the canvas, because those belong to the component.
The panel lists what this instance is allowed to change, usually the text and images.
Overriding
Change the value in the panel and this instance shows yours. Everything else — layout, colours, spacing — still follows the component.
Leave a field blank and it uses the component's default. So clearing an override is how you get back in sync, not deleting and re-inserting.
To change layout or style for one instance, you have to detach it. The panel says so.
Choosing what instances can change
By default, every text and image in a component is overridable. That's usually right.
For finer control, open the component for editing and use What instances can change. Turn individual pieces on or off, and give each a name editors will understand — the placeholder suggests "Card title".
Two reasons to bother:
Fewer, clearer fields. A component with twelve overridable pieces gives editors twelve unlabelled boxes. Exposing four, named properly, is far easier to use.
Locking things down. A legal disclaimer that must be identical everywhere should not be overridable.
Back to automatic returns to "all text and images overridable".
Nesting
Components can contain other components, up to five levels deep.
One limit worth knowing: an override on an inner instance can't be re-overridden from the outer one. If you need that, you're usually better off with two separate components.
Translations
Text inside an instance is translated by double-clicking it on the canvas, like any other text. The panel points this out when you select an instance in translation mode.
Creating a component
Turn a section into a reusable Tessolo component: select it, create the component, insert more instances, and when a preset is the better choice.
Editing and detaching
Edit a Tessolo component once and update every instance, rename or delete it, or detach a single instance to change it on its own.