Convert to component
Turn a section into a reusable component you can place on any page of the project and edit in one place — in one click, with no AI turn.
Convert to component takes a section that's written into one page and turns it into a component of its own. The page keeps showing it exactly as before, and you can now place the same section on other pages — change it once and every page that uses it changes too.
It runs straight away, without an AI turn.
How to trigger it
- Select the section in the preview.
- In the element toolbar, select the Convert to component icon (the cube).
Genesis confirms with "… is now a reusable component", naming the component and the file it lives in. The toast has an Undo button.
What happens
- The section moves out of the page into a component file, and the page now uses that component in its place. Nothing changes on screen.
- Everything the section needed from the page comes with it. Anything the rest of the page still uses stays on the page.
- Elements inside keep their identity, so the visual editor and the AI still find every heading, button and image in it.
To use it elsewhere, ask the AI — "add the PricingTable component to the About page".
When it can't convert
A message titled Can't convert this section says why:
| Message | What it means |
|---|---|
| This section is already a reusable component | Nothing to do — it's a component already. |
| This section shares data … with the rest of its page | Part of it is tangled with the page. Select Fix with AI in the message; the AI refactors it so it can stand alone. |
| This section is wired to project services | It contains an order form or similar platform element, which has to stay on its page. |
| This section leans on too much of the page | It depends on too much of the page to move automatically. Ask the AI to make it a component. |
| Could not locate this element in the source | Refresh the preview and try again. |
Component or My Blocks?
| Convert to component | My Blocks | |
|---|---|---|
| Where you can use it | Pages of this project | Any of your projects |
| What it is | One shared section — edit it once, it changes everywhere | A copy — each placed block is edited on its own |
| What happens to the page | The section moves into the component | Nothing; the block is a snapshot |
Things worth knowing
- The button isn't offered on locked sections, such as a block synced from another project, or while several elements are selected.
- It changes the page's code. To put the section back inline, use Undo in the confirmation while it's on screen.
Was this helpful? Still stuck? Write to the team