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.