How to implements some low code feature(like drag and drop component to preview for update code)

[imcuttle]

How to implements some low code feature(like drag and drop component to preview for update code)
Should I build myself codesandbox-client code, for preview iframe communicates with parent window?

[danilowoz]

Hey @imcuttle! Interesting question.
You're pretty much trying to implement the way around what Sandpack does by default, right? If so, I think we can pass messages from the iframe to the Sandpack context and then apply any change in the file:

import { useSandpack } from "@codesandbox/sandpack-react";

const CustomListener = () => {
  const { sandpack, listen } = useSandpack();

  useEffect(() => {
    // listens for any message dispatched between sandpack and the bundler
    const stopListening = listen((msg) => console.log(msg));

    // update file 
    sandpack.updateFile(path, newCode)

    return () => {
      // unsubscribe
      stopListening();
    };
  }, [listen]);

  return null
};

Docs reference:

• https://sandpack.codesandbox.io/docs/api/react/interfaces/UseSandpackReturnType#listen
• https://sandpack.codesandbox.io/docs/api/react/interfaces/SandpackState#updatefile

Hope it makes sense for you. Otherwise, please let me know that I'll be glad to make it work.