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, and Shell with click-to-edit values.
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)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' |
'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 |
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
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 |
readonly |
Display only | No interaction |
Features
- Syntax Highlighting - HTML, SCSS, TypeScript, Shell
- Interactive Bindings - Click to edit values directly in the code
- Multiple Types - boolean, number, string, select, color, attribute, comment
- Framework Agnostic - Works with Angular, React, Vue, or vanilla JS
- Shadow DOM - Encapsulated styles
- Zero Dependencies - Pure Web Components