Sandpack Widget

Web development is evolving, so developers like to keep up with new technologies and best practices. Educative provides a hands-on learning environment to allow learners to build real projects. You can use the 'Sandpack widget' to create front-end applications.

We'll cover the following

Along with creating front-end applications within the browser, the Sandpack widget provides:

  • A console for debugging the code.

  • The diversity with multiple JS frameworks.

  • Complete npm support within the browser.

  • The support of dev tools to keep track of the component when rendering.

This is what it looks like:

Edit mode
Edit mode

What do I need to know?

  • Template: You can choose the framework of your choice from the available 10 frameworks in the drop-down menu.

  • Code Height (px): You can specify the size of the coding window in pixels.

  • Output Height (px): You can specify the size of the output window in pixels.

  • Disable Execution: Select this checkbox to make the program non-executable. By default, learners can run the code.

  • Line Numbers: You can choose to hide or include line numbers in all files through this checkbox.

  • Hide Code Editor: You may want to hide code editor from learners. Mark this checkbox to hide the code editor; it automatically enables the "AutoRun" button.

  • Hide Output: You can mark this checkbox to hide the output window from learners.

  • Hide Console: You can mark this checkbox to hide the console from learners.

  • Hide Tests: You can mark this checkbox to hide the tests of the output window from learners.

  • Hide Stop Button:  When unchecked, it allows halting the execution. You can mark this checkbox if you do not want learners to stop the execution.

  • AutoRun: You can mark this checkbox to execute the code independently without clicking the "Run" button.

  • Mark current file as read-only: You may want learners not to alter a particular file. Open the file from the side panel and select this checkbox.

  • Hide file from the file tree: You may find a file irrelevant to learners. Open the file from the side panel and mark this checkbox.

  • Mark as Primary File: You may want learners to view a particular file at first glance. Open the file from the side panel and mark this checkbox. Note that the primary file can not be hidden from the file tree.

  • Highlight lines: You can highlight important lines of code in any file. Open the file from the side panel and enter the line ranges. For example:
    1-3
5
    This will highlight lines 1-3 and line 5 of the selected file.

Examples

Below is an active Sandpack widget with the default setting running a "Hello World" application in React.

The widget can be opened in full-screen through the full-screen icon at the top-right.

Below is a sample vanilla JS code to construct a linked list.

All the required packages for the code can be added to the package.json.

Sandpack within a Sandpack

With the Sandpack widget, we can write code that calls another Sandpack. Below is a demo attached.