{"id":40777462,"url":"https://github.com/softwarity/interactive-code","last_synced_at":"2026-06-12T16:00:33.068Z","repository":{"id":333135825,"uuid":"1136334466","full_name":"softwarity/interactive-code","owner":"softwarity","description":null,"archived":false,"fork":false,"pushed_at":"2026-06-12T11:39:20.000Z","size":337,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-12T13:22:05.472Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://softwarity.github.io/interactive-code/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/softwarity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-17T13:59:21.000Z","updated_at":"2026-06-12T11:39:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/softwarity/interactive-code","commit_stats":null,"previous_names":["softwarity/interactive-code"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/softwarity/interactive-code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softwarity%2Finteractive-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softwarity%2Finteractive-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softwarity%2Finteractive-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softwarity%2Finteractive-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/softwarity","download_url":"https://codeload.github.com/softwarity/interactive-code/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softwarity%2Finteractive-code/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34251773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-21T19:13:22.225Z","updated_at":"2026-06-12T16:00:33.061Z","avatar_url":"https://github.com/softwarity.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @softwarity/interactive-code\n\nA Web Component for displaying syntax-highlighted code with interactive bindings. Perfect for documentation, tutorials, and live demos.\n\n## Features\n\n- **Syntax Highlighting**: HTML, SCSS, TypeScript, Shell, and JSON\n- **Interactive Bindings**: Click to edit values directly in the code\n- **Multiple Types**: boolean, number, string, select, color, comment, attribute, button\n- **Collapsible Sections**: Fold non-interactive line ranges with `${fold}` markers (copy/download stay complete)\n- **Theme System**: Built-in IntelliJ default + 4 external CSS themes (vscode, github, solarized, catppuccin) with light/dark variants\n- **Mixed Content Highlighting**: HTML with embedded `\u003cstyle\u003e` (SCSS) and `\u003cscript\u003e` (TypeScript) blocks\n- **Copy \u0026 Download**: Optional copy and download buttons (valid JSON export)\n- **Line Numbers**: Optional gutter line numbers\n- **Accessibility**: ARIA attributes, keyboard navigation (Enter/Space, ArrowUp/Down)\n- **Framework Agnostic**: Works with Angular, React, Vue, or vanilla JS\n- **Zero Dependencies**: Pure Web Components\n\n## Demo\n\n[Live demo](https://softwarity.github.io/interactive-code/)\n\n## Installation\n\n### npm\n\n```bash\nnpm install @softwarity/interactive-code\n```\n\n```typescript\nimport '@softwarity/interactive-code';\n```\n\n### CDN\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@softwarity/interactive-code\"\u003e\u003c/script\u003e\n```\n\nNo build step required — the custom elements `\u003cinteractive-code\u003e` and `\u003ccode-binding\u003e` are registered automatically.\n\n## Usage\n\n```html\n\u003cinteractive-code language=\"scss\"\u003e\n  \u003ctextarea\u003e\n:root {\n  --width: ${width}px;\n  --enabled: ${enabled};\n}\n  \u003c/textarea\u003e\n  \u003ccode-binding key=\"width\" type=\"number\" value=\"72\" min=\"48\" max=\"120\"\u003e\u003c/code-binding\u003e\n  \u003ccode-binding key=\"enabled\" type=\"boolean\" value=\"true\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n\u003e **Escaping**: write `\\${...}` to display a literal `${...}` in the code instead of interpreting it as a binding or fold marker.\n\n## Binding Types\n\n| Type | Description | Interaction |\n|------|-------------|-------------|\n| `boolean` | true/false value | Click to toggle |\n| `number` | Numeric value | Click to edit, supports min/max/step |\n| `string` | Text value | Click to edit |\n| `select` | Option from list | Click to toggle (2 options), dropdown (3+), or carousel (`carousel` attribute) |\n| `color` | Color value | Click to open color picker |\n| `comment` | Line/block toggle | Click indicator to comment/uncomment (`//`, `#`, `\u003c!-- --\u003e`, `/* */`) |\n| `attribute` | HTML attribute toggle | Click to toggle (strikethrough when disabled) |\n| `button` | Action token (`value` = label) | Click to fire a `change` event (`e.detail` = `value`); no value edit, no re-render |\n| `readonly` | Display only | No interaction |\n\n## API\n\n### `\u003cinteractive-code\u003e`\n\n| Attribute | Type | Description |\n|-----------|------|-------------|\n| `language` | `'html' \\| 'scss' \\| 'typescript' \\| 'shell' \\| 'json'` | Syntax highlighting language |\n| `color-scheme` | `'light' \\| 'dark'` | Color scheme override (inherits from parent by default) |\n| `show-separators` | `boolean` | Show visual separators between textarea sections |\n| `show-copy` | `boolean` | Show copy-to-clipboard button (top-right corner) |\n| `show-download` | `boolean` | Show download button (exports the full content as a file) |\n| `download` | `string` | File name for the download button (defaults to `snippet.\u003cext\u003e`) |\n| `show-line-numbers` | `boolean` | Show line numbers in the gutter |\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `code` | `string \\| null` | Set code content programmatically |\n\n### `\u003ccode-binding\u003e`\n\n| Attribute | Type | Description |\n|-----------|------|-------------|\n| `key` | `string` | Binding identifier (matches `${key}` in template) |\n| `type` | `BindingType` | Type of binding |\n| `value` | `any` | Initial value |\n| `disabled` | `boolean` | Disable editing |\n| `min` | `number` | Minimum value (for `number` type) |\n| `max` | `number` | Maximum value (for `number` type) |\n| `step` | `number` | Step increment (for `number` type) |\n| `options` | `string` | Comma-separated options (for `select` type) |\n| `carousel` | `boolean` | Cycle through options on click instead of dropdown (for `select` type) |\n\n| Event | Description |\n|-------|-------------|\n| `change` | Fired when value changes (CustomEvent with `detail` = new value) |\n\n**Inline handler:** Use `onchange` attribute where `e` is the CustomEvent:\n\n```html\n\u003ccode-binding key=\"checked\" type=\"boolean\" value=\"true\"\n  onchange=\"document.getElementById('preview').checked = e.detail\"\u003e\u003c/code-binding\u003e\n```\n\n**addEventListener / Framework binding:**\n\n```javascript\n// Vanilla JS\nbinding.addEventListener('change', (e) =\u003e {\n  preview.checked = e.detail;\n});\n\n// Angular: (change)=\"handler($event.detail)\"\n// React: onChange={(e) =\u003e handler(e.detail)}\n// Vue: @change=\"handler($event.detail)\"\n```\n\n## Examples\n\n### Boolean Toggle\n\n```html\n\u003cinteractive-code language=\"html\"\u003e\n  \u003ctextarea\u003e\n\u003cnav [autoCollapse]=\"${autoCollapse}\"\u003e...\u003c/nav\u003e\n  \u003c/textarea\u003e\n  \u003ccode-binding key=\"autoCollapse\" type=\"boolean\" value=\"true\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n### Number with Constraints\n\n```html\n\u003cinteractive-code language=\"scss\"\u003e\n  \u003ctextarea\u003e\n:root {\n  --width: ${width}px;\n}\n  \u003c/textarea\u003e\n  \u003ccode-binding key=\"width\" type=\"number\" value=\"72\" min=\"48\" max=\"120\" step=\"4\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n### Color Picker\n\n```html\n\u003cinteractive-code language=\"scss\"\u003e\n  \u003ctextarea\u003e\n:root {\n  --primary: ${primary};\n}\n  \u003c/textarea\u003e\n  \u003ccode-binding key=\"primary\" type=\"color\" value=\"#6750a4\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n### Comment Toggle (Line Enable/Disable)\n\nComment style adapts to language: `//` for TypeScript/SCSS, `#` for Shell, `\u003c!-- --\u003e` for HTML.\n\n```html\n\u003cinteractive-code language=\"scss\"\u003e\n  \u003ctextarea\u003e\n:root {\n  ${enableWidth}--custom-width: 280px;\n}\n  \u003c/textarea\u003e\n  \u003ccode-binding key=\"enableWidth\" type=\"comment\" value=\"true\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n### Block Comment\n\nUse `${key}...${/key}` syntax for multi-line or inline block comments:\n\n```html\n\u003cinteractive-code language=\"typescript\"\u003e\n  \u003ctextarea\u003e\nconst config = {\n  name: 'app',\n  ${debug}debug: true,\n  verbose: true,${/debug}\n};\n  \u003c/textarea\u003e\n  \u003ccode-binding key=\"debug\" type=\"comment\" value=\"true\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n### Attribute Toggle\n\nToggle HTML attributes on/off. Supports attributes with or without values:\n\n```html\n\u003cinteractive-code language=\"html\"\u003e\n  \u003ctextarea\u003e\n\u003cbutton ${disabled}\u003eSubmit\u003c/button\u003e\n\u003cinput ${placeholder}=\"Enter name\" ${required}\u003e\n  \u003c/textarea\u003e\n  \u003ccode-binding key=\"disabled\" type=\"attribute\" value=\"true\"\u003e\u003c/code-binding\u003e\n  \u003ccode-binding key=\"placeholder\" type=\"attribute\" value=\"true\"\u003e\u003c/code-binding\u003e\n  \u003ccode-binding key=\"required\" type=\"attribute\" value=\"false\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n### Conditional Textareas\n\nShow different code sections based on binding values. Multiple `\u003ctextarea\u003e` elements are concatenated, and the `condition` attribute controls visibility:\n\n```html\n\u003cinteractive-code language=\"typescript\" show-separators\u003e\n  \u003ctextarea\u003econst result = provider.complete(input, { groupBy: ${groupBy} });\u003c/textarea\u003e\n  \u003ctextarea condition=\"!groupBy\"\u003e// Use result.items for flat list\nconsole.log(result.items);\u003c/textarea\u003e\n  \u003ctextarea condition=\"groupBy\"\u003e// Use result.groups for grouped display\nconsole.log(result.groups);\u003c/textarea\u003e\n  \u003ccode-binding key=\"groupBy\" type=\"select\" options=\"undefined,'continent'\" value=\"undefined\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n- `condition=\"key\"` - Show when binding value is truthy\n- `condition=\"!key\"` - Show when binding value is falsy\n- `condition=\"key=value\"` - Show when binding value equals a specific value\n- `condition=\"!key=value\"` - Show when binding value does NOT equal a specific value\n- `show-separators` - Add visual separators between sections (customizable via `--code-separator-color`)\n\n### Collapsible Sections\n\nWrap 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 `\u003ctextarea\u003e` or via the `code` property, in any language.\n\n```html\n\u003cinteractive-code language=\"json\" show-download download=\"config.json\"\u003e\n  \u003ctextarea\u003e{\n  \"name\": \"${name}\",\n${fold}\n  \"_internal\": {\n    \"trace\": true,\n    \"buffer\": 4096\n  },\n${/fold}\n  \"enabled\": ${enabled}\n}\u003c/textarea\u003e\n  \u003ccode-binding key=\"name\" type=\"string\" value=\"app\"\u003e\u003c/code-binding\u003e\n  \u003ccode-binding key=\"enabled\" type=\"boolean\" value=\"true\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n### Action Button\n\nA `button` binding is a clickable token that fires a `change` event on every click (no value to edit, no re-render), with `e.detail` set to its `value` — handy for a hub of actions.\n\n```html\n\u003cinteractive-code language=\"typescript\"\u003e\n  \u003ctextarea\u003eawait provider.${refresh}();\u003c/textarea\u003e\n  \u003ccode-binding key=\"refresh\" type=\"button\" value=\"refresh()\"\n    onchange=\"runAction(e.detail)\"\u003e\u003c/code-binding\u003e\n\u003c/interactive-code\u003e\n```\n\n## Themes\n\nThe built-in default is IntelliJ (Light/Darcula). Four external CSS themes are available as separate stylesheets:\n\n| Theme | File | Light | Dark |\n|-------|------|-------|------|\n| VS Code | `themes/vscode.css` | Light+ | Dark+ |\n| GitHub | `themes/github.css` | Light | Dark |\n| Solarized | `themes/solarized.css` | Light | Dark |\n| Catppuccin | `themes/catppuccin.css` | Latte | Mocha |\n\nLoad a theme by adding a `\u003clink\u003e` stylesheet:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@softwarity/interactive-code/themes/vscode.css\"\u003e\n```\n\nUse `color-scheme` to override light/dark mode per element:\n\n```html\n\u003cinteractive-code language=\"typescript\" color-scheme=\"light\"\u003e\n  ...\n\u003c/interactive-code\u003e\n```\n\n## CSS Customization\n\nThe component exposes CSS custom properties for styling. Themes and custom overrides use these variables.\n\n### UI Variables\n\n| Property | Description |\n|----------|-------------|\n| `--code-bg` | Background color |\n| `--code-text` | Foreground text color |\n| `--code-border-radius` | Border radius |\n| `--code-line-number` | Line number color |\n| `--code-gutter-width` | Width of the left gutter control column |\n| `--code-separator-color` | Separator color between textarea sections |\n| `--code-focus-outline` | Focus ring color |\n| `--code-input-bg` | Inline input background |\n| `--code-input-border` | Inline input border |\n| `--code-hover-bg` | Hover background |\n| `--code-copy-color` | Copy button color |\n| `--code-copy-border` | Copy button border |\n| `--code-copy-accent` | Copy success accent |\n| `--code-color-preview-border` | Color swatch border |\n| `--code-interactive-highlight` | Interactive zone accent color |\n| `--code-interactive-color` | Interactive zone text color |\n| `--code-interactive-bg-color` | Interactive zone background |\n| `--code-interactive-border-color` | Interactive zone border color |\n| `--code-comment-color` | Comment indicator color |\n\n### Token Variables\n\nAll 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`\n\n### Interactive Zone Styling\n\nInteractive controls expose `part=\"interactive\"` for external CSS styling:\n\n```css\ninteractive-code::part(interactive) {\n  text-decoration: underline wavy var(--code-interactive-highlight);\n}\ninteractive-code::part(interactive):hover {\n  background: var(--code-interactive-bg-color);\n}\n```\n\nBuilt-in styles: wavy (default), dotted, dashed, highlight, outline, pill, hand-drawn, none.\n\n```css\ninteractive-code {\n  --code-bg: #282c34;\n  --code-border-radius: 4px;\n  --code-separator-color: rgba(100, 100, 100, 0.5);\n}\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start dev server\nnpm run dev\n\n# Build for production\nnpm run build\n```\n\n## License\n\nMIT - [Softwarity](https://www.softwarity.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftwarity%2Finteractive-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftwarity%2Finteractive-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftwarity%2Finteractive-code/lists"}