InstallationComponents
Back to Components

NexusPanel

A versatile code editor panel that provides syntax highlighting, formatting, and editing capabilities for various programming languages.

Basic Usage

<NexusPanel
  type="html"
  content="<h1>Hello World</h1><p>This is a code panel</p>"
/>

Properties

General

PropertyDescriptionTypeDefault
contentCode content to displaystringEmpty string
typeLanguage for syntax highlighting'html' | 'css' | 'js'js
readonlySet editor to read-only modebooleanfalse

Appearance

PropertyDescriptionTypeDefault
themeEditor theme configuration{ dark: boolean }Dark theme
lineNumbersShow line numbersbooleantrue
showHeaderShow the panel headerbooleantrue
panelNameCustom label for the panel headerstringBased on language

Formatting

PropertyDescriptionTypeDefault
enableFormattingEnables code formatting functionalitybooleanfalse
formattingOptionsOptions for code formattingobject{}
showFormattingButtonShow formatting button in the UIbooleantrue

Events

contentChange

Event emitted when the editor content changes

{ content: string }

Example:

<NexusPanel
  type="js"
  content="console.log('Hello');"
  onContentChange={(event) => {
    console.log('Content changed:', event.detail.content);
  }}
/>

Methods

formatCode()

Format the code in the panel

Returns:

Promise<void>

Example:

// Get a reference to the component
const panel = document.querySelector('nexus-panel');

// Format the code
panel.formatCode().then(() => {
  console.log('Code formatted successfully');
});

getContent()

Get the current content from the editor

Returns:

string

Example:

// Get a reference to the component
const panel = document.querySelector('nexus-panel');

// Get the content
const content = panel.getContent();
console.log('Current content:', content);

Advanced Examples

Multiple Languages

Use NexusPanel with different language settings:

// HTML Panel
<NexusPanel
  type="html"
  content="<h1>Hello World</h1>"
/>

// CSS Panel
<NexusPanel
  type="css"
  content="h1 { color: blue; font-size: 2em; }"
/>

// JavaScript Panel
<NexusPanel
  type="js"
  content="console.log('Hello from Nexus Panel');"
/>

Using Slots

You can provide code content using slots instead of the content property:

<NexusPanel type="css">
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  
  h1 {
    color: blue;
  }
</NexusPanel>

Code Formatting

Enable code formatting with custom options:

<NexusPanel 
  type="js"
  content="function example() { const x = 1; const y = 2; return x + y; }"
  enableFormatting={true}
  formattingOptions={{ printWidth: 80, tabWidth: 2, singleQuote: true }}
/>

React Integration

Use the React wrapper for easier integration in React applications:

import { NexusPanel } from "code-nexus-react";

function CodeEditor() {
  const [code, setCode] = useState("<h1>Hello World</h1>");

  const handleContentChange = (event) => {
    setCode(event.detail.content);
  };

  return (
    <NexusPanel
      type="html"
      content={code}
      onContentChange={handleContentChange}
    />
  );
}

Live Examples

Basic Panel (Read-only)

A simple HTML code panel:

JavaScript Example (Read-only)

JavaScript panel with syntax highlighting:

CSS Styling (Read-only)

CSS code with formatting:

Editable Panel (Try editing the code!)

This panel is editable - try modifying the code below:

Editable Example