Boolean Type
Click on true/false to toggle:
Written by developer
Seen by user
Accept terms
@softwarity/interactive-code
Web Component for displaying syntax-highlighted code with interactive bindings. Supports HTML, SCSS, TypeScript, Shell, and JSON with click-to-edit values, collapsible sections, and copy/download.
Theme & Color Scheme
Click on highlighted values to change theme and color scheme. Changes apply globally to all "Seen by user" code blocks below.
Interactive Zone Style
Customize how interactive zones look. Select a style to see the CSS and apply it globally.
Playground
Click on highlighted values in the code to edit them. Changes emit events you can use to update live elements.
Number Type
Click on a number to edit. Supports min, max, step:
Written by developer
Seen by user
String Type
Click on a string value to edit it:
Written by developer
Seen by user
Select Type — Dropdown or Carousel
2 options = toggle click, 3+ options = dropdown. Add carousel attribute to cycle through options on click instead:
Written by developer
Seen by user
Alert message
Color Type
Click on a color to open the color picker:
Written by developer
Seen by user
Card with custom border
Attribute Type
Click on the attribute to toggle it (strikethrough when disabled). Supports attributes with or without values:
Written by developer
Seen by user
Comment Type (Line Toggle)
Checkbox to comment/uncomment a line. Comment style adapts to language (// for TS/SCSS, # for Shell, <!-- --> for HTML):
Written by developer
Seen by user
Styled element
Block Comments (SCSS)
Use ${key}...${/key} syntax for block comments. Click on /* to toggle:
Written by developer
Seen by user
Card with shadow
Block Comments (HTML)
For HTML, block comments use <!-- -->:
Written by developer
Seen by user
Title
Author: John | Date: 2024
Tags: web, components
Content...
Conditional Textareas
Show different code sections based on binding values. Use condition attribute on <textarea> elements. Add show-separators to display visual separators between sections:
Written by developer
Seen by user (click on
undefined to toggle)JSON Type
Use language="json" for syntax-highlighted, editable JSON. JSONC // comments are shown but stripped from copy/download so the exported file stays valid. Add show-download (and optionally download="name.json") for large payloads:
Written by developer
Seen by user (edit, then try copy / download)
theme: dark · 14px · 🔔 on
Collapsible Sections
Wrap a range of lines in ${fold} … ${/fold} markers to make it foldable (GitHub-diff style). Collapsed by default; use ${fold:open} to start expanded. The marker lines are removed from the output — folding is purely visual, and copy/download still export the full content. Works inside a <textarea> or via the code property, in any language. Bindings inside a fold stay fully interactive — they're just hidden until expanded (here trace and buffer are editable once you open the block).
Written by developer
Seen by user (expand the band, then edit the values inside the fold)
id: api · trace: true · buffer: 4096 · enabled: true
Button Type
A button binding is a clickable action token: it emits a change event on every click (e.detail = its value), with no re-render. Great for a hub of actions:
Written by developer
Seen by user (click an action)
Documentation
Installation
Usage
Themes
The component uses an IntelliJ-based theme by default. To apply a different theme, load an external CSS file:
Via CDN
Via npm import
Available themes
| Theme | File | Light variant | Dark variant |
|---|---|---|---|
| IntelliJ | built-in (default) | IntelliJ Light | Darcula |
| VS Code | themes/vscode.css |
Light+ | Dark+ |
| GitHub | themes/github.css |
GitHub Light | GitHub Dark |
| Solarized | themes/solarized.css |
Solarized Light | Solarized Dark |
| Catppuccin | themes/catppuccin.css |
Latte | Mocha |
Color scheme
The component inherits color-scheme from its parent (typically the page). Each theme includes both light and dark values via CSS light-dark(). You can override per element:
Custom theme
Create your own theme by setting CSS custom properties on interactive-code:
API - <interactive-code>
Main component for displaying syntax-highlighted code with interactive bindings.
| Attribute | Type | Default | Description |
|---|---|---|---|
language |
'html' | 'scss' | 'typescript' | 'shell' | 'json' |
'html' |
Syntax highlighting language |
show-separators |
boolean |
false |
Show visual separators between concatenated textarea sections |
show-line-numbers |
boolean |
false |
Display line numbers in the gutter |
show-copy |
boolean |
false |
Show the copy-to-clipboard button |
show-download |
boolean |
false |
Show the download button (exports the full content as a file) |
download |
string |
snippet.<ext> |
File name used by the download button |
color-scheme |
'light' | 'dark' |
inherited | Override color scheme (inherits from parent by default) |
Properties
| Property | Type | Description |
|---|---|---|
code |
string | null |
Set code content programmatically |
Content
Use <textarea> to define the code template (recommended). Alternative: <template>.
Multiple <textarea> elements are concatenated. Use condition attribute for conditional display:
condition="key"- Show when binding value is truthycondition="!key"- Show when binding value is falsy
Fold a range of lines with ${fold} … ${/fold} markers (collapsed by default) or ${fold:open} … ${/fold} (expanded). The band shows the hidden line count; folding is visual only (copy/download stay complete).
API - <code-binding>
Defines an interactive binding in the code. Use ${key} in the template.
| Attribute | Type | Default | Description |
|---|---|---|---|
key |
string |
— | Binding identifier (matches ${key} in template) |
type |
BindingType |
'readonly' |
Type of binding (see below) |
value |
any |
— | Initial value |
disabled |
boolean |
false |
Disable editing |
min |
number |
— | Minimum value (for number type) |
max |
number |
— | Maximum value (for number type) |
step |
number |
1 |
Step increment (for number type) |
options |
string |
— | Comma-separated options (for select type) |
carousel |
boolean |
false |
Cycle through options on click instead of dropdown (for select type) |
Events
| Event | Detail | Description |
|---|---|---|
change |
any |
Fired when value changes |
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 toggle (2 options), dropdown (3+), or carousel (carousel attribute) |
color |
Color value | Click to open color picker |
attribute |
HTML attribute toggle | Click to toggle (strikethrough when disabled) |
comment |
Line toggle | Checkbox to comment/uncomment line |
button |
Action token (value = label) |
Click to fire a change event (e.detail = value) |
readonly |
Display only | No interaction |
Features
- Syntax Highlighting - HTML, SCSS, TypeScript, Shell, JSON
- Interactive Bindings - Click to edit values directly in the code
- Multiple Types - boolean, number, string, select, color, attribute, comment, button
- Collapsible Sections - Fold non-interactive ranges; copy/download stay complete
- Copy & Download -
show-copy/show-downloadbuttons (valid JSON export) - Framework Agnostic - Works with Angular, React, Vue, or vanilla JS
- Shadow DOM - Encapsulated styles
- Zero Dependencies - Pure Web Components