@softwarity/interactive-code

A Web Component for displaying syntax-highlighted code with interactive bindings. Perfect for documentation, tutorials, and live demos.

Features

• Syntax Highlighting: HTML, SCSS, TypeScript, and Shell
• Interactive Bindings: Click to edit values directly in the code
• Multiple Types: boolean, number, string, select, color, comment, attribute
• Theme System: Built-in IntelliJ default + 4 external CSS themes (vscode, github, solarized, catppuccin) with light/dark variants
• Mixed Content Highlighting: HTML with embedded <style> (SCSS) and <script> (TypeScript) blocks
• Copy to Clipboard: Optional copy button with visual feedback
• Line Numbers: Optional gutter line numbers
• Accessibility: ARIA attributes, keyboard navigation (Enter/Space, ArrowUp/Down)
• Framework Agnostic: Works with Angular, React, Vue, or vanilla JS
• Zero Dependencies: Pure Web Components

Demo

Live demo

Installation

npm

npm install @softwarity/interactive-code

import '@softwarity/interactive-code';

CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/@softwarity/interactive-code"></script>

No build step required — the custom elements <interactive-code> and <code-binding> are registered automatically.

Usage

<interactive-code language="scss">
  <textarea>
:root {
  --width: ${width}px;
  --enabled: ${enabled};
}
  </textarea>
  <code-binding key="width" type="number" value="72" min="48" max="120"></code-binding>
  <code-binding key="enabled" type="boolean" value="true"></code-binding>
</interactive-code>

Binding Types

| Type | Description | Interaction | |------|-------------|-------------| | boolean | true/false value | Click to toggle | | number | Numeric value | Click to edit, supports min/max/step | | string | Text value | Click to edit | | select | Option from list | Click to toggle (2 options), dropdown (3+), or carousel (carousel attribute) | | color | Color value | Click to open color picker | | comment | Line/block toggle | Click indicator to comment/uncomment (//, #, <!-- -->, /* */) | | attribute | HTML attribute toggle | Click to toggle (strikethrough when disabled) | | readonly | Display only | No interaction |

API

<interactive-code>

| Attribute | Type | Description | |-----------|------|-------------| | language | 'html' \| 'scss' \| 'typescript' \| 'shell' | Syntax highlighting language | | color-scheme | 'light' \| 'dark' | Color scheme override (inherits from parent by default) | | show-separators | boolean | Show visual separators between textarea sections | | show-copy | boolean | Show copy-to-clipboard button (top-right corner) | | show-line-numbers | boolean | Show line numbers in the gutter |

| Property | Type | Description | |----------|------|-------------| | code | string \| null | Set code content programmatically |

<code-binding>

| Attribute | Type | Description | |-----------|------|-------------| | key | string | Binding identifier (matches ${key} in template) | | type | BindingType | Type of binding | | value | any | Initial value | | disabled | boolean | Disable editing | | min | number | Minimum value (for number type) | | max | number | Maximum value (for number type) | | step | number | Step increment (for number type) | | options | string | Comma-separated options (for select type) | | carousel | boolean | Cycle through options on click instead of dropdown (for select type) |

| Event | Description | |-------|-------------| | change | Fired when value changes (CustomEvent with detail = new value) |

Inline handler: Use onchange attribute where e is the CustomEvent:

<code-binding key="checked" type="boolean" value="true"
  onchange="document.getElementById('preview').checked = e.detail"></code-binding>

addEventListener / Framework binding:

// Vanilla JS
binding.addEventListener('change', (e) => {
  preview.checked = e.detail;
});

// Angular: (change)="handler($event.detail)"
// React: onChange={(e) => handler(e.detail)}
// Vue: @change="handler($event.detail)"

Examples

Boolean Toggle

<interactive-code language="html">
  <textarea>
<nav [autoCollapse]="${autoCollapse}">...</nav>
  </textarea>
  <code-binding key="autoCollapse" type="boolean" value="true"></code-binding>
</interactive-code>

Number with Constraints

<interactive-code language="scss">
  <textarea>
:root {
  --width: ${width}px;
}
  </textarea>
  <code-binding key="width" type="number" value="72" min="48" max="120" step="4"></code-binding>
</interactive-code>

Color Picker

<interactive-code language="scss">
  <textarea>
:root {
  --primary: ${primary};
}
  </textarea>
  <code-binding key="primary" type="color" value="#6750a4"></code-binding>
</interactive-code>

Comment Toggle (Line Enable/Disable)

Comment style adapts to language: // for TypeScript/SCSS, # for Shell, <!-- --> for HTML.

<interactive-code language="scss">
  <textarea>
:root {
  ${enableWidth}--custom-width: 280px;
}
  </textarea>
  <code-binding key="enableWidth" type="comment" value="true"></code-binding>
</interactive-code>

Block Comment

Use ${key}...${/key} syntax for multi-line or inline block comments:

<interactive-code language="typescript">
  <textarea>
const config = {
  name: 'app',
  ${debug}debug: true,
  verbose: true,${/debug}
};
  </textarea>
  <code-binding key="debug" type="comment" value="true"></code-binding>
</interactive-code>

Attribute Toggle

Toggle HTML attributes on/off. Supports attributes with or without values:

<interactive-code language="html">
  <textarea>
<button ${disabled}>Submit</button>
<input ${placeholder}="Enter name" ${required}>
  </textarea>
  <code-binding key="disabled" type="attribute" value="true"></code-binding>
  <code-binding key="placeholder" type="attribute" value="true"></code-binding>
  <code-binding key="required" type="attribute" value="false"></code-binding>
</interactive-code>

Conditional Textareas

Show different code sections based on binding values. Multiple <textarea> elements are concatenated, and the condition attribute controls visibility:

<interactive-code language="typescript" show-separators>
  <textarea>const result = provider.complete(input, { groupBy: ${groupBy} });</textarea>
  <textarea condition="!groupBy">// Use result.items for flat list
console.log(result.items);</textarea>
  <textarea condition="groupBy">// Use result.groups for grouped display
console.log(result.groups);</textarea>
  <code-binding key="groupBy" type="select" options="undefined,'continent'" value="undefined"></code-binding>
</interactive-code>

• condition="key" - Show when binding value is truthy
• condition="!key" - Show when binding value is falsy
• condition="key=value" - Show when binding value equals a specific value
• condition="!key=value" - Show when binding value does NOT equal a specific value
• show-separators - Add visual separators between sections (customizable via --code-separator-color)

Themes

The built-in default is IntelliJ (Light/Darcula). Four external CSS themes are available as separate stylesheets:

| Theme | File | Light | Dark | |-------|------|-------|------| | VS Code | themes/vscode.css | Light+ | Dark+ | | GitHub | themes/github.css | Light | Dark | | Solarized | themes/solarized.css | Light | Dark | | Catppuccin | themes/catppuccin.css | Latte | Mocha |

Load a theme by adding a <link> stylesheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@softwarity/interactive-code/themes/vscode.css">

Use color-scheme to override light/dark mode per element:

<interactive-code language="typescript" color-scheme="light">
  ...
</interactive-code>

CSS Customization

The component exposes CSS custom properties for styling. Themes and custom overrides use these variables.

UI Variables

| Property | Description | |----------|-------------| | --code-bg | Background color | | --code-text | Foreground text color | | --code-border-radius | Border radius | | --code-line-number | Line number color | | --code-separator-color | Separator color between textarea sections | | --code-focus-outline | Focus ring color | | --code-input-bg | Inline input background | | --code-input-border | Inline input border | | --code-hover-bg | Hover background | | --code-copy-color | Copy button color | | --code-copy-border | Copy button border | | --code-copy-accent | Copy success accent | | --code-color-preview-border | Color swatch border | | --code-interactive-highlight | Interactive zone accent color | | --code-interactive-color | Interactive zone text color | | --code-interactive-bg-color | Interactive zone background | | --code-interactive-border-color | Interactive zone border color | | --code-comment-color | Comment indicator color |

Token Variables

All syntax token colors: --token-keyword, --token-string, --token-number, --token-comment, --token-tag, --token-attr-name, --token-attr-value, --token-punctuation, --token-property, --token-variable, --token-function, --token-decorator, --token-type, --token-class-name, --token-template-string, --token-value, --token-unknown, --token-binding-key

Interactive Zone Styling

Interactive controls expose part="interactive" for external CSS styling:

interactive-code::part(interactive) {
  text-decoration: underline wavy var(--code-interactive-highlight);
}
interactive-code::part(interactive):hover {
  background: var(--code-interactive-bg-color);
}

Built-in styles: wavy (default), dotted, dashed, highlight, outline, pill, hand-drawn, none.

interactive-code {
  --code-bg: #282c34;
  --code-border-radius: 4px;
  --code-separator-color: rgba(100, 100, 100, 0.5);
}

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

License

MIT - Softwarity