syidaxdesign system
Home Pricing Settings
ComponentsData display

Code Viewer

PRO

A code documentation component that shows the rendered result alongside its source.

<sy-code-viewer>Installation guide Basic usage
Live preview
Interact with the component to see results here.
View code
HTML
<sy-code-viewer
  language="html"
  show-line-numbers
  show-copy-button
  collapsible
  default-expanded
  highlight-lines="1,4"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

Usage guide

#

A code documentation component showing a rendered result and source. It is not a code editor.

Preview and code

Put the UI in sy-code-render and code in sy-code-script to show both.

Display code only

Pass the source as escaped text. Code-only views remain expanded.

Highlighting and shared options
Configure display options on the parent and specify highlighted lines with highlightLines, such as 2,4-6.
Expansion state
defaultExpanded sets the initial state; expanded is the current state controlled by the app.

Examples

#

Live UI and code

Use sy-code-render together with sy-code-script.

View code
HTML
<sy-code-viewer language="html">
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

Code only

Insert code as text so it does not execute as HTML.

View code
HTML
<sy-code-viewer language="javascript" show-line-numbers>
  <sy-code-script>const project = { name: &quot;Syidax&quot;, active: true };

    function getName() {
    return project.name;
    }</sy-code-script>
</sy-code-viewer>

Highlight specific lines

Specify line numbers or ranges to highlight.

View code
HTML
<sy-code-viewer
  language="javascript"
  highlight-lines="1,3-5"
  show-line-numbers
>
  <sy-code-script>const project = { name: &quot;Syidax&quot;, active: true };

    function getName() {
    return project.name;
    }</sy-code-script>
</sy-code-viewer>

Start collapsed

Expand the source when needed.

View code
HTML
<sy-code-viewer
  language="html"
  default-expanded="false"
  trigger-label="View code"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

Height and line wrapping

Set scriptHeight to limit the height of long code sections.

View code
HTML
<sy-code-viewer
  language="javascript"
  script-height="100px"
  wrap
  show-line-numbers
>
  <sy-code-script>const project = { name: &quot;Syidax&quot;, active: true };

    function getName() {
    return project.name;
    }</sy-code-script>
</sy-code-viewer>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code
HTML
<sy-code-viewer
  language="html"
  show-line-numbers
  show-copy-button
  collapsible
  default-expanded
  highlight-lines="1,4"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["expandedChanged", "languageChanged", "highlightLinesChanged", "ready",
      "childrenChanged", "copied", "codeChanged", "lineClick"
    ]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Control expansion directly

Use expanded to control the current expansion state. defaultExpanded sets the initial state; expanded sets the current state.

View code
HTML
<sy-code-viewer
  language="html"
  show-line-numbers
  show-copy-button
  collapsible
  default-expanded
  highlight-lines="1,4"
  id="supplement-1"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "expanded": false,
    "collapsible": true
  });
</script>

Minimal code display

Display code without line numbers or the copy control.

View code
HTML
<sy-code-viewer
  language="html"
  show-copy-button="false"
  collapsible
  default-expanded
  highlight-lines="1,4"
  id="supplement-1"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "showLineNumbers": false,
    "showCopyButton": false
  });
</script>

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-code-viewer>

Properties

Attribute / PropertyTypeDefaultDescription
string'plaintext'Language used for source highlighting.
booleanfalseShow line-number gutter.
booleantrueShow the copy-to-clipboard button at top-right of the source panel.
booleanfalseWrap long lines of code.
string''Max-height of the script (code panel) section. Accepts any CSS length (`"320px"`, `"40vh"`, …). The live UI section and the collapse trigger are unaffected — only the code panel scrolls past this value. Renamed from the previous `maxHeight` to make the scope (script-only, not viewer-total) explicit at the call site.
string''Comma list of line numbers / ranges to emphasize. e.g. "3,5-7,12". 1-based.
booleanundefinedControl the current source-area expansion state externally.
booleantrueExpand the source area initially.
booleantrueWhen false, the trigger is hidden and the script section is forced expanded.
string'SOURCE'Text in the toggle bar.

Events

EventDetailDescription
CustomEvent<{ expanded: boolean; source: 'user' | 'prop' }>Fires whenever the viewer's expand state changes — by user click on the trigger or by the host updating the `expanded` prop. `source` distinguishes "user click" from "programmatic" for analytics consumers.
CustomEvent<{ language: string }>Fires when the `language` prop changes.
CustomEvent<{ raw: string; lines: number[] }>Fires when the `highlightLines` prop changes. Payload includes parsed line numbers.
CustomEvent<{ hasRender: boolean; hasScript: boolean }>Fires once after the viewer's first render is complete.

Slots

SlotDescription
Component body or child items.

<sy-code-render>

Properties

Attribute / PropertyTypeDefaultDescription
string''Authored markup snapshot — captured at connectedCallback time before descendants hydrate. Read by paired `<sy-code-script>` to display the user's authored markup instead of the post-hydration runtime DOM. Mutable so the component can refresh it after user-driven mutations.

Events

EventDetailDescription
CustomEvent<{ html: string }>Fires whenever the snapshot is refreshed (initial connection or a user-driven mutation that reaches the host's own child list). Paired `<sy-code-script>` listens to this event to re-render the code panel.

<sy-code-script>

Events

EventDetailDescription
CustomEvent<{ code: string; language: string }>Fires after the rendered copy button writes the code to the clipboard successfully. (Past-tense name avoids the JS property collision with the `copy` method that other web standards reserve.)
CustomEvent<{ code: string; lineCount: number; language: string }>Fires whenever the resolved code changes.
CustomEvent<{ line: number }>Fires when a line number is clicked (when `showLineNumbers` on viewer).
Design SystemTab Navigate Enter Open