Getting Started with Code Nexus

Follow these simple steps to install and start using Code Nexus in your projects.

Installation

1. Install the packages

Choose the package that fits your needs (Core `code-nexus` is required for React wrapper):

Vanilla JS / Core:

npm install code-nexus

React:

npm install code-nexus-react code-nexus

2. Add Font (Recommended)

Include the Roboto font in your HTML head for the best experience:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet" />

Basic Usage

React Integration

Import and use the CodeNexus component in your React application:

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

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

Vanilla JS Integration

Use as a web component in any HTML page:

<script type="module">
  import { defineCustomElements } from 'code-nexus/loader';
  defineCustomElements();
</script>

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

Advanced Features

Templates

Create and use custom templates for quick code snippets:

<code-nexus
  enable-templates="true"
  templates={[
    {
      name: "Hello World",
      html: "<h1>Hello</h1>",
      css: "h1 { color: blue }",
      javascript: "console.log('Hello');"
    }
  ]}
></code-nexus>

Customization

Customize the appearance and behavior (theme, layout, etc.):

<code-nexus
  tabbed="true"
  debounce-time="500"
  theme={{
    // Assuming customColors is defined elsewhere
    colors: customColors, 
    dark: false 
  }}
></code-nexus>

Ready to dive deeper?

Check out the components documentation for more detailed information on all available options and features.

View Components