How to use Chii and chobitsu together to embed devtools for a separate iframe.

[ChristopherHButler]

I stumbled across this project while trying to understand how codesandbox are able to embed chrome devtools in their app and use them for another app running in an iframe. You can see it here or open any new react sandbox in the chrome browser. I noticed at some point they load chobitsu so I googled what it is and found my way here.
I am building an app, cdbx.io. It's still very early in development but if you go there and click 'just code' you and choose react it will open an editor with the app running in an iframe. I want to be able to open devtools for that iframe in the panel below. Could someone point me in the right direction of how to do that? I am assuming there are some events I need to send from the preview iframe to the devtools iframe but I'm not really sure where to start. Any help is greatly appreciated.

[CetinSert]

We do that on RTCode.io

[ChristopherHButler]

I got it working now. Just had to take a look at the example in the docs, fairly straight forward :)

[jerrychan7]

Or you can check out the solid.js playground, which is a very good example, it's very clear and pure, even if you don't know anything about the solid.js framework you can still read its source code: https://github.com/solidjs/solid-playground/blob/master/packages/solid-repl/src/components/preview.tsx

In its playground, write the source code on the left, and there are two iframes on the right: one is used to display the rendering results; the other is the DevTools associated with the rendering results.