Activate visual editing
Uniform Canvas offers a visual editing workspace, which facilitates making structural changes directly from within the preview panel. This is available for both compositions and patterns. The Uniform SDK works with Next.js and Nuxt 3.
Visual editing for compositions#
warning
Visual editing requires preview mode be activated first. The instructions have changed for newer package versions (v18.0.0+), make sure you're using the latest implementation.
Visual editing for patterns#
Unlike compositions, patterns don't have a project map node assigned. This means that the application doesn't know which route in your front-end app can preview a pattern.
To make this possible, you need to build a page dedicated to previewing patterns. You'll create a new route in your front-end application (for example, /playground), add <UniformPlayground /> to that page, and then let the SDK know where to redirect the pattern preview requests, using the playgroundPath attribute. See the framework-specific instructions below to learn how to achieve that.