CodeNexus

The main component that provides a full-featured code editor with live preview. It supports HTML, CSS, and JavaScript editing with real-time preview and many advanced features.

Basic Usage

<CodeNexus
  html="<h1>Hello World</h1>"
  css="h1 { color: blue; }"
  javascript="console.log('Hello from Code Nexus');"
/>

Properties

General

Property	Description	Type	Default
html	HTML content	string	Empty string
css	CSS content	string	Empty string
javascript	JavaScript content	string	Empty string
debounceTime	Time to debounce updates to the preview	number	300

Appearance

Property	Description	Type	Default
hideEditors	Hides the live editor containers	boolean	false
tabbed	Switches from split view to a tabbed view	boolean	false
theme	Theme configuration	{ colors, dark }	Dark theme

Templates

Property	Description	Type	Default
enableTemplates	Ability to load example/starter templates	boolean	false
templates	Custom starter templates for quick loading	{ name, html, css, javascript }[]	[]

Formatting

Property	Description	Type	Default
enableFormatting	Enables code formatting functionality	boolean	false
formattingOptions	Options for code formatting	FormattingOptions	{}
showFormattingButtons	Show formatting buttons in the UI	boolean	true

Events

contentChange

Event emitted when any editor content changes

{ html: string; css: string; javascript: string }

Example:

<CodeNexus
  onContentChange={(event) => {
    const { html, css, javascript } = event.detail;
    console.log('Content changed:', { html, css, javascript });
  }}
/>

Methods

loadTemplate(template)

Loads a template into the editor

Parameters:

template: { html: string; css: string; javascript: string }

Returns:

Promise<void>

Example:

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

// Load a template
codeNexus.loadTemplate({
  html: '<h1>Hello World</h1>',
  css: 'h1 { color: blue; }',
  javascript: 'console.log("Hello");'
}).then(() => {
  console.log('Template loaded successfully');
});

formatAll()

Format all code sections

Returns:

Promise<void>

Example:

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

// Format all code
codeNexus.formatAll().then(() => {
  console.log('Code formatted successfully');
});

Advanced Examples

Templates

You can provide templates for users to quickly load and experiment with different code examples:

<CodeNexus
  enableTemplates={true}
  templates={[
    {
      name: "Hello World",
      html: "<h1>Hello</h1>",
      css: "h1 { color: blue }",
      javascript: "console.log('Hello');"
    },
    {
      name: "Counter",
      html: "<button id='counter'>Count: 0</button>",
      css: "button { padding: 10px; }",
      javascript: "let count = 0; document.getElementById('counter').addEventListener('click', () => { count++; document.getElementById('counter').textContent = 'Count: ' + count; });"
    }
  ]}
/>

Code Formatting

Enable code formatting to allow users to format their code with a single click:

<CodeNexus 
  enableFormatting={true}
  formattingOptions={{ printWidth: 100, tabWidth: 2, singleQuote: true }}
/>

React Integration

Use the React wrapper for easier integration in React applications:

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

function App() {
  const [html, setHtml] = useState("<h1>Hello World</h1>");
  const [css, setCss] = useState("h1 { color: blue; }");
  const [js, setJs] = useState("console.log('Hello');");

  const handleContentChange = (event) => {
    const { html, css, javascript } = event.detail;
    setHtml(html);
    setCss(css);
    setJs(javascript);
  };

  return (
    <CodeNexus
      html={html}
      css={css}
      javascript={js}
      onContentChange={handleContentChange}
    />
  );
}

Editable Interactive Example

This example is fully editable. You can modify the HTML, CSS, and JavaScript to see your changes in real-time. The editor supports syntax highlighting, code formatting, and provides an instant preview of your code.

Editable Example - Try modifying the code below