Docs · Create
Bring existing component code
Use a working React component as the starting point when its structure should stay and its interface should get better.
5 min read
Outcome and prerequisites
The outcome is a new working version that preserves the supplied component's useful structure and behavior while moving the interface closer to your intent.
- Use a self-contained React component small enough for the intended change to remain legible.
- Include the styles and dependencies the preview actually needs.
- Know what must not change and identify the first visible problem to solve.
Use code as the source of truth
- 01
Paste the component
Add the complete, self-contained source to the normal canvas composer.
- 02
Protect what already works
Name the structure, content, state, or interaction that must remain intact.
- 03
Name what feels off
Ask for one coherent outcome instead of a general redesign of everything.
- 04
Inspect the live result
Check that the supplied behavior survived and that the requested change is actually visible.
- 05
Continue from the stronger version
Refine again or move the component back into the destination codebase.
Expected result
You should have a live version that still behaves like the component you supplied but feels more deliberate. Continue with the refinement guide when another focused change is needed.