Components and refactoring

Open an existing component#

Open a .marko file inside a project with its dependencies installed. Both angle and concise syntax receive highlighting, structure, folding, completion, and diagnostics. Use Go to Declaration on a custom tag to verify that it resolves to the intended local or package component.

Keep references synchronized#

Use Refactor → Rename on a component or the IDE’s file move operation. Review the usage preview so tag references are updated across the project. Renaming with an external file manager can leave references unchanged.

marko.json participates in component discovery. Use its completion and validation when adding custom tag directories or package catalogs, and test a nested component reference afterward.

Extract a component#

Select the markup to reuse and invoke Extract Marko Component. Review the proposed component, inferred Input properties, dependencies, and rewritten call site. The refactoring preserves imports where possible and checks dependencies before applying edits.

After extraction, open both the original and generated component, preview them with representative input, and run the project’s normal build. A partial selection or a dependency that cannot move safely needs to be simplified before extraction.