Add global script tags with Plasmic Loader.

Developer Support
1

Are there any best practise to add global script tags when using plasmic loader? I am using nextjs, and you could use _app.tsx for it, but then I don’t know to don’t load the script tags while within editor, nor do I know how I could make use of global contexts to add some configuration options within the editor :confused:

2

Hi @testy_echidna, if you are adding script tags to your global app tsx, then once you have set up app hosting, they should already be running within your Plasmic Studio pages. Have you already set this up? https://docs.plasmic.app/learn/app-hosting/

3

this is all set up and works. I’ve now added a context, and I can modify it in studio, and locally. Although changes/overrides from studio are not used within the app. The docs don’t mention what steps to take in order to make contexts working unfortunately (it’s just a guess that I have to register AppContext.Provider instead of AppContext , as I got an TS error):

// ./contexts/AppContext.tsx
import { createContext } from "react";

type AppContextType = {
   something?: string;
};

export const AppContext = createContext<AppContextType>({
   something: "test",
});

// ./pages/_document.tsx
import { AppContext } from "@/contexts/AppContext";
import { Html, Main, Head, NextScript } from "next/document";
import { useContext } from "react";

export default function Document() {
   const appContext = useContext(AppContext);

   return (
      <Html>
         <Head>
            <meta property="something" content={appContext.something} />
         </Head>
         <body>
            <Main />
            <NextScript />
         </body>
      </Html>
   );
}

// ./plasmic-init.ts
// ...
PLASMIC.registerGlobalContext(AppContext.Provider, {
   name: "AppContext",
   props: {
      something: "string",
   },
});

Now when I inspect the HTML, it uses “test” as value instead of what I defined in studio. I think I’m close, something is missing :confused: can you help me out?