Skip to main content



This section gets you to activating canvas as quickly as possible. It does not explain each line of code.

  1. Edit the following file:

    import { CanvasClient } from "@uniformdev/canvas";
    import { UniformComposition } from "@uniformdev/canvas-react";

    import LayoutCanvas from "../src/components/LayoutCanvas";

    import content from "../content/content.json";
    import doEnhance from "../lib/enhancer";
    import resolveRenderer from "../lib/resolveRenderer";

    async function getComposition(slug) {
    const client = new CanvasClient({
    apiKey: process.env.UNIFORM_API_KEY,
    projectId: process.env.UNIFORM_PROJECT_ID,
    const { composition } = await client.getCompositionBySlug({
    return composition;

    export async function getStaticProps() {
    const slug = "/";
    const topic = content.find((e) => e.url == slug);

    const composition = await getComposition(slug);

    await doEnhance(composition);

    //Return props for the home page that
    //include the composition and content
    //required by the page components.
    return {
    props: {
    fields: topic.fields,

    export default function Home({ composition, fields }) {
    return (
    <UniformComposition data={composition} resolveRenderer={resolveRenderer}>
    <LayoutCanvas composition={composition} fields={fields} />
    About this step

    This is the completed page file.

  2. Save the file.