How to use the "code" "javascript" prop type in code components?

Hi Guys,
I am wondering what’s the usecase of the type: “code” and lang: “javascript” property in Code Component API. I tried using it but the value is stringified. What’s the recommended way to deserialize it?

Hey Asim, I am using it this way:

PLASMIC.registerComponent(ScriptContainer, {
  name: "ScriptContainer",
  displayName: "Script",
  props: {
    code: {
      type: "code",
      lang: "javascript",
      defaultValue: "",
    src: "string",
import Script from "next/script";

export function ScriptContainer({ code, src }) {
  return (
      {src !== "" && src !== undefined ? (
          id={`script-${Math.floor(Math.random() * 100000)}`}
      ) : (
          id={`script-${Math.floor(Math.random() * 100000)}`}
            __html: code,

Thanks @injured_landfowl
I was thinking more in a way to use it inside react component as arbitrary chunk of code.

For example, I would expose onClick function to studio and user can define an onClick over there and they will have access to Component state

Yeah! You can definitely do that as well, I think it would just involve eval-ing the code - but the complexity is likely in app-specific concerns, such as what variables you want to introduce into scope, etc…

Yeah, I tried considering it but I was thinking of all the subtleties that comes along with eval regarding security.
and also if we will have to eval it then what would be the main differences between a normal string/object prop and the new code property.

Is there any other usages in the studio, as I have seen there is a Custom Code Expression option under Set Visibility I wonder how can we use that and what execution context apply over there.

There’s no difference in that they’re both a string, the main difference is in the input UI for the user—so the code input actually gives you a proper monaco editor with syntax highlighting set to the specified language, etc.

Oh! That custom code expression for visibility is a hidden feature :sweat_smile:

But basically we’ll be adding the ability to set expressions for any prop, for visibility, and for repetition