snipp.et

Easy lightweight self-hosted runnable HTML CSS JS code snippets

about / website / demo / playground / use case

Why

Embedded snippets from popular websites are very efficient but too heavy for small code examples and experiments.

Stack snippets are awesome, but cannot be embedded.

The idea here is to keep things fast and simple, run snippets in place, and avoid code duplication at all costs.

The website will be ready in a few months !

Features

  • 🚀 Run HTML, CSS, JS snippets
  • âœĻ Clear UI, mobile-friendly
  • âģ Handle async / await
  • 🔗 Link code blocks, no duplication
  • ↔ïļ Redirect console calls to UI
  • 🐞 Catch errors
  • 🌐 Load external JS and CSS files
  • ðŸ’Ļ Performance test
  • 📠 No server involved
  • ðŸšŦ No dependencies
  • ðŸ›Ąïļ No eval / function constructor
  • ðŸŠķ JS + CSS = 5.9k / GZIP 2.9k

How

Snippets are running in sandboxed iframes, with allow-scripts restriction lifted.

  • The library builds the page and sets iframe srcdoc attribute
  • User code is computed and injected into the core wrapper
  • Console calls are redirected to the main window via postMessage

Security ⚠ïļ

Snippets are loaded directly from the page, which might not be 100% safe. Sandbox allow-same-origin is not enabled, however, nasty things could happen.

TODO : read more docs & articles, talk with web security ninjas

How-to

  • copy & paste script and stylesheet

<script src="snippet.standalone.release.min.js" integrity="sha384-{checksum}/"></script>
<link rel="stylesheet" href="snippet.standalone.min.css" />
  • add class “language-html”, “language-css”, or “language-js” to your code blocks
  • set snippets options : commented first line json, or uri encoded json data-snip attribute
<!-- {"name": "HTML snippet"} -->
/* {"name": "CSS snippet"} */
// {"name": "JS snippet"}
option type description default
name string snippet name “”
type string “run”, “perf”, “pre”, “post”, “” (no run) “run”
module boolean load as JS module false
body boolean show / hide iframe true
console boolean show / hide console true
link array<string> snippet names or ids to link []
js array<string> scripts urls to load []
css array<string> stylesheets urls to load []
insert boolean insert snippet frame and console true
height int | string snippet height, int parsed as em 12
allow array<string> iframe allow list TODO
csp array<string> iframe CSP TODO
  • init snippets

document.querySelectorAll("code[class*=language-]")
.forEach(block => new Snippet(block));
  • run 🌈

Packaging

JS : Closure Compiler

CSS : Closure Stylesheets

Good to know

Snippets everywhere

JSFiddle / CodePen / JSBin / PlayCode / x.JS / TechIO / CodeSandbox / Plunker / JSBench / StackBlitz / Glitch / VSCode

Credits

Prism and Prism Live by Lea Verou

Closure Compiler and Closure Stylesheets by Google

License

MIT ÂĐïļ ILUSIO 2022

GitHub

View Github