Feature request: feature for view console

[kuduzow]

Tell us how you think we can improve Sandpack

It would be useful to have component like <SandpackConsole> that renders... a sandpack's console.

Packages affected

• [x] sandpack-client (probably)
• [x] sandpack-react

How would your idea work?

It might be a component that renders console or props like <SandpackPreview console> to include console into preview.

Do you have any examples of how you would like to see us implement it?

It depends on implementation way. The first example right on codesandbox.io ("Console" button on the bottom of preview).

Another way is something like this:

[danilowoz]

Hey @kuduzow, that would be great!

I have added your feature request to our internal backlog which we use to prioritize what to build next. We can't make any promises about the timing, but it's on the list!

If you'd like to work on this feature with us, please create a pull request and we'll help you along the way.

For others landing on this issue, feel free to add more context or simply leave a thumbs up 👍 on this comment if you find this feature useful.

[rvlewerissa]

Hi @danilowoz, I was wondering how the following code preview is created (link here):

It looks as if it's using CodeSandbox Embedding, but it doesn't use an iframe. Any idea how to implement something like this? (No iframe + with console feature)

Thank you!

[danilowoz]

Hey @rvlewerissa. The link you sent uses CodeSandbox Embedding, which supports the console component and is wrapped in an iframe. However, we still don't have this component properly working on Sandpack, but we're trying to priority it, as this would be very valuable for the development experience.

We can't make any promise of when we will ship it, but we've been working hard to release it as soon as possible.

[rvlewerissa]

@danilowoz Thanks for the really quick response! I just discovered that the example I gave does actually use an iframe, I overlooked 😅

Thanks for the hard work on this feature! Looking forward to it!

[danilowoz]

Hey all! I'd like to hear your thoughts about this feature and get to understand what is the best approach for this:

• I'm curious to know what kind of feature the Console component cannot miss?
• Can you provide a great example of what would you consider an excellent console component?
• Are you happy with the current CodeSandbox console component?

Feel free to drop any message here, and 👍 which one you like the most

[joshwcomeau]

Hi @danilowoz!

Overall, I'm pretty happy with the CodeSandbox console. I like that it has a clear button, just like the browser console.

For Sandpack, I'm hoping that there will be a standalone component (SandpackConsole) so that I can build my own layouts with it. I'm less interested in a tab for the console. I'll either want to always show the console, or never show it.

My usecase: occasionally, my sandpacks will be demonstrating console output rather than a live preview. Sometimes, I want to show a particular dev warning. In other cases, I have little JS-based exercises, and the goal is for the user to edit the code and then check the console to see the logged output (rather than checking the preview pane to see the UI).

It might also be good to include timestamps? It can be useful to know when an item was logged. Or, alternatively, maybe the console could be automatically cleared when the code re-runs?

[JoeShep]

I am building a code-teaching tool, so starting off with easy examples of JS functions that simply log to the console is important. I plan to write some testing functions that verify the logged output is correct, in order to provide instant feedback to the student. I've already found your example of capturing console.log data with if (msg.type === "console" && msg.codesandbox) @danilowoz, so thanks for that! But, being able to easily display the console for the student would be just what I need.

[nicksrandall]

My use case is that our components log message to show that things are happening. It would be helpful to for our users to open the console and see these messages stream in as they interact in the preview.

[nimeshnayaju]

It'd be great if the console logs came with the associated line numbers and file names. I've attached a screenshot of Chrome console logs that show the console log along with file name and line numbers.

[hussamkhatib]

Hey @danilowoz , I might be able to work on this. Can you point me to right direction so that I can explore a bit and decide If I can do it or not.

[danilowoz]

Hey @hussamkhatib, thanks. But currently, it's working in progress on https://github.com/codesandbox/sandpack/pull/546

There are still a few challenging there, but hopefully I'll be able to ship it on the upcoming weeks

[danilowoz]

Hey all! I'm excited to share that we have a beta version of SandpackConsole 🎉

It's meant to be a light version of the browser console, meaning that it will not support all console types or some very specific cases. The idea is to keep Sandpack light and modular, so for any other advanced case, I'd recommend going for console-feed.

Here's a sandbox with the component! - Plus, I would really appreciate it if we could exhaustively test this new component and report any eventual problems in this issue.

Documentation is coming next! But, here's a summary:

• New hook: useSandpackConsole;
• New component: SandpackConsole;
• New option: <Sandpack options={{ showConsole: true }} />;

[iampava]

First of all thanks a lot for this feature! It's exactly what I was looking for 🙌

I got a small question: is it currently possible to clear the console between renders?

[danilowoz]

Hey, thanks!

I don't think it's possible now, but if you wish this feature, please create another issue, and then we can address it. It must be something around here: when it gets a message from a refresh or similar, then clean the logs.

[iampava]

@danilowoz thanks. Added a feature idea: https://github.com/codesandbox/sandpack/issues/692