> ## Documentation Index
> Fetch the complete documentation index at: https://lunagraph.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Edit a component
> Make visual changes to a shared React component, then save them to every instance.
Edit any component right on the canvas.
### On this page
* [Overview](#overview)
* [Video walkthrough](#video-walkthrough)
* [Before you edit: component or instance?](#before-you-edit-component-or-instance)
* [What is a component?](#what-is-a-component)
* [Edit a component](#edit-a-component)
* [Discard your edit](#discard-your-edit)
## 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.
| Action | What it affects |
| ------------------------------------------------- | --------------------------------------------- |
| Change a prop in the properties panel | Only the selected instance |
| Choose **Edit component**, make changes, and save | The shared component and every instance |
| Discard your component edit | Nothing; the shared component stays as it was |
## 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.