Prismic Toolbar questions

Hey Joe and Dan,

I’m Angelo, the maintainer of @prismicio/next and @prismicio/react. I’ll do my best to answer your questions below, but let me know if you would like me to expand on any point.

1. There is no edit button as advertised

The edit button is a simple way to navigate from a website’s page to a Prismic document holding that page’s content. To determine which pages to include in the Edit Button’s documents list, the toolbar listens to network requests made to the Prismic API. If your page queries content from an about-us Page document, for example, the toolbar knows to list that as an editable document for the page.

When using Next.js, however, queries to the Prismic API are not made in the browser. Instead, queries are usually done on the server where Prismic Toolbar does not have visibility. As a result, the edit button is not aware of any pages to list, thus it does not appear. This is a limitation of Prismic Toolbar when used with any static or server-based site.

We have ideas on how to support these use cases, such as allowing developers to declare which pages appear on the page via <meta> elements. An initial proof-of-concept implementation of that idea is available to reference here: View PR on GitHub. There is no estimate on when this will be implemented, but your support and need for the feature will help push the feature forward.

Unfortunately, there currently is not an officially supported way to integrate the Edit button on sites built with Next.js or any other static or server-based site. If the Edit Button is crucial to your and your content managers’ workflow, there is a workaround, which is described in the link Pau posted.

Workaround: The toolbar needs to see a client-side request to the Prismic API. If you can re-execute a query containing the Prismic documents on the page in the client, the toolbar should detect the request and the Edit Button should list the documents. This will negatively affect overall site performance and isn’t necessarily recommend, but it is a strategy that will work.

2. Why is the Prismic Toolbar taking screenshots?

This may be an old feature that is no longer used (full disclosure: this code predates my time at Prismic). The toolbar takes a screenshot of the page using html2canvas when a user clicks the “Get a sharable link” button. The toolbar uploads that screenshot to a Prismic-owned S3 bucket. The screenshot is not used in the toolbar or shown when sharing links.

I’ll ask our team if they can provide more background on the purpose of the screenshot. From my understanding, however, it is not used anywhere.

3. Why does the Prismic Toolbar not use versions or hash integrity?

Using a version-less <script> element over a version-specific npm package or a version-specific CDN URL lets us push crucial updates to sites without developer involvement. There certainly is a tradeoff in this approach: allowing us to push updates without your involvement may introduce bugs to a production site. Conversely, we can push bug fixes as soon as they are ready, rather than asking developers to update all of their projects manually.

The package was previously published to npm, but was converted to the <script> -oriented strategy due to low upgrade adoption. When bug fixes or new features were released, developers were not updating their sites to the latest version. Thus, loading the latest version of the toolbar automatically via a <script> element was the solution.

The Prismic Toolbar is treated as an extension of the core Prismic product. We deploy upgrades and new features for Prismic and the toolbar to production after internal QA and testing. The full toolbar is only loaded and made visible when logged in to Prismic or loading a shared preview. Any changes to the toolbar code should only affect “internal” visitors of the site.

Some trust between Prismic and developers is required to use this strategy. Yes, we will push updates to code loaded on your site, similar to analytics software or third-party embeds like YouTube. We ensure that a visitor’s experience is not affected by the toolbar’s code. If you disagree with this approach, we can definitely continue this conversation and come up with improvements. :slightly_smiling_face:


I hope that was helpful. Again, feel free to reach out if you have additional questions or need clarification on anything I described above.

5 Likes