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:
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:
This will highlight lines 1-3 and line 5 of the selected file.1-3 5
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.