codesandbox / codesandbox/codesandbox-client

Cannot get terminal to work in CodeSandbox embed

Open
#3,356 13 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🤔 Improvement SSE
Dominant language
JavaScript
Stars
13.6k
Forks
2.4k
Avg merge
6d 19h
Merged PRs (30d)
2

Description

Hi,

I have a CodeSandbox which is a basic Express app.
You can find it here: https://codesandbox.io/s/cold-butterfly-nl30s
As you can see, when you visit the above URL, "Hello World!" is displayed in the preview pane and "It Works!" is logged to the terminal.

My problem is that when I embed the sandbox on our site and set the terminal to be open in the embed, nothing is logged to the terminal.

You can see the problem demonstrated here: https://www.sitepoint.com/?p=174674&preview=1&_ppp=efe3e7b8a1

"Hello World!" is displayed in the preview pane, as expected. However the terminal remains blank (I would like to see "It Works!" logged).

Here is my embed code:

<iframe src="https://codesandbox.io/embed/cold-butterfly-nl30s?codemirror=1&expanddevtools=1&fontsize=14&hidenavigation=1&moduleview=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="cold-butterfly-nl30s"
     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
   ></iframe>

What am I doing wrong?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by opening the linked CodeSandbox and reproducing the behavior in the embedded iframe using the provided HTML. Compare the standalone and embedded terminal output, focusing on the embed configuration and terminal entry point. Done means the embedded terminal displays "It Works!" as it does in the preview's standalone view.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
devtools, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.