menu_book Documentation GitHub public Softwarity

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.

${useTheme} html { color-scheme: ${colorScheme}; }

Interactive Zone Style

Customize how interactive zones look. Select a style to see the CSS and apply it globally.

/* Interactive zone style: ${interactiveStyle} */ /* built-in default no custom CSS needed */ interactive-code::part(interactive) { text-decoration: underline dotted 1.5px var(--code-interactive-highlight); text-underline-offset: 3px; } interactive-code::part(interactive):hover { text-decoration-thickness: 2.5px; } interactive-code::part(interactive) { text-decoration: underline dashed 1.5px var(--code-interactive-highlight); text-underline-offset: 3px; } interactive-code::part(interactive):hover { text-decoration-thickness: 2.5px; } interactive-code::part(interactive) { text-decoration: none; background: rgba(128,128,128,0.15); border-radius: 3px; padding: 1px 4px; } interactive-code::part(interactive):hover { background: rgba(128,128,128,0.25); } interactive-code::part(interactive) { text-decoration: none; outline: 1px dashed var(--code-interactive-border-color); outline-offset: 2px; } interactive-code::part(interactive):hover { outline-style: solid; } interactive-code::part(interactive) { text-decoration: none; background: rgba(128,128,128,0.12); border-radius: 12px; padding: 1px 8px; } interactive-code::part(interactive):hover { background: rgba(128,128,128,0.25); } interactive-code::part(interactive) { text-decoration: none; border: 1.5px solid var(--code-interactive-border-color); border-radius: 55% 45% 50% 40% / 40% 50% 45% 55%; padding: 2px 8px; } interactive-code::part(interactive):hover { box-shadow: 0 0 0 1px var(--code-interactive-border-color); } interactive-code::part(interactive) { text-decoration: none; }

Playground

Click on highlighted values in the code to edit them. Changes emit events you can use to update live elements.

Boolean Type

Click on true/false to toggle:

Accept terms</textarea> Accept terms

Number Type

Click on a number to edit. Supports min, max, step:

.box { width: ${width}px; height: ${height}px; }</textarea>

String Type

Click on a string value to edit it:

${label}</textarea> Click me!

Select Type Dropdown or Carousel

2 options = toggle click, 3+ options = dropdown. Add carousel attribute to cycle through options on click instead:

.alert { background: '${color}'; }</textarea>

Color Type

Click on a color to open the color picker:

.card { border-color: ${borderColor}; }</textarea>

Attribute Type

Click on the attribute to toggle it (strikethrough when disabled). Supports attributes with or without values:

</textarea>

Comment Type (Line Toggle)

Checkbox to comment/uncomment a line. Comment style adapts to language (// for TS/SCSS, # for Shell, <!-- --> for HTML):

.element { ${enableBorder}border: 3px solid #50fa7b; ${enableRadius}border-radius: 12px; }</textarea>

Block Comments (SCSS)

Use ${key}...${/key} syntax for block comments. Click on /* to toggle:

.card { background: #2d2d2d; ${shadow}box-shadow: 0 4px 20px rgba(80,250,123,0.3); transform: translateY(-2px);${/shadow} padding: 1rem; }</textarea>

Block Comments (HTML)

For HTML, block comments use <!-- -->:

Title

${showMeta}

Author: John | Date: 2024

Tags: web, components

${/showMeta}

Content...

</textarea> ...

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:

const result = provider.complete(input, { groupBy: ${groupBy} });</textarea> // Use result.items for flat list console.log(result.items);</textarea> // Use result.groups for grouped display console.log(result.groups);</textarea>

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:

{ // edited live this comment is stripped on copy/download "theme": "${theme}", "fontSize": ${fontSize}, "notifications": ${notifications} }</textarea>

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).

{ "id": "${id}", \${fold} "_internal": { "trace": ${trace}, "verbose": false, "buffer": ${buffer} }, \${/fold} "enabled": ${enabled} }</textarea>

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:

await provider.${load}(); await provider.${save}();</textarea>

Documentation

Installation

npm install @softwarity/interactive-code

Usage

import '@softwarity/interactive-code'; :root { --width: ${width}px; } </textarea>

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

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:

interactive-code { --code-bg: light-dark(#fafafa, #1a1a2e); --code-text: light-dark(#333, #eee); --token-keyword: light-dark(#d63384, #f0a8c4); --token-string: light-dark(#198754, #75d5a0); /* ... see full list in theme files */ }

API - <interactive-code>

Main component for displaying syntax-highlighted code with interactive bindings.

Properties

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 truthy
• condition="!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.

Events

Binding Types

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-download buttons (valid JSON export)
• Framework Agnostic - Works with Angular, React, Vue, or vanilla JS
• Shadow DOM - Encapsulated styles
• Zero Dependencies - Pure Web Components

[Softwarity] Made by Softwarity