GeezerVison

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.

Boolean Type

Click on true/false to toggle:

Written by developer

Seen by user

check_box check_box_outline_blank Accept terms

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

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