Interactive Components Demo

A showcase of interactive components available in blog posts: counters, quizzes, charts, and more.

By Chadi Salmi · 2025

This post demonstrates the interactive components available for blog posts. You can use these by adding simple HTML with data-component attributes directly in your markdown.

Counter

A simple counter with increment/decrement buttons. Great for demonstrating state changes.

Usage:

<div data-component="counter" data-start="10" data-step="5"></div>

Slider

Interactive slider for adjusting values. Useful for demonstrating how parameters affect outcomes.

Usage:

<div
  data-component="slider"
  data-min="0"
  data-max="100"
  data-value="50"
  data-label="Learning Rate"
  data-unit="%"
></div>

Quiz

Test your readers' knowledge with interactive quizzes.

Usage:

<div
  data-component="quiz"
  data-question="Your question here?"
  data-options='["Option A", "Option B", "Option C"]'
  data-correct="1"
></div>

Note: data-correct is the 0-based index of the correct answer.

Toggle/Spoiler Content

Hide content that readers can reveal on click. Perfect for solutions, hints, or optional deep-dives.

The answer is 42! This is hidden content that only appears when you click the toggle.

You can put any markdown content here, including:

Lists
Bold and italic text
Code: console.log("hello")

Usage:

<div data-component="toggle-content" data-label="Click to reveal">
  Your hidden content here...
</div>

Tabs

Organize content into tabs for better readability.

def greet(name):
    return f"Hello, {name}!"

print(greet("World"))

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

package main

import "fmt"

func greet(name string) string {
    return fmt.Sprintf("Hello, %s!", name)
}

func main() {
    fmt.Println(greet("World"))
}

Usage:

<div data-component="tabs">
  <div data-tab="Tab 1">Content for tab 1</div>
  <div data-tab="Tab 2">Content for tab 2</div>
</div>

Charts

Visualize data with simple bar and line charts.

Bar Chart

Line Chart

Usage:

<div
  data-component="chart"
  data-type="bar"
  data-values="[85, 92, 78, 95, 88]"
  data-labels='["Mon", "Tue", "Wed", "Thu", "Fri"]'
  data-height="180"
  data-color="#6366f1"
></div>

Code Playground

Let readers experiment with code directly in the browser!

// Try modifying this code and click Run! const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(n => n * 2); console.log("Original:", numbers); console.log("Doubled:", doubled); console.log("Sum:", doubled.reduce((a, b) => a + b, 0));

Usage:

<div data-component="code-playground" data-language="javascript">
  // Your code here console.log("Hello!");
</div>

Creating Custom Components

Want to add your own components? Edit /static/js/components.js and add your component to the COMPONENTS object:

COMPONENTS["my-component"] = (el, opts) => {
  // el = the DOM element
  // opts = all data-* attributes as an object
  el.innerHTML = `<p>Hello from ${opts.name || "component"}!</p>`;
};

Then use it in markdown:

<div data-component="my-component" data-name="World"></div>

Happy writing! 🚀