SLS Snippets
This a custom plugin for Code Snippets Plugin on Wordpress.
by Starlabs · github.com/starlabs-technology/sls-snippets-plugin
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/starlabs-technology/sls-snippets-plugin/archive/refs/heads/main.zipA CodePen-style code snippet editor for WordPress — create, preview, and embed HTML/CSS/JS snippets with sandboxed iframe rendering.
Author: Star Labs Technology
Text Domain: sls-snippets
Table of Contents
- Overview
- The Problem It Solves
- Key Features
- How It Works
- Installation
- Usage
- Global Settings
- Shortcode Reference
- Security Model
- Developer Reference
- File Structure
- Requirements
- Uninstall Behavior
- License
Overview
SLS Snippets brings a CodePen-like code editing experience directly into the WordPress admin. Create interactive code snippets with three separate editors (HTML, CSS, JavaScript), preview them live, and embed them securely on any page or post using a shortcode or Gutenberg block. Each snippet renders inside a sandboxed iframe with Content Security Policy (CSP) for complete isolation from your site.
The Problem It Solves
Embedding interactive code demos on WordPress sites has always been a pain:
- Security risk — Running arbitrary HTML/CSS/JS on your pages can expose your site to XSS attacks
- CodePen embeds are external — They depend on a third-party service, slow down page loads, and break if CodePen changes their API
- Code blocks aren't interactive — Syntax highlighting plugins show code but don't run it
- No editor experience — Writing code in WordPress's text editor or custom fields is painful
SLS Snippets solves all of these:
- Sandboxed rendering — Every snippet runs in an isolated iframe with CSP headers, so malicious code can't touch your site
- Self-hosted — Everything stays on your server, no external dependencies
- Live preview — See your code running in real-time as you type
- CodeMirror editors — Syntax highlighting, auto-completion, and proper code editing for HTML, CSS, and JS
- External library support — Load CDN libraries (Bootstrap, jQuery, GSAP, etc.) with optional SRI validation
- Lazy loading — Snippets only initialize when scrolled into view, keeping pages fast
Key Features
| Feature | Description |
|---|---|
| Triple Code Editor | CodeMirror-powered HTML, CSS, and JS editors with syntax highlighting |
| Live Preview | Sandboxed iframe preview with "Auto-run" toggle |
| Sidebar Mode | Expand any editor pane to 50% of the screen for focused editing |
| Fullscreen Preview | Expand the preview to fill the entire screen |
| Shortcode Embedding | [sls_snippet id="123"] — drop snippets into any page or post |
| Gutenberg Block | Native sls/snippet block with Inspector Controls for ID, height, and autorun |
| External Libraries | Add CSS/JS libraries from CDNs with optional SRI hash enforcement |
| Per-Snippet Settings | Configure height, auto-run, and eval permissions per snippet |
| Global Settings | Kill switch, default height, SRI requirement, domain allowlist |
| Lazy Loading | Frontend snippets only initialize when scrolled into the viewport |
| Click-to-Run | When auto-run is off, shows an overlay with a "Run snippet" button |
| Security | Iframe sandboxing, CSP meta tags, SRI validation, capability checks |
| Help Page | Built-in admin documentation with usage instructions |
| Clean Uninstall | Removes all options; optionally deletes all snippet posts |
How It Works
Architecture
- Custom Post Type — Snippets are stored as a
sls_snippetCPT with HTML, CSS, and JS saved as post meta - Admin Editor — The edit screen replaces the default editor with three CodeMirror-powered code panes and a live preview iframe
- Live Preview — On each keystroke (or manual run), the admin JS builds an
srcdocstring combining HTML + CSS + JS and injects it into a sandboxed preview iframe - Frontend Rendering — The shortcode or Gutenberg block outputs a container div; frontend JS uses
IntersectionObserverto lazy-load the snippet when visible - Iframe Isolation — Each snippet renders in its own sandboxed iframe with a CSP meta tag, preventing any code from accessing the parent page
- External Libraries — Library URLs are validated against allowed domains, optionally require SRI hashes, and are injected as
<link>/`