Eleventy Themes Logo Eleventy Themes
Eleventy Plugin Code Demo screenshot

Eleventy Plugin Code Demo

Author Avatar Theme by Aleksandrhovhannisyan
Updated: 13 Jan 2026
13 Stars

Add interactive HTML/CSS/JS code demos to an Eleventy site using Markdown code blocks.

Github

Overview

The eleventy-plugin-code-demo is a fantastic tool for anyone looking to add interactive HTML, CSS, and JavaScript code demos to their Eleventy-based websites. By using this plugin, developers can seamlessly integrate live code snippets into their Markdown documents, allowing users to interact with and visualize the code in real-time. This capability not only enhances the learning experience but also showcases examples in a dynamic and engaging manner.

Designed with simplicity in mind, the plugin also emphasizes security by discouraging the use of user-generated code within demos, thus protecting your site from potential vulnerabilities. With a range of options for customization, eleventy-plugin-code-demo is a powerful addition for developers aiming to provide a rich and interactive content experience.

Features

  • Interactive Iframes: Convert HTML, CSS, and JS code blocks into interactive iframes directly within your Markdown, making it easy for users to play with live examples.

  • Customizable Shortcode: Register a paired shortcode to define how demos are implemented, ensuring that developers can tailor the output to fit their unique needs.

  • Flexible Plugin Options: Includes properties like name for the shortcode and iframeAttributes to set global attributes, giving you control over the iframe’s characteristics.

  • Safety First: The plugin advises against injecting user-generated content, protecting your site from potential security risks like XSS, while still allowing static code snippets to shine.

  • Easy Installation: Easily install the plugin using your preferred package manager, with straightforward instructions for getting up and running in no time.

  • Versatile Arguments: The shortcode accepts various arguments, like source and title, to handle multiple code blocks and enforce accessibility standards.

  • Demo Ready: Includes a demo folder with a sample Eleventy project to help you see the plugin in action and understand how to implement it effectively.

  • Cross-Compatibility: Requires just Node 18+ and Eleventy v3.0+, making it accessible for most modern development environments.