Lazy, lightweight sandbox for embedding on sites

[kof]

Hey, heads up, codesandbox is by far best tool today!

Right now we wanted to use it on JSS landing page and we want many playgrounds, here current status https://typical000.github.io/cssinjs/

The problem is that the sandbox is still too heavy weight for this. We already initialize it only when user scrolls down to it, but eventually we should go even further and only render full sandbox when user clicks on it.

So the idea would be to render something very lightweight first, so we can have many sandboxes on the same landing and only load the rest when user actually wants to edit.

Any ideas?

[CompuIves]

Hey @kof! I think you can get a light implementation (without loaded editor) with this url:

https://codesandbox.io/embed/new?codemirror=1&view=preview

The embed version is a separate application, made to be lightweight. With that url it only loads the preview, and loads the editor when the user changes view to editor. I also made the editor codemirror to lower payload size.

Let me know if this is good enough! I'd love to improve it if you have ideas 😄

[CompuIves]

Oh I think I now see what you mean. Do you mean that we could add an option to only load the sandbox on click?

[kof]

I would render something immediately and the rest on click. Maybe it should be done using separate react components, using codesandbox as a library, because whatever we do in the iframe, it is still a bit too much for a landing page.

[kof]

In that case codesandbox would become also a client-side API.

[CompuIves]

Interesting, I've been thinking of creating a React component out of the preview of CodeSandbox.

It would still involve an iframe, for a realistic html document, but the iframe would not point to anything. This sounds like a cool mind exercise. I'll set up a PR for this today.

I'll also look into some more lazy rendering for the embed, would also make our homepage lighter 😄 .

[kof]

A generated iframe shouldn't be much of a problem as long as you don't load all the js into it, because that would make a lot of js evaluations given many playgrounds on one page.

[kof]

If the only reason for iframe is isolation of css btw. I might have an idea on how to do this without iframe, using jss-isolate, I am using it in production for an embeddable widget.

[CompuIves]

If the only reason for iframe is isolation of css btw. I might have an idea on how to do this without iframe, using jss-isolate, I am using it in production for an embeddable widget.

There are some other reasons, the editor has some web workers for tasks and the Monaco editor needs to lazy load files for it to work. But I started with a library for a simple version, that has a simpler editor but uses the fullon preview of CodeSandbox. I'm definitely interested in how css can be solved, that's something I haven't figured out yet. I'll look at jss-isolate!

[CompuIves]

We got runonclick now, which defers execution of the sandbox on click. We're also working on Sandpack, which allows you to kind of embed CodeSandbox as a component. I'm closing this one now, but we can always reopen it if there are new suggestions.

[kof]

So we have now a light iframe solution that renders editor and preview?

[CompuIves]

I think we had this since release already ( https://codesandbox.io/docs/embedding#smallest-embed). Unless you mean something else?

On Wed, May 9, 2018, 13:58 Oleg Isonen notifications@github.com wrote:

So we have now a light iframe solution that renders editor and preview?

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/CompuIves/codesandbox-client/issues/381#issuecomment-387715334, or mute the thread https://github.com/notifications/unsubscribe-auth/AAj1COVlaw8dVDuKFiyvPel2lQnu0aq0ks5twtnlgaJpZM4Q8dpy .

[kof]

Ok so the difference now is that we don't run user code when user didn't click and runonclick is true, we would see only the editor, but its a full monaco editor initiated immediately, right?

[CompuIves]

Yep! Unless you set the editor to codemirror (by setting codemirror=1), then it will load the lighter codemirror.

On Wed, May 9, 2018, 14:39 Oleg Isonen notifications@github.com wrote:

Ok so the difference now is that we don't run user code when he didn't click and runonclick is true, we would see only the editor, but its a full monaco editor initiated immediately, right?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/CompuIves/codesandbox-client/issues/381#issuecomment-387724875, or mute the thread https://github.com/notifications/unsubscribe-auth/AAj1CDTFLF1SOk7HiZNrzrL0u9OKBMWzks5twuOAgaJpZM4Q8dpy .

[kof]

Do you think we can render a bunch of playgrounds with codemirror and runonclick on a landing page now without making it ugly slow?