jan 11, 2025

🔗 A code-sandbox web component

This is a fork of code-sandbox web component from Chris Ferdinandi for displaying an interactive code sandbox for HTML, CSS and javascript, similar to what CodePen does.

Having a code sandbox web component can be useful for showing code snippets in a more interactive way, and it doesn't require any external third-party services like CodePen or JSFiddle. This was worked on to be included in a vanilla project-starter template but it can be easily used in any project.

Also being a web component, it means it can be used in any framework or vanilla JavaScript and it will always work, since it doesn't depend on any framework. The only dependency it uses is PrismJS for syntax highlighting, which can be included directly in the JavaScript file. This fork adds a few useful features to the original code too.

# Fetching files from a URL

By just adding a src attribute to the <textarea> inside the web component it will load the content inside the mini-editor. This can allow keeping the code snippets in a separate file and include them only on page load. It can fetch both a local file or a remote file.

<code-sandbox>
	<textarea for="html"></textarea>
	<textarea for="css"></textarea>
	<textarea for="js" open src="/assets/demo.js"></textarea>
</code-sandbox>

# Markdown compatibility

If inside the <code-sandbox> there is a <pre class="language-*"> which is how markdown processors render code blocks, it will use that snippet to populate the code for the editor.

This can be useful when using markdown files with code snippets because it adds a touch of progressive enhancement, since if the web component is not loaded, the code block will still be displayed.

Below there is an example of how it can be used within a markdown file.

<code-sandbox>
```js
console.log('Hello, world!');
```
</code-sandbox>

⚠️ Warning:

This functionality can be a bit buggy, depending on the markdown processor doing the rendering

# Exclusive accordions

By adding a name attribute to the web component, it will attach that name to all the <details> elements in the sandbox, making only one editor open at the time, leveraging the native element behavior.

<code-sandbox name="code-sandbox-1"> </code-sandbox>

# CSS Container queries

Web components are the ideal use-case for css container queries, since they can be included in different contexts of a web page and their rendered size can change independently of the screen size.

It's fairly easy to use container queries to control the sandbox layout, the container-type just needs to be defined on the root element of the web component.

.sandbox {
	container-type: inline-size;
}

After that, the container queries can be used to control the layout of the sandbox.

@container (min-width: 768px) {
	.sandbox-content {
		grid-template-columns: repeat(2, 1fr);
	}
}

# Empty playground

If no <textarea> or <pre> is present inside the <code-sandbox> web component it will create an empty editor. This can be useful when you want to show an empty playground for the user to start coding, but at the same time keep control of which editors are displayed. Eg: if only the html editor is present, the css and js editors will not be displayed.

<code-sandbox> </code-sandbox>

# Attributes

# Repository

• danieledep/code-sandbox

# Resources

• cferdinandi/code-sandbox
• PrismJS
• WebC