Activate the front end
caution
Contextual editing requires preview mode to be activated first. The instructions have changed for newer package versions (v18.0.0+), make sure you're using the latest implementation.
Supported frameworks
The Uniform SDK works with Next and Nuxt 3.
Next.js
Contextual editing is enabled by default when using <UniformComposition />
to render your compositions. If you're using enhancers, make sure you pass the enhancing function to the contextualEditingEnhancer
prop.
ExampleCompostition.jsx
import {
UniformComposition,
createUniformApiEnhancer,
} from "@uniformdev/canvas-react";
export default function PageComposition({ preview, data: composition }) {
// create enhancer function using preview mode
const contextualEditingEnhancer = createUniformApiEnhancer({
apiUrl: "/api/preview",
});
return (
<div>
<UniformComposition
data={composition}
// enable automatic enhancing for contextual editing
contextualEditingEnhancer={contextualEditingEnhancer}
>
{/* Render addtional slots here */}
</UniformComposition>
</div>
);
}
Nuxt 3
Contextual Editing is enabled in by default when using <UniformComposition />
to render your compositions.
If you're using useUniformComposition
, the enhancer will be automatically inherited by <UniformComposition />
.
Otheriwse, you'll need to pass it manually via the contextualEditingEnhancer
prop.