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.
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
2 options = toggle, 3+ options = dropdown:
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...
Documentation
Installation
Usage
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 |
Properties
| Property | Type | Description |
|---|---|---|
code |
string | null |
Set code content programmatically |
Content
Use <textarea> to define the code template (recommended). Alternative: <template>.
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) |
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) or dropdown (3+) |
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