Skip to main content
Edit any component right on the canvas.

​
On this page

​
Overview

In Lunagraph, every layer on the canvas is editable. Components work a bit differently. They’re pieces you build once and reuse across your canvas, like a Button that appears in several places. Changing an element on the panel, like a color or size, only affects that one copy. But with a component, you can right-click to edit it directly, and once you save, it updates everywhere the component is used.

​
Video walkthrough

​
Before you edit: component or instance?

Use Edit component when you want to update the shared component. If you only want to change one instance, adjust its props in the properties panel instead.

​
What is a component?

A component in Lunagraph is a real React component, the same kind a developer writes in code, running live on the canvas. A component can be:
  • Shared, like Button.tsx, used in multiple places on your canvas.
  • Interactive, reacting to clicks and hovers, not just sitting static.
  • A prototype, something you can click through like the real thing.
If you’ve used Figma, this is similar to Figma’s components. The difference is where they live: a Figma component sits in Figma’s own format, while a Lunagraph component is a real React component in a .tsx file.

​
Edit a component

  1. Right-click the component. Select a component on the canvas, then right-click it.
  2. Choose Edit component. The component becomes editable, so you can work with its styling, layout, and structure directly.
  3. Make your changes. Edit it like any other layer: styles, text, spacing, structure. Or use the AI chat, which is already focused on this component, if you’d rather describe the change than make it by hand.
  4. Save your work. Choose Save to write the visual edits back to the shared component. Every instance that renders that component will receive the update.

​
Save with instructions

Choose Save with instructions when the change needs extra logic that cannot be expressed by the visual edit alone. Describe how the change should behave, and the AI will apply it to the component. For example, after adding an element visually, you could write: “Add this to every bubble, but show it only on hover.”

​
Discard your edit

Choose Discard to leave edit mode without changing the shared component. Lunagraph removes the edits you made during the session and keeps the component as it was.