Skip to main content

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.