Connect Canvas to front end
Learn to incorporate a Canvas composition into your front-end application.
info
The code below expects a published version of the composition be available. If the composition is only available in "preview" state, Uniform will return a null composition, which will result in errors.
For more information on composition state, see the glossary. The methods on the CanvasClient also support the ability to retrieve compositions in a specific state (for example, not "published," which is the default value).
Create API key#
Click the Uniform logo at the top of the page to return to the Uniform team home page.
Create an API key with the following custom permissions:
About this step
If you already have an API key with these permissions, you can skip this step.
Add the following values to your
.envfile. You collected these values when you created the Uniform API key:Uniform value Environment variable API Key UNIFORM_API_KEYProject ID UNIFORM_PROJECT_ID
About this step
Technically you don't need to set these values in environment variables. You could hard-code the values into your app, but using environment variables is a "best practice."
Update front-end app#
The changes needed to the front-end depends on the technology used to build the front-end.
Next.js#
To make these instructions easier to follow, a specific example is used. The example activates Canvas for the following page, where the presentation logic in the <main> tag will be controlled by a user with Canvas:
Nuxt 3#
To make these instructions easier to follow, a specific example is used. The example activates Canvas for the following page, where the presentation logic in the <main> tag will be controlled by a user with Canvas: