SLS Snippets

SLS Snippets lets you create self-contained code snippets (HTML, CSS, and JavaScript) directly in the WordPress admin, preview them live, and embed them anywhere on your site using a shortcode or Gutenberg block. Each snippet renders inside a sandboxed iframe for complete style isolation and security.

The Problem It Solves: Embedding custom HTML/CSS/JS into WordPress posts or pages is painful. Theme styles bleed in, scripts conflict, and there's no safe way to preview or isolate your code. SLS Snippets solves this by giving you a CodePen-like editor inside WordPress with secure, isolated iframe rendering — perfect for demos, interactive widgets, embedded tools, code examples, and more.

Features: • Triple Code Editor — Dedicated HTML, CSS, and JavaScript editors in the admin using CodeMirror with syntax highlighting, auto-completion, and linting • Live Preview — Real-time preview panel in the admin so you can see your snippet as you build it • Secure Iframe Rendering — Every snippet renders inside a sandboxed iframe with Content Security Policy (CSP) headers, preventing style bleed and script conflicts • Shortcode Embedding — Embed any snippet with [sls_snippet id="123"] • Gutenberg Block — Native WordPress block editor support — search for "SLS Snippet" in the block inserter • Optional Transpilers — Client-side support for Pug → HTML, SCSS → CSS, Babel (ES6+/JSX) → JavaScript • External Library Support — Include external CSS/JS libraries (e.g. from CDN) with optional SRI (Subresource Integrity) enforcement • Per-Snippet Settings — Configure height, auto-run behavior, and included libraries per snippet • Global Settings — Kill switch to disable all embeds site-wide, default height, and SRI requirements • Responsive — Snippets scale to fill their container width with configurable height • Built-in Help Page — In-plugin documentation for quick reference • Clean Uninstall — Option to remove all data on plugin deletion

Security: • Iframe Sandboxing — Snippets run in sandboxed iframes with restricted permissions • Content Security Policy — CSP headers prevent unauthorized resource loading • SRI Support — Optional Subresource Integrity enforcement for external libraries • Capability Checks — Only users with appropriate permissions can create/edit snippets

Requirements: WordPress 6.0+, PHP 7.4+