Component preview inputs and viewports

Use project tooling#

Open a component inside a project with its Marko/Vite dependencies installed. Choose Editor, Preview, or Split. The live preview compiles through the project’s toolchain and needs a JCEF-enabled IDE runtime; it does not provide a substitute compiler for an arbitrary standalone file.

For the greeting component, supply JSON matching its input:

{"name":"Ada"}

Edit the greeting text and confirm the rendered output changes. For a card, test both short and long content and any optional fields. Persisted preview input lets you return to the same representative case.

Check responsive layout#

Choose viewport presets and inspect wrapping, overflow, and component height. Changing viewport size checks CSS behavior; it does not simulate every browser/device or install missing project assets.

An absent image or stylesheet should be diagnosed through the project path/build before changing unrelated IDE settings.

Component versus route context#

A component preview needs the input its real caller supplies. A Marko Run route can receive route/framework context instead. If a component only works inside its route, identify that dependency and either preview the route or provide an appropriate component boundary.

Diagnose compilation errors#

Run the project’s normal development/build script outside the preview. Resolve dependency and compilation errors there, then retry. Validate JSON syntax separately: trailing commas or an unexpected property shape can fail before any layout is rendered.