Nexo MDX Editor

Project Overview

Overview

Nexo MDX is a React-based Markdown editor built to solve the styling fragmentation in rich text editors. Unlike traditional editors that force their own styles, Nexo adopts a "Headless UI" philosophy, allowing developers to control the look and feel completely using their own utility classes.

Key Technical Capabilities

Native Accessibility: Built on top of native textarea elements to ensure full screen-reader compatibility and correct form submission behavior without hydration mismatches.
Plugin Architecture: Supports Remark and Rehype plugins, allowing developers to extend functionality (e.g., adding mathematical formulas or code highlighting) without forking the core library.
CSS Module Injection: Features a unique styling engine where developers can override internal component styles using global CSS variables or direct class targeting (e.g., .nexo-mdx-editor .toolbar).

Implementation

import React, { useState } from 'react';
import MdxEditor from 'nexo-mdx';

export function Editor() {
  const [mdValue, setMdValue] = useState('');

  return (
    <MdxEditor
      value={mdValue}
      onChange={(value, _) => setMdValue(value)}
      className="border-zinc-800"
    />
  );
}

Overview

Key Technical Capabilities

Native Accessibility: Built on top of native textarea elements to ensure full screen-reader compatibility and correct form submission behavior without hydration mismatches.
Plugin Architecture: Supports Remark and Rehype plugins, allowing developers to extend functionality (e.g., adding mathematical formulas or code highlighting) without forking the core library.
CSS Module Injection: Features a unique styling engine where developers can override internal component styles using global CSS variables or direct class targeting (e.g., .nexo-mdx-editor .toolbar).

Implementation

import React, { useState } from 'react';
import MdxEditor from 'nexo-mdx';

export function Editor() {
  const [mdValue, setMdValue] = useState('');

  return (
    <MdxEditor
      value={mdValue}
      onChange={(value, _) => setMdValue(value)}
      className="border-zinc-800"
    />
  );
}

Project Overview

Overview

Key Technical Capabilities

Implementation

Deployment & Repos

Tech Stack

System Archive // Select Project

NITH Digital Ecosystem

Nexonauts Marketplace

RAG Data Pipeline Crawler

Serverless Email Automation

NITH Digital Ecosystem

Nexonauts Marketplace

RAG Data Pipeline Crawler

Serverless Email Automation

NITH Digital Ecosystem

Nexonauts Marketplace

RAG Data Pipeline Crawler

Serverless Email Automation

NITH Digital Ecosystem

Nexonauts Marketplace

RAG Data Pipeline Crawler

Serverless Email Automation

Ready to build something iconic?

Nexo MDX Editor

Project Overview

Overview

Key Technical Capabilities

Implementation

Deployment & Repos

Tech Stack

System Archive // Select Project

NITH Digital Ecosystem

Nexonauts Marketplace

RAG Data Pipeline Crawler

Serverless Email Automation

NITH Digital Ecosystem

Nexonauts Marketplace

RAG Data Pipeline Crawler

Serverless Email Automation

NITH Digital Ecosystem

Nexonauts Marketplace

RAG Data Pipeline Crawler

Serverless Email Automation

NITH Digital Ecosystem

Nexonauts Marketplace

RAG Data Pipeline Crawler

Serverless Email Automation

Ready to build something iconic?

Ready to build
something iconic?

Ready to build
something iconic?