Reuse a Design with Components

Goal

Draw something once, use it everywhere, and have it look right in both light and dark.

Three things, and they work together: the Components panel you drag from, states a component can be shown in, and theme colours that follow the reader rather than the author.

The Components panel

The panel on the left of the canvas holds two lists at once: Layers at the top, which you already know, and Components underneath it. Drag the line between them to give one more room — a deep tree wants one split, a design full of components wants the other — and drag the panel's outer edge to widen the whole thing. Both lines take the arrow keys as well as the mouse.

Press a list's heading to fold it away, and the other takes the whole panel; press the heading again to bring it back, exactly where you left the line. One list always stays open, so the heading of the last open one does not respond.

Components holds these lists:

Group	What it is
Controls	The platform's own — a Button, a Text box, a Text area, a Tick box, a Dropdown, a Date picker, a File picker
Elements	What a screen is made of — The screen, A region, A list, A list item, A heading, A paragraph, A link
From other apps	Components drawn in the solution’s other apps appear here, ready to place.
Components	The ones you made in this design

Drag one onto the canvas and it lands where you dropped it. Or click it (or press Enter on it) and it lands in the middle of what you are looking at — worth knowing if you are working without a mouse.

Dragging a control out of this panel is the quick way to get a real control: it arrives already being a Text box, at about the size a text box is and painted like one, instead of arriving as a rectangle you then have to go and classify in the inspector.

Dragging an element is how you build the shape of the screen. A region arrives already tagged, so it becomes a real <section> and a heading becomes a real heading — which is what puts your screen in a screen reader's outline and what makes Ctrl+F find your text. A plain rectangle can be tagged afterwards on the Screen tab; dropping the element saves you remembering to.

There are no shapes in this panel

There used to be, and they moved back where they work: the tool rail on the far left has every shape, and a tool is a mode — pick it, then drag out the size you want, which is what you want for a line or a pen path where the drag is the shape. This panel is half a rail tall and shares that height with the object tree, so it holds what you can get only here.

note

Controls and Elements only appear when you are designing a screen. On a report or a dashboard neither a text box nor a region would mean anything, so neither is offered.

Making a component

Select the objects you want to reuse, right-click, and choose Make component. They become a component's master — and the master appears in the Components panel straight away.

What you selected becomes the component. If you selected one object — a card you drew in a frame, a status chip you drew as a single rectangle, a group holding an icon and its label — that object is the master, in the place it was already in, and the component takes its name. Nothing is added above it, so the tree does not grow a level and you do not end up with a "Component" sitting over the name you chose. Select several objects at once and they are wrapped in a frame, because a component needs one root and a loose selection has none.

Since the component is the object, its name follows it: rename the layer and the component is renamed with it, in the Components panel and everywhere it is offered.

From then on:

• Drag it out of the panel as many times as you like. Each one is an instance.
• Edit the master and every instance changes with it.
• Add a part to it later. Select the master, press Shift+2 to bring it into view, and place something from the palette inside it: a text, a link, a button. It becomes part of the component, and every instance gets it.
• Choose what an instance may change. Select a layer inside the master and tick the properties you want instances to be able to override. Everything you do not tick stays locked to the master — which is the point: a component is only worth having if it is actually the same everywhere.

Telling the master from an instance

In the Layers list they carry different glyphs, so you can tell at a glance which is which without clicking anything: the four-diamond is the master — the one definition — and the single hollow diamond is an instance, a copy of it. Hover either to see which it is in words. Only the outermost row of each is marked; the layers inside belong to it and are not marked again.

Getting to the master from an instance

An instance cannot be edited where it sits, so when you want to change it you have to go to its master. Two ways, and both work from a layer inside an instance as well as from the instance itself:

• Right-click it and choose Go to main component.
• In the inspector, press Go to main component in the Instance panel, under the component's name.

Either one selects the master and brings it into view, so the panel is describing the thing you are about to edit rather than the copy you came from.

Getting the shapes back: Duplicate as frame

Duplicate on a component does what it says and not what you may have meant: on a master it makes a second master, and on an instance a second instance. Both keep following something, which is the whole point of a component — and the wrong answer when what you want is "this card is nearly right, let me have one I can change freely".

Right-click a component or an instance and choose Duplicate as frame. What lands is an ordinary frame full of ordinary shapes: the same drawing, no longer following anything, editable everywhere. Make a component out of it later if it earns one — and since a frame becomes the component itself, that costs you no extra level in the tree.

The drawn states do not come with it. A state is a picture of a component, and a copy that is no longer one has nothing for those pictures to be of.

Making an instance ordinary: Detach instance

Right-click an instance — or anything inside one — and choose Detach instance. It becomes an ordinary frame where it stands: the same shapes, the same place, no longer following the master, and every part of it editable. Nothing is copied, unlike Duplicate as frame. A master cannot be detached; delete it instead.

Giving a component properties

A component is worth more when each copy can say something different. That is what properties are, and there are two kinds — the difference is where the value lives.

note

Properties and events are on the Screen tab, under Component interface — not on Graphic with the fills and corner radii. A property is what a screen sets and an event is what it hears; neither is a fact about the drawing, and both are read by the expressions on that same tab.

The drawn kind: tick a layer's property

Select a layer inside the master and tick a property under Expose on instances — that tick is on the Graphic tab, where the layer's other properties are. It declares a property named after the layer — Caption + text becomes captionText — and it appears in the Properties list under Component interface on the Screen tab.

An instance sets it by editing its own copy: click into the instance, change the words or the colour, and it sticks. You see it on the canvas while you lay the screen out, which is the whole point of this kind.

The value kind: add one yourself

Select the component's master, go to the Screen tab and press ＋ Property under Component interface → Properties. Give it a name and a kind (Text, Number, Yes / no).

A default, if you want one, is written on the code page. With the master still selected, press Write code (the </> button), pick the property from the list beside the editor, and write the expression: "Untitled", 0, false. It is BS like everything else on this screen, so it is written where the rest of the BS is.

Nothing shows yet, because nothing is drawn for it. Bind something to it: select a layer inside the master, and under Text (or Shown, or Enabled) write props.title. See Make a screen react for how binding works.

Now every instance can be given its own value: select it, and the Instance panel lists the same properties. A value property takes an expression, so it can be a literal — "Standard" — or follow the screen: state.chosenPlan. When the screen's state changes, the card follows.

note

Only the value kind can be read with props. A drawn property is set on the instance's own copy of a layer; there is nothing for an expression to read. If you want a component's insides to use a value, add a property here and bind to it.

Raising an event

A component should say what happened, not decide what it means — the screen it is placed on decides that, and each screen may decide differently.

1. Select the master, go to the Screen tab and press ＋ Event under Component interface → Events. Name it: chosen, submitted.
2. Inside the component, from any handler, raise it: emit("chosen", props.title). The second argument is optional.
3. Select an instance and open its Screen tab. Its Events list now has your event, with a box for what this screen does about it — ordinary handler code, in the screen's own scope. What the component sent is event.payload.

The same component on the same screen twice can answer differently, because the handler belongs to the instance. That is the difference between an event and a shared state field.

tip

Try it in the Choose a plan sample: one card, placed twice, with different plans and two different answers to the same event.

Giving a component states

A component can look different depending on what it is: an error, a warning, something selected, something still loading.

States belong to the component, and the component is where you declare them. Select the component's master and the inspector's Component panel lists them:

• Normal heads the list, and there is nothing to draw for it — the master is Normal.
• Under it, every state you have added. Press one to go straight to its drawing.

To add one:

1. Select the component's master.
2. In the Component panel, under States, type a State — anything your screen actually has: invalid, overBudget, awaitingApproval — or pick one of the suggestions. Press ＋ State.
3. A variant appears directly under the component, in the same frame the component is in, named <Component> — <state>. Change its colours. That is the state.

tip

Variants live beside the component, not in a box of their own. They stack down the component's own column — the second under the first, and so on — and if the component is inside a frame, that frame grows downwards to make room; nothing already in it moves.

There used to be a box around them, called <Component> variants. It is gone: a component's states are its variants, so a box between a component and its own states was one more level in the layers tree and made the states read as a separate list kept somewhere else. If you have a screen that still has one, it comes apart the next time you open that screen — the variants stay exactly where they are drawn, and the empty box goes.

Nothing a variant draws renders on the page. A variant is a picture of a component, not part of the screen, and it is skipped by the compiler wherever you put it — which is what makes it safe for one to sit inside your layout.

Three frames a variant will not join, and each for a reason: the screen frame, because its size is the screen's size and growing it would resize your screen every time you drew a state; an auto-layout frame, because it would be laid out into your flow and push your drawing around; and a component that is not in a frame at all. In all three it goes on the canvas, under the component.

The name you give the variant is the state's name. That is the whole of it: there is no second list to keep in step with the drawings.

This is the only place a state is added. An ordinary object has none: its Screen tab says so and points at Make component. One gesture, in one place, beside the list of the states that already exist — and a component with a single instance is a perfectly good component if all you wanted was a hover on one button.

The pointer itself

A drawn box that does something looks exactly like a drawn box that does not, and the mouse pointer is the only thing that tells somebody which — before they click.

Select any object and its Screen tab has a Pointer picker: Hand, Text, Move, Grab, Not allowed, Busy, or Arrow. Set it on a variant and it applies only in that state, which is usually what you want: a Hand on the hover variant is how a drawn card says it can be pressed.

It costs nothing. The pointer is part of the drawing, so it goes into the screen's stylesheet with every other difference that state makes — no handler, and nothing runs when you move the mouse.

The empty option is As it comes, and it is not the same as Arrow. Unset means "whatever this would have been anyway", which for a real button is already a hand; Arrow is you asking for the arrow even there.

While the pointer is on it

Select a variant and its Screen tab has a While picker: Always, or Hover, Pressed, Focused.

That is the second half of what a state is, and it lives on the drawing because that is where the answer is obvious: this is the picture of Invalid, and this is what Invalid looks like under the pointer. It is also re-answerable — an Invalid drawn last week becomes Invalid + Hover without being retyped or re-drawn.

Two things it will not do, and both say why:

• It will not collide. If you already have an Invalid + Hover, the picker refuses to make a second one — one drawing per state, or nothing can say which of two was meant.
• Its Always is greyed out on a state that is only an interaction. A variant named hover is the hover state; taking the interaction away would leave it with no name. If you want a state that is not tied to an interaction, draw one with a name of your own — overBudget.

Setting a While on a state also unpins any instance that was showing it, because only a state with no interaction can be pinned — nothing can declare something permanently pointed-at.

note

You cannot draw a state on an instance, and the inspector says so when you select one. A state on a copy would be a state only that copy has — invisible from the component, missing from every other instance, and gone the moment the instance is reset. Go to the main component and add it there, and every instance can be shown in it.

The state's name is yours. Invalid, Success and the rest are only suggestions: type awaitingApproval, overBudget or whatever this screen actually has, and it behaves exactly like the suggested ones. Use letters, digits, - and _, starting with a letter.

The interactions are fixed, and that is the one place you cannot invent a name: Hover, Pressed and Focused are the browser's, which is why they cost nothing and work without you writing anything. They are not typed into the name either — the variant's While picker is where you say which one applies.

note

Disabled is a name, not a While. It used to be a fourth entry in that picker, and it does not belong there: the three above are things somebody is doing, and each stops the moment they stop. Disabled is what the control is — your screen decided it — so it is an ordinary state name, typed as disabled.

It is also the one name you never have to say when is on. The screen already knows, from the control's Disabled tick or its Enabled expression. Name a variant disabled and a control that may not be used wears it, with no expression to write.

Now, on any instance of that component, the inspector offers Shown in state. Pick Invalid and that instance is drawn as the error, right there on the canvas, while you lay the screen out. The others stay Normal.

Normal is the master. There is nothing to draw for it, and nothing to pick — leaving Shown in state on Normal means "the way you drew it".

Only the left-hand list can be shown. Shown in state offers Invalid, Success and the rest, but not Hover — that one is the browser's to decide, and a screen that claimed something was permanently hovered would be a screen that lies. Draw the hover state and it still works; you just do not choose it.

Two more things worth knowing:

• Only the differences are kept. Change the copy's border colour and the border colour is what the state means. Resize the master afterwards and every state follows, because a state never changes size or position.
• Combinations fall back on their own. If you draw Success and Success + Hover, a user pointing at it gets the second and a user not pointing at it gets the first. If you only drew Success, pointing at it still shows Success. You never have to draw every combination.

Turning a state on from code

Choosing a state while designing is one half. The other is the running screen changing it, and that is one line in a handler:

setVisualState("invalid");

setVisualState("") puts it back to Normal. Write it wherever the screen finds out — a button's click, a box's change — on the Code page, the same place every other handler is written. See Make a screen react for what a handler can do.

It names no object, and does not need to. The state it changes is the nearest thing at or above the handler that has a state drawn on it. Draw a state of a card, wire a handler to a button inside that card, and the call is about the card — which is the answer in every drawing, because a state is drawn on the object it changes and the handler is wired to something inside it.

The state belongs to the object it was drawn on, and it reaches inside it: draw a state of a card and the label, the border and everything else you changed in the copy all follow together. One call, one place to look when a state is on and should not be.

Interaction states are not set from code, and the panel says so: the browser already decides when something is pointed at, pressed or focused.

A state nothing ever sets still works — it is what Shown in state pins an instance to while you lay a screen out. Code, when it speaks, replaces the pin.

note

There was an Add a condition button here and there is not any more. It took an expression the screen re-checked constantly, which meant a screen had two ways to decide what something looked like — a variant that switched itself on, beside handlers that could not touch it, and nothing on the canvas to say which one a given variant was using. A screen decides things in one place now.

The cost is real and worth knowing: a condition turned itself on the moment the screen loaded, where a handler only runs when something happens. If a state should be on before anybody has done anything, pin it with Shown in state — that is what a pin has always been for, and code replaces it the first time a handler speaks.

Theme colours

Under the Fill and Stroke colour pickers there is a row of round swatches. Those are the platform's theme colours — Background, Surface, Text, Secondary text, Border, Primary, Error, Success.

Pick one instead of a colour and the object stops being that colour and starts being that role. Which matters because:

• It follows the reader's theme. Someone using Parsware in dark mode sees your screen in dark: the surfaces go dark, the text goes light, the borders adjust. You do not draw it twice.
• It follows the tenant's accent. Primary is whatever accent colour has been chosen, not a blue you picked in 2026.

Press the moon in the toolbar to see your drawing in dark, and the sun to come back. That switch changes only what you are looking at — it does not change the application's own theme, which lives in Settings.

Clicking the swatch that is already chosen detaches it, leaving the colour it was showing as an ordinary colour. That is the way back if you decide you wanted that exact grey after all.

tip

The Styles frame in a new design is already built out of theme colours. Point your shapes at those swatches and everything follows the theme for free.

Shared styles

A shared style is a shape the others follow. Select a shape and press Save as color (its fill) or Save as shape (fill, border, corner radius, opacity and shadow); a text has Save as text. The shape stays on the canvas, and its Style section says how many shapes follow it.

To follow one, open the dropdown above Solid, Linear and Radial in the Fill section, the Style dropdown at the top for a shape style, or the Text style dropdown in the Text section. Change the style's own shape and everything following it changes. Give a follower a value of your own and it stops following; Unmark turns the style back into an ordinary shape, and the shapes that followed it keep their values. Insert → Default styles adds a ready-made set.

The dropdowns work from the keyboard: Enter or Space opens one, the arrow keys move through it and Escape closes it.

Prerequisites

• A screen to draw on — see Create a Studio app.

Steps

1. Draw the thing you want to reuse — a status chip, a field with its label, a card.
2. Select it, right-click, Make component.
3. Drag it out of the Components list twice.
4. Select the master, and under States type invalid, then press ＋ State.
5. Change the variant's border to the Error theme colour.
6. Select the second instance and set Shown in state to Invalid. It changes on the canvas.
7. Press the moon in the toolbar. Everything painted with a theme colour follows.
8. Press Save.

Troubleshooting

• The Components list is empty. — nothing in this design is a component yet. Select some objects and choose Make component.
• Shown in state is not offered. — either the selected object is not an instance (select its outermost box), or its component has no states yet: select the master and add one under States.
• There is no ＋ State button. — the selected object is not a component's master. Select the component's outermost box, or press its name on an instance to go there.
• There is no ＋ Instance button any more. — placing another one is the Components list's job: drag the component out to exactly where you want it. Right-click → Instance still works too.
• I pinned an instance to a state and nothing changed. — the state's copy is identical to the master. Change a colour on the copy.
• Dragging does nothing. — drop it on the canvas itself, not on a panel. Or just click the row: it lands in the middle of the view.
• The dark preview looks the same. — the drawing uses ordinary colours rather than theme colours. Pick from the round swatches under the colour picker.
• My control ignores the theme colour I gave it. — a control's look is the platform's, so it already follows the theme; only its position and size come from your drawing.
• I edited an instance and it snapped back. — that property is locked to the master. Select the matching layer inside the master and tick it under Expose on instances.
• I added a property and nothing changed. — a value property has nothing drawn for it. Bind something inside the master to props.<name>, or it is a value nobody reads.
• props.something is empty in an expression. — either the component has no property by that name, or the one it has is the drawn kind, which an expression cannot read. Add a value property and bind to that.
• My event does nothing. — check three things: the component declares it (Events, on the master), a handler inside the component actually calls emit("name"), and the instance has a handler for it. A component that raises an event nobody answered is not an error.
• I deleted a state and the instances that used it look normal again. — that is deliberate, and the confirmation said so: an instance pinned to a state that no longer exists goes back to Normal rather than disappearing.
• I dragged the caption inside a button and it left the component. — fixed. A part of a component cannot be dragged out of it any more; the caption moves where you put it, including past the button's edge, and stays part of the button. Only the component's own frame moves in and out of the frames around it.
• I deleted a component and drawings elsewhere on the screen went with it. — also deliberate, and also in the confirmation: an instance is a copy of the component, so a component that no longer exists has no copies. The count in the dialog is how many there were.

Removing a state, or a whole component

Both ask first — and both only when there is something to lose.

• Removing a state (the ✕ beside it in the States list) takes its drawing away, and any instance shown in that state goes back to Normal. If nothing was pinned to it, it is removed with no question.
• Removing a component (select its master and press Delete) takes its instances and every state drawn for it with it, and the dialog counts both. That is the one worth reading: the instances may be on a different part of the screen from the master you selected, and the drawn states are off beside it. A component with neither is removed with no question.
• Deleting something a component was drawn inside — a frame holding a card you made a component of — removes that component too, and asks first, naming how many go. This is the loss you cannot see coming from what you selected: the frame looks like a frame.

The last one used to happen silently, and it was worth a fix of its own. The component was taken off the canvas and its definition stayed behind, pointing at a drawing that no longer existed — so the palette went on listing it and dragging it out did nothing at all. If you have a component in that state, opening the app now clears the ghost, and you will see honestly that there is nothing in it to place.

No dialog appears for a gesture that only affects what you selected, because a confirmation that asks whether you meant the thing you just did is a click that teaches you to stop reading.

One deletion does ask, and it asks at Save: a component that other apps place. Your components are offered to every other app in the environment, so deleting one is a change to theirs — the question names them, and cancelling leaves your canvas exactly as it is. See Use a component in another app.

Related scenarios

• Use a component in another app.
• Draw a Studio app.
• Create a Studio app.