open-index/open-npm huggingface dataset:
npm package: @mdx-live/editor
Description: Extensible mdx editor with live preview
Author: Benedikt Rötsch
Latest version: 0.0.5

# MDX live editor - editor

## Usage

```js
import editor from '@mdx-live/editor'
import Grid from './mdx/Grid'

const config = {
  // Your custom MDX components
  components: [
    {
      tagname: 'Grid',
      component: Grid,
      title: 'Grid',
      description: 'Display content next to each other',
      icon: 'columns',
      demo: `<Grid>
  <img src="https://source.unsplash.com/weekly?water" alt="" />
  <img src="https://source.unsplash.com/weekly?nature" alt="" />
  <img src="https://source.unsplash.com/weekly?air" alt="" />
</Grid>`
    }
  ],

  // Overwrite markdown elements
  replacements: {
    h1: ({ children, ...props }) => (
      <h1 style={{ color: 'tomato' }} {...props}>
        {children}
      </h1>
    )
  },
  easymde: {
    // See https://github.com/Ionaru/easy-markdown-editor#configuration for available options
  }
}

const mdxLive = editor(config)
```

## configuration

By default, the first found `<textarea />` will be used to inject the editor. See [easyMDE config](#config-easymde) if you want to embed it in a specific one.

### `config.components`

Your custom mdx components. Components configuration structure:

```js
{
  // JSX tagname for editor embedding
  tagname: 'Grid',

  // Actual component to render
  component: Grid,

  // Title for toolbar
  title: 'Grid',

   // Description for help
  description: 'Display content next to each other',

  // Icon for toolbar
  icon: 'columns',

  // Demo code snippet for help
  demo: `<Grid>
  <img src="https://source.unsplash.com/weekly?water" alt="" />
  <img src="https://source.unsplash.com/weekly?nature" alt="" />
  <img src="https://source.unsplash.com/weekly?air" alt="" />
</Grid>`
    }
```

### `config.replacements`

Replace default markdown components with your own. Config see [MDX runtime](https://mdxjs.com/advanced/runtime)

### `config.easymde`

Config see [easyMDE](https://github.com/Ionaru/easy-markdown-editor#configuration)

#### Define textarea to inject the editor

Pass a reference to your textarea via `config.easymde.element`

```html
<textarea id="editor" />
```

```js
const textarea = document.getElementById('editor')

const mdxLive = editor({ easymde: { element: textarea } })
```
npm package: @mdxe/cloudflare
Description: Deploy MDX projects to Cloudflare Workers and Pages
Author: MDX.org.ai
Latest version: 1.9.0

# @mdxe/cloudflare

Deploy MDX projects to Cloudflare Workers and Pages with automatic detection of static vs. dynamic content (OpenNext SSR).

## Installation

```bash
pnpm add @mdxe/cloudflare
```

## Usage

### Auto-detect deployment target

```typescript
import { deploy } from '@mdxe/cloudflare'

const result = await deploy({
  projectDir: './my-project',
  projectName: 'my-site',
  accountId: process.env.CLOUDFLARE_ACCOUNT_ID,
  apiToken: process.env.CLOUDFLARE_API_TOKEN,
})

console.log(`Deployed to: ${result.url}`)
```

### Deploy to Workers (dynamic/SSR)

```typescript
const result = await deploy({
  projectDir: './my-next-app',
  target: 'workers',
  mode: 'opennext', // For Next.js SSR
  kvNamespaces: { MY_KV: 'namespace-id' },
  d1Databases: { DB: 'database-id' },
})
```

### Deploy to Pages (static)

```typescript
const result = await deploy({
  projectDir: './my-static-site',
  target: 'pages',
  mode: 'static',
})
```

## API

- `deploy(options)` - Auto-detect and deploy to Workers or Pages
- `deployToWorkers(options)` - Deploy to Cloudflare Workers
- `deployToPages(options)` - Deploy to Cloudflare Pages
- `detectSourceType(dir)` - Detect framework and adapter (opennext, astro-cloudflare, static)
- `CloudflareApi` - Direct API client for Workers management

## Provider Interface

```typescript
import { createProvider } from '@mdxe/cloudflare'

const provider = createProvider({
  accountId: 'your-account-id',
  apiToken: 'your-api-token',
})

await provider.deploy({ projectDir: './my-project' })
```

## Environment Variables

- `CLOUDFLARE_ACCOUNT_ID` - Your Cloudflare account ID
- `CLOUDFLARE_API_TOKEN` - API token with Workers/Pages permissions
npm package: @mdxe/deploy
Description: Unified deployment interface for MDX projects - deploy to .do, Cloudflare, Vercel, or GitHub Pages
Author: MDX.org.ai
Latest version: 1.9.0

# @mdxe/deploy

Unified deployment interface for MDX projects. Deploy to .do, Cloudflare, Vercel, or GitHub Pages with a single API.

## Installation

```bash
pnpm add @mdxe/deploy
```

## Usage

### Auto-detect platform

```typescript
import { deploy } from '@mdxe/deploy'

// Detects platform from wrangler.toml, vercel.json, or defaults to .do
const result = await deploy({
  projectDir: './my-project',
  name: 'my-site',
})

console.log(`Deployed to ${result.platform}: ${result.url}`)
```

### Deploy to specific platform

```typescript
// Deploy to .do platform (default)
await deploy({
  projectDir: './my-project',
  platform: 'do',
})

// Deploy to Cloudflare
await deploy({
  projectDir: './my-project',
  platform: 'cloudflare',
})

// Deploy to Vercel
await deploy({
  projectDir: './my-project',
  platform: 'vercel',
  production: true,
})

// Deploy to GitHub Pages
await deploy({
  projectDir: './my-project',
  platform: 'github',
  repository: 'user/repo',
})
```

## Platform Detection

The package automatically detects the best platform based on:

1. **Explicit config** - `wrangler.toml` → Cloudflare, `vercel.json` → Vercel
2. **Default** - .do platform (managed serverless)

```typescript
import { detectPlatform } from '@mdxe/deploy'

const detection = detectPlatform('./my-project')
console.log(detection)
// { platform: 'do', confidence: 0.9, framework: 'nextjs', isStatic: false }
```

## Platform-Specific Helpers

```typescript
import { deployToDo, deployToCloudflare, deployToVercel, deployToGitHub } from '@mdxe/deploy'

await deployToDo({ projectDir: '.' })
await deployToCloudflare({ projectDir: '.' })
await deployToVercel({ projectDir: '.' })
await deployToGitHub({ projectDir: '.' })
```

## Deployment Management

```typescript
import { getDeploymentStatus, cancelDeployment, deleteDeployment } from '@mdxe/deploy'

// Check status (Vercel)
const status = await getDeploymentStatus('vercel', 'deployment-id')

// Cancel deployment
await cancelDeployment('vercel', 'deployment-id')

// Delete deployment
await deleteDeployment('vercel', 'deployment-id')
```

## Custom Providers

```typescript
import { registerProvider, type DeployProvider } from '@mdxe/deploy'

const customProvider: DeployProvider = {
  platform: 'custom',
  name: 'Custom Platform',
  async deploy(options) {
    // Your deployment logic
    return { success: true, url: 'https://...' }
  },
  supports(options) {
    return true
  },
}

registerProvider(customProvider)
```
npm package: @mdxe/do
Description: Deploy MDX projects to the .do platform
Author: MDX.org.ai
Latest version: 1.9.0

# @mdxe/do

Deploy MDX projects to the .do platform - a managed serverless deployment service built on Cloudflare Workers.

## Installation

```bash
pnpm add @mdxe/do
```

## Usage

```typescript
import { deploy } from '@mdxe/do'

const result = await deploy({
  projectDir: './my-project',
  projectName: 'my-site',
})

if (result.success) {
  console.log(`Deployed to: ${result.url}`)
}
```

## Features

- **OAuth Authentication** - Automatic login via oauth.do
- **Static & Dynamic** - Supports static sites and OpenNext SSR
- **Multi-tenant** - Deploy to Workers for Platforms namespaces
- **Bindings** - KV, D1, R2, and Durable Objects support
- **Custom Domains** - Automatic HTTPS

## Deployment Modes

### Static Sites

```typescript
await deploy({
  projectDir: './my-vite-app',
  mode: 'static',
  outputDir: 'dist',
})
```

### Next.js with OpenNext

```typescript
await deploy({
  projectDir: './my-next-app',
  mode: 'opennext',
  buildCommand: 'npm run build',
})
```

## Worker Bindings

```typescript
await deploy({
  projectDir: './my-app',
  kvNamespaces: {
    MY_KV: 'namespace-id',
  },
  d1Databases: {
    DB: 'database-id',
  },
  r2Buckets: {
    BUCKET: 'bucket-name',
  },
  durableObjects: {
    MY_DO: 'class-name',
  },
})
```

## Multi-tenant Deployments

```typescript
// Deploy to Workers for Platforms namespace
await deploy({
  projectDir: './tenant-app',
  dispatchNamespace: 'my-namespace',
  tenantId: 'customer-123',
})
```

## Custom Domains

```typescript
await deploy({
  projectDir: './my-site',
  customDomain: 'example.com',
})
```

## API Client

```typescript
import { DoApi, createDoApiFromEnv } from '@mdxe/do/api'

const api = createDoApiFromEnv()

// Get worker info
const { worker } = await api.getWorker('my-worker')

// Delete worker
await api.deleteWorker('my-worker')

// List workers
const { workers } = await api.listWorkers()
```

## Environment Variables

- `DO_API_URL` - Custom API URL (defaults to production)
npm package: @mdxe/github
Description: Deploy MDX projects to GitHub Pages
Author: MDX.org.ai
Latest version: 1.9.0

# @mdxe/github

Deploy MDX projects to GitHub Pages via git push, GitHub Actions, or managed API.

## Installation

```bash
pnpm add @mdxe/github
```

## Usage

### Direct git push (default)

```typescript
import { deploy } from '@mdxe/github'

const result = await deploy({
  projectDir: './my-project',
  repository: 'user/repo',
  token: process.env.GITHUB_TOKEN,
})

console.log(`Deployed to: ${result.url}`)
```

### GitHub Actions workflow

```typescript
import { deploy } from '@mdxe/github'

// Generates and commits workflow file
await deploy({
  projectDir: './my-project',
  useActions: true,
})

// Next push will trigger automated deployment
```

### Manually generate workflow

```typescript
import { setupPagesActions } from '@mdxe/github/actions'

const workflowPath = setupPagesActions({
  projectDir: './my-project',
  buildCommand: 'build',
  outputDir: 'out',
})
```

## Options

```typescript
await deploy({
  projectDir: './my-project',
  repository: 'user/repo', // Auto-detected from git remote
  branch: 'gh-pages', // Target branch (default: 'gh-pages')
  sourceBranch: 'main', // Source branch for Actions
  outputDir: 'out', // Build output directory
  buildCommand: 'build', // npm script to run
  token: process.env.GITHUB_TOKEN,
  customDomain: 'example.com',
  clean: true, // Clean branch before deploy (default: true)
  preserve: ['.git'], // Files to preserve
})
```

## GitHub API

```typescript
import { configurePagesApi } from '@mdxe/github'

// Enable and configure Pages via API
await configurePagesApi({
  token: process.env.GITHUB_TOKEN,
  owner: 'user',
  repo: 'repo',
  customDomain: 'example.com',
  enforceHttps: true,
})
```

## Workflow Generation

```typescript
import { generatePagesWorkflow, generateNextJsWorkflow } from '@mdxe/github/actions'

// Static site workflow
const staticWorkflow = generatePagesWorkflow({
  buildCommand: 'build',
  outputDir: 'dist',
})

// Next.js workflow
const nextWorkflow = generateNextJsWorkflow({
  buildCommand: 'build',
  outputDir: 'out',
})
```

## Environment Variables

- `GITHUB_TOKEN` - Personal access token with `repo` and `pages` permissions
- `GITHUB_API_URL` - Custom managed API URL (optional)

## Deployment Methods

1. **Direct Git Push** (default) - Clones gh-pages branch, copies files, commits and pushes
2. **GitHub Actions** - Generates workflow file for automated deployments
3. **Managed API** - Uses oauth.do authentication with managed API endpoint
npm package: @mdxe/vercel
Description: Deploy MDX projects to Vercel
Author: MDX.org.ai
Latest version: 1.9.0

# @mdxe/vercel

Deploy MDX projects to Vercel via CLI, REST API, or managed API with automatic framework detection.

## Installation

```bash
pnpm add @mdxe/vercel
```

## Usage

### Simple deployment (auto-detects CLI or API)

```typescript
import { deploy } from '@mdxe/vercel'

const result = await deploy({
  projectDir: './my-project',
  projectName: 'my-site',
  token: process.env.VERCEL_TOKEN,
})

console.log(`Deployed to: ${result.url}`)
```

### Production deployment

```typescript
const result = await deploy({
  projectDir: './my-next-app',
  production: true,
  token: process.env.VERCEL_TOKEN,
})
```

### With custom configuration

```typescript
await deploy({
  projectDir: './my-app',
  framework: 'nextjs',
  buildCommand: 'build',
  outputDir: '.next',
  env: {
    API_KEY: 'secret',
  },
  regions: ['sfo1', 'iad1'],
})
```

## API Client

```typescript
import { VercelApi, createVercelApiFromEnv } from '@mdxe/vercel/api'

const api = createVercelApiFromEnv()

// Create deployment
const deployment = await api.createDeployment({
  name: 'my-project',
  files: [{ file: 'index.html', data: '<html>...</html>' }],
  target: 'production',
})

// Get deployment status
const status = await api.getDeployment(deployment.id)

// Wait for deployment
await api.waitForDeployment(deployment.id, {
  timeout: 600000,
  pollInterval: 5000,
})

// Cancel deployment
await api.cancelDeployment(deployment.id)

// Delete deployment
await api.deleteDeployment(deployment.id)
```

## Project Management

```typescript
import { linkProject, setEnvVars } from '@mdxe/vercel'

// Link or create project
const { projectId } = await linkProject({
  projectDir: './my-app',
  projectName: 'my-site',
  framework: 'nextjs',
  token: process.env.VERCEL_TOKEN,
})

// Set environment variables
await setEnvVars({
  projectId,
  env: {
    DATABASE_URL: 'postgres://...',
    API_KEY: 'secret',
  },
  target: ['production', 'preview'],
  token: process.env.VERCEL_TOKEN,
})
```

## Git Integration

```typescript
await deploy({
  projectDir: './my-app',
  git: {
    commitSha: '1234567',
    commitMessage: 'Add new feature',
    commitAuthorName: 'Alice',
    branch: 'main',
  },
})
```

## Framework Detection

Automatically detects and configures:
- Next.js
- Vite
- Remix
- Astro
- Gatsby
- Nuxt
- SvelteKit

## Environment Variables

- `VERCEL_TOKEN` - Vercel API token
- `VERCEL_TEAM_ID` - Team ID (for team deployments)
- `VERCEL_API_URL` - Custom managed API URL (optional)

## Deployment Methods

1. **Vercel CLI** (default if installed) - Uses `npx vercel`
2. **Vercel REST API** - Direct API calls with file uploads
3. **Managed API** - Uses oauth.do authentication
npm package: @mdxeditor/editor
Description: React component for rich text markdown editing
Author: Petyo Ivanov
Latest version: 3.54.0

# MDXEditor

![npm](https://img.shields.io/npm/v/@mdxeditor/editor)
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@mdxeditor/editor)

> Because markdown editing can be even more delightful.

MDXEditor is an open-source React component that allows users to author markdown documents naturally. Just like in Google docs or Notion. [See the live demo](https://mdxeditor.dev/editor/demo) that has all features turned on. 
The component supports the core markdown syntax and certain extensions, including tables, images, code blocks, etc. It also allows users to edit JSX components with a built-in JSX editor or a custom one.

```jsx
import {MDXEditor, headingsPlugin} from '@mdxeditor/editor';
import '@mdxeditor/editor/style.css';

export default function App() {
  return <MDXEditor markdown={'# Hello World'} plugins={[headingsPlugin()]} />;
}
```
## Get Started

The best place to get started using the component is the [documentation](https://mdxeditor.dev/editor/docs/getting-started).

## Help and support

If you find a bug, check if something similar is not reported already in the [issues](https://github.com/mdx-editor/editor/issues). If not, [create a new issue](https://github.com/mdx-editor/editor/issues/new?assignees=&labels=bug&projects=&template=1.bug.md&title=%5BBUG%5D).

If you're integrating the component in your commercial project and need dedicated assistance with your issues in exchange of sponsorship, [contact me over email](mailto:petyo@mdxeditor.dev).

If you want to discuss ideas start a discussion in the [Discussions](https://github.com/mdx-editor/editor/discussions) section.

## License

MIT &copy; Petyo Ivanov.
npm package: @mdxh/vue-i18n
Description: Install I18n to vue3 using dxh wrapper
Author: DEVxHUB
Latest version: 0.0.2

# @dxh/vue-i18n

Install I18n to vue3 using dxh wrapper

## Uses

### Installation

Just use the below command to install Vue I18n.

```sh
npm i @mdxh/vue-i18n@latest
```

### Install the vue-i18n via app.use()

Create a vue-i18n instance and pass it to the app as a plugin:

```sh
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

const i18n = createI18n({
  // something vue-i18n options here ...
})
const app = createApp(App)

app.use(i18n)
app.mount('#app')
```

### Start your project

```sh
npm run dev
```

## I18n Documentation

See [I18n Documentation](https://vue-i18n.intlify.dev).
npm package: @mdxh/vue-pinia
Description: Install Pinia to vue3 using dxh wrapper
Author: DEVxHUB
Latest version: 0.1.0

# @dxh/vue-pinia

Install Pinia to vue3 using dxh wrapper

## Uses

### Installation

Just use the below command to install Pinia.

```sh
npm i @mdxh/vue-pinia@latest
```

### Create a pinia instance

Create a pinia instance (the root store) and pass it to the app as a plugin:

```sh
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')
```

### Start your project

```sh
npm run dev
```

## Pinia Documentation

See [Pinia Documentation](https://pinia.vuejs.org/introduction.html).
npm package: @mdxh/vue-tailwindcss
Description: Install tailwindcss to vue3 with single command
Author: DEVxHUB
Latest version: 0.1.0

# @dxh/vue-tailwindcss

Install tailwindcss to vue3 with single command

## Uses

### Install Tailwind CSS with this Package

Just use the below command to install TaiwindCSS with all its dipendencies.

```sh
npm i -D @mdxh/vue-tailwindcss@latest
```

This command will install `tailwindcss`, `postcss`, `autoprefixer` automatically.

### Generate configuration file

You can use below command to generate `postcss.cofig.js` and `tailwind.config.js` automatically.

```sh
npx tailwindcss init -p
```

To update configaration file see [TailwindCSS Installation](https://tailwindcss.com/docs/installation).

### Add Tailwind to your PostCSS configuration

Create or Update `postcss.cofig.js` with the following configurnation...

```sh
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

### Add tailwind.config.ts configuration file

Create or Update `tailwind.config.ts` with the following configurnation...

```sh
/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}
```

### Add the Tailwind directives to your main CSS

Add the `@tailwind` directives for each of Tailwind’s layers to your main.css file.

```sh
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Start your project

```sh
npm run dev
```

## TailwindCSS Documentation

See [TailwindCSS Documentation](https://tailwindcss.com/).
npm package: @mdxh/vue-toastification
Description: Install vue-toastification to vue3 using dxh wrapper
Author: DEVxHUB
Latest version: 0.0.1

# @mdxh/vue-toastification

Install VueToastification to vue3 using dxh wrapper

## Usage

### Installation

Just use the below command to install VueToastification.

```sh
npm i @mdxh/vue-toastification@latest
```

### Plugin registration

Create a VueToastification instance and pass it to the app as a plugin:

```sh
import { createApp } from "vue";
import Toast, { type PluginOptions } from "vue-toastification";
// Import the CSS or use your own!
import "vue-toastification/dist/index.css";

const app = createApp(...);

const options: PluginOptions = {
    // You can set your default options here
};

app.use(Toast, options);
```

### Start your project

```sh
npm run dev
```

## VueToastification Documentation

See [VueToastification Documentation](https://github.com/Maronato/vue-toastification).
npm package: @mdxh/vueuse-core
Description: Install VueUse to vue3 using dxh wrapper
Author: DEVxHUB
Latest version: 0.1.1

# @dxh/vueuse-core

Install VueUseCore to vue3 using dxh wrapper

## Uses

### Installation

Just use the below command to install VueUseCore.

```sh
npm i @mdxh/vueuse-core@latest
```

## VueUse Documentation

See [VueUse Documentation](https://vueuse.org/guide/).
npm package: @mdxp/components
Description: Components for MDXP
Author: 0phoff
Latest version: 0.2.1

<div align="center">

<img alt="Logo" src="https://raw.githubusercontent.com/0phoff/MDXP/master/public/logo.svg" width="100%"/>

[![NPM](https://img.shields.io/npm/v/@mdxp/core)](https://www.npmjs.com/package/@mdxp/core)
![Downloads](https://img.shields.io/npm/dt/@mdxp/core)
[![Size](https://img.shields.io/bundlephobia/minzip/@mdxp/core)](https://bundlephobia.com/result?p=@mdxp/core)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/0phoff/MDXP/blob/master/LICENSE.md)
<a href="https://ko-fi.com/D1D31LPHE"><img alt="Ko-Fi" src="https://www.ko-fi.com/img/githubbutton_sm.svg" height="20"></a>

_Web Slides Made Easy_

</div>

MDX Presenter allows you to create slides easily with React and MDX.  
With this tool, you can:

- _Write_ your presentations in Markdown.
- _Use_ React components, or even build your own.
- _Create_ a consistent look and feel with Theme-UI.
- _Present_ on any computer with a (modern) browser, by using the onepage build mode.
- _Integrate_ it in any of your favourite web bundlers, static site generators, ...

[Click here](https://0phoff.github.io/MDXP/examples/demo) to view a demo built with MDXP or  
[Click here](https://0phoff.github.io/MDXP) to take a look at the documentation.
npm package: @mdxp/core
Description: MDXP Core package
Author: 0phoff
Latest version: 0.2.5

<div align="center">

<img alt="Logo" src="https://raw.githubusercontent.com/0phoff/MDXP/master/public/logo.svg" width="100%"/>

[![NPM](https://img.shields.io/npm/v/@mdxp/core)](https://www.npmjs.com/package/@mdxp/core)
![Downloads](https://img.shields.io/npm/dt/@mdxp/core)
[![Size](https://img.shields.io/bundlephobia/minzip/@mdxp/core)](https://bundlephobia.com/result?p=@mdxp/core)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/0phoff/MDXP/blob/master/LICENSE.md)
<a href="https://ko-fi.com/D1D31LPHE"><img alt="Ko-Fi" src="https://www.ko-fi.com/img/githubbutton_sm.svg" height="20"></a>

_Web Slides Made Easy_

</div>

MDX Presenter allows you to create slides easily with React and MDX.  
With this tool, you can:

- _Write_ your presentations in Markdown.
- _Use_ React components, or even build your own.
- _Create_ a consistent look and feel with Theme-UI.
- _Present_ on any computer with a (modern) browser, by using the onepage build mode.
- _Integrate_ it in any of your favourite web bundlers, static site generators, ...

[Click here](https://0phoff.github.io/MDXP/examples/demo) to view a demo built with MDXP or  
[Click here](https://0phoff.github.io/MDXP) to take a look at the documentation.
npm package: @mdxp/create-webpack
Description: Init template for MDXP with Webpack
Author: 0phoff
Latest version: 0.2.5

<div align="center">

<img alt="Logo" src="https://raw.githubusercontent.com/0phoff/MDXP/master/public/logo.svg" width="100%"/>

[![NPM](https://img.shields.io/npm/v/@mdxp/core)](https://www.npmjs.com/package/@mdxp/core)
![Downloads](https://img.shields.io/npm/dt/@mdxp/core)
[![Size](https://img.shields.io/bundlephobia/minzip/@mdxp/core)](https://bundlephobia.com/result?p=@mdxp/core)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/0phoff/MDXP/blob/master/LICENSE.md)
<a href="https://ko-fi.com/D1D31LPHE"><img alt="Ko-Fi" src="https://www.ko-fi.com/img/githubbutton_sm.svg" height="20"></a>

_Web Slides Made Easy_

</div>

MDX Presenter allows you to create slides easily with React and MDX.  
With this tool, you can:

- _Write_ your presentations in Markdown.
- _Use_ React components, or even build your own.
- _Create_ a consistent look and feel with Theme-UI.
- _Present_ on any computer with a (modern) browser, by using the onepage build mode.
- _Integrate_ it in any of your favourite web bundlers, static site generators, ...

[Click here](https://0phoff.github.io/MDXP/examples/demo) to view a demo built with MDXP or  
[Click here](https://0phoff.github.io/MDXP) to take a look at the documentation.
npm package: @mdxp/pdf
Description: Create PDF from MDXP presentation
Author: 0phoff
Latest version: 0.2.1

<div align="center">

<img alt="Logo" src="https://raw.githubusercontent.com/0phoff/MDXP/master/public/logo.svg" width="100%"/>

[![NPM](https://img.shields.io/npm/v/@mdxp/core)](https://www.npmjs.com/package/@mdxp/core)
![Downloads](https://img.shields.io/npm/dt/@mdxp/core)
[![Size](https://img.shields.io/bundlephobia/minzip/@mdxp/core)](https://bundlephobia.com/result?p=@mdxp/core)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/0phoff/MDXP/blob/master/LICENSE.md)
<a href="https://ko-fi.com/D1D31LPHE"><img alt="Ko-Fi" src="https://www.ko-fi.com/img/githubbutton_sm.svg" height="20"></a>

_Web Slides Made Easy_

</div>

MDX Presenter allows you to create slides easily with React and MDX.  
With this tool, you can:

- _Write_ your presentations in Markdown.
- _Use_ React components, or even build your own.
- _Create_ a consistent look and feel with Theme-UI.
- _Present_ on any computer with a (modern) browser, by using the onepage build mode.
- _Integrate_ it in any of your favourite web bundlers, static site generators, ...

[Click here](https://0phoff.github.io/MDXP/examples/demo) to view a demo built with MDXP or  
[Click here](https://0phoff.github.io/MDXP) to take a look at the documentation.
npm package: @mdxp/rehypex-plugins
Description: Rehype plugins for MDXHAST
Author: 0phoff
Latest version: 0.2.1

<div align="center">

<img alt="Logo" src="https://raw.githubusercontent.com/0phoff/MDXP/master/public/logo.svg" width="100%"/>

[![NPM](https://img.shields.io/npm/v/@mdxp/core)](https://www.npmjs.com/package/@mdxp/core)
![Downloads](https://img.shields.io/npm/dt/@mdxp/core)
[![Size](https://img.shields.io/bundlephobia/minzip/@mdxp/core)](https://bundlephobia.com/result?p=@mdxp/core)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/0phoff/MDXP/blob/master/LICENSE.md)
<a href="https://ko-fi.com/D1D31LPHE"><img alt="Ko-Fi" src="https://www.ko-fi.com/img/githubbutton_sm.svg" height="20"></a>

_Web Slides Made Easy_

</div>

MDX Presenter allows you to create slides easily with React and MDX.  
With this tool, you can:

- _Write_ your presentations in Markdown.
- _Use_ React components, or even build your own.
- _Create_ a consistent look and feel with Theme-UI.
- _Present_ on any computer with a (modern) browser, by using the onepage build mode.
- _Integrate_ it in any of your favourite web bundlers, static site generators, ...

[Click here](https://0phoff.github.io/MDXP/examples/demo) to view a demo built with MDXP or  
[Click here](https://0phoff.github.io/MDXP) to take a look at the documentation.
npm package: @mdxport/cli
Description: Markdown to PDF via Typst — single binary, LaTeX math support, beautiful templates
Latest version: 0.2.11

# mdxport

Markdown to PDF via [Typst](https://typst.app). Single binary, no dependencies.

- LaTeX math support (`$E = mc^2$`, `\frac{a}{b}`)
- Built-in templates or bring your own `.typ`
- YAML frontmatter (title, author, language, TOC)
- Watch mode — recompile on file change

## Install

```sh
# npm (recommended)
npm install -g @mdxport/cli

# or via npx (no install)
npx @mdxport/cli input.md -o output.pdf

# or cargo
cargo install mdxport
```

## CLI Usage

```sh
# Basic conversion
mdxport input.md -o output.pdf

# Choose a style
mdxport input.md -s classic-editorial

# Custom template
mdxport input.md --template my_style.typ

# Override metadata
mdxport input.md -t "My Title" -a "Author Name" --lang zh

# Watch mode
mdxport input.md -w

# Multiple files
mdxport chapter1.md chapter2.md -o output_dir/

# From stdin
cat input.md | mdxport -o output.pdf
```

## Frontmatter

```yaml
---
title: "Document Title"
author: "Single Author"
# or multiple:
authors:
  - Alice
  - Bob
lang: zh  # auto-detected if omitted
toc: true
---
```

## Custom Templates

Templates are Typst files that define an `#article` function:

```typst
#let article(
  title: none,
  authors: (),
  lang: "en",
  toc: false,
  body,
) = {
  // your styling here
  body
}
```

See `src/template/modern_tech.typ` and `src/template/classic_editorial.typ` for examples.

## Architecture

```
Markdown ──comrak──→ AST ──convert──→ Typst markup
                                         │
                            LaTeX math ──tex2typst-rs──→ Typst math
                                         │
                              template ──compose──→ full .typ source
                                         │
                          typst crate ──compile──→ PDF bytes
```

## License

MIT
npm package: @mdxprograms/react-base
Description: Base ui components for react
Latest version: 2.0.0

# React Base Components

### Description

This library is intended to speed up development by providing common UI components that can be used in multiple projects,
while remaining unopinionated on styling and code structure.

### Adding to existing project

```

1. yarn add @mdxprograms/react-base

# In your component add the following depending on the components you need and that are available
import { Button } from "@mdxprograms/react-base"

```

### Developing locally

Install dependencies for both the test app and the library
@NOTE: This process also runs `yarn run linksandbox` to enable the sandbox app to update during changes to the react-base components

```bash
yarn run install:all
```

Start up both servers and develop away!

```bash
yarn start
```

Build lib

```bash
yarn run build
```

### Running the linter

You can run the linter either in a separate terminal tab while developing or as a one-off with the following commands

```bash

# run one-of instance
yarn run lint

# run in parallel to dev server running in a separate terminal window
yarn run lint:watch

```

### npm link command

This command will link the react-base and sandbox setups

```bash

yarn run linksandbox

```

### Running the test suite

```bash
@TODO: needs implemented
```

### How to contribute

1. Check issues are or create a new issue based on particular needs
2. Create branch with issue number in branch name, ie: add-ci-checks-2
3. Assign PR to any of the contributors added to the repo for review.
4. Once PR is approved, the reviewer can then run then merge into master and publish to npm

### Publishing to NPM

@TODO: Add details after travisci quality checks are implemented

Currently the process involves running `npm version {major|minor|patch}` then `npm publish`
`npm publish` will run the `prepublish` script in `package.json` which ultimately runs a build of lib and then pushes to npm registry.
npm package: @mdxui/blog
Description: Blog-specific layouts and components for MDXUI
Latest version: 1.0.2

# @mdxui/blog

Blog-specific layouts and components for MDXUI, optimized for creating modern, performant blog sites with MDX and YAML-LD frontmatter.

## Installation

```bash
pnpm add @mdxui/blog
```

## Features

- Blog-specific layouts
- Post list components
- Category and tag components
- Author bio components
- Related posts
- Social sharing
- SEO optimization
- RSS feed support

## Usage

```tsx
import { BlogLayout, PostList, AuthorBio } from '@mdxui/blog'

// In your MDX file
---
$type: BlogPost
title: My First Blog Post
author: John Doe
date: 2024-03-20
tags: ['react', 'mdx']
---

export default function BlogPost({ children }) {
  return (
    <BlogLayout>
      <article>{children}</article>
      <AuthorBio />
    </BlogLayout>
  )
}

// In your blog index
export default function BlogIndex({ posts }) {
  return (
    <BlogLayout>
      <PostList posts={posts} />
    </BlogLayout>
  )
}
```

## Components

- `BlogLayout` - Main blog layout with sidebar and navigation
- `PostList` - Paginated list of blog posts
- `AuthorBio` - Author biography component
- `TagCloud` - Tag visualization
- `ShareButtons` - Social sharing buttons
- `TableOfContents` - Post navigation

## Related Packages

- `@mdxui/types` - TypeScript type definitions
- `@mdxui/shared` - Shared components and utilities
- `@mdxui/widgets` - Interactive components

## License

MIT © 2024 [Drivly](https://driv.ly)
npm package: @mdxui/dashboard
Description: Application dashboard shells and components for MDXUI
Latest version: 1.0.2

# @mdxui/dashboard

Application dashboard shells and components for MDXUI, designed for creating modern admin interfaces and data dashboards with MDX and YAML-LD frontmatter.

## Installation

```bash
pnpm add @mdxui/dashboard
```

## Features

- Dashboard layouts and shells
- Data visualization components
- Admin interface components
- Navigation systems
- Data tables and grids
- Stats cards and widgets
- Real-time data support
- User management interfaces
- Dark/light mode support

## Usage

```tsx
import { 
  DashboardLayout, 
  DataGrid, 
  StatsCard,
  Chart 
} from '@mdxui/dashboard'

// In your MDX file
---
$type: DashboardPage
title: Analytics Dashboard
---

export default function Dashboard({ children }) {
  return (
    <DashboardLayout>
      <StatsGrid>
        <StatsCard 
          title="Total Users"
          value={1234}
          trend="+12%"
        />
        {/* More stats cards */}
      </StatsGrid>
      <Chart 
        data={analyticsData}
        type="line"
      />
      <DataGrid 
        data={userData}
        columns={columns}
      />
      {children}
    </DashboardLayout>
  )
}
```

## Components

- `DashboardLayout` - Main dashboard layout
- `Sidebar` - Dashboard navigation sidebar
- `TopBar` - Dashboard header with actions
- `StatsCard` - Metric display cards
- `DataGrid` - Data tables with sorting/filtering
- `Chart` - Data visualization charts
- `UserMenu` - User profile and settings
- `NotificationCenter` - Alerts and notifications

## Integration

- Works with Tremor charts
- Compatible with shadcn/ui components
- Real-time data support
- REST/GraphQL integration
- WebSocket support

## Related Packages

- `@mdxui/types` - TypeScript type definitions
- `@mdxui/shared` - Shared components and utilities
- `@mdxui/tremor` - Tremor chart components
- `@mdxui/widgets` - Interactive components

## License

MIT © 2024 [Drivly](https://driv.ly)
npm package: @mdxui/discovery
Description: Directory and listing template components for mdxui - directories, catalogs, and discovery pages
Author: dot.do
Latest version: 6.0.0

# @mdxui/discovery

Directory and listing template components for mdxui - build directories, catalogs, and discovery pages.

## Installation

```bash
npm install @mdxui/discovery @mdxui/primitives @mdxui/themes mdxui
# or
pnpm add @mdxui/discovery @mdxui/primitives @mdxui/themes mdxui
```

## Quick Start

```tsx
import { DirectoryLayout, DirectoryHero, CardGrid, ListingCard } from '@mdxui/discovery'

const items = [
  { id: '1', title: 'Item 1', description: 'Description 1', href: '/items/1' },
  { id: '2', title: 'Item 2', description: 'Description 2', href: '/items/2' },
]

export default function DirectoryPage() {
  return (
    <DirectoryLayout>
      <DirectoryHero
        title="Browse our Directory"
        description="Find what you're looking for"
      />
      <CardGrid>
        {items.map((item) => (
          <ListingCard key={item.id} {...item} />
        ))}
      </CardGrid>
    </DirectoryLayout>
  )
}
```

## Components

### Directory Index Page

- **DirectoryLayout** - Main layout wrapper for directory pages
- **DirectoryHero** - Hero section with title, description, and optional search
- **DirectoryToolbar** - Toolbar with view toggles, sort options, and filters
- **DirectorySidebar** - Sidebar with filter groups and navigation
- **DirectoryNavbar** - Navigation bar for directory sections
- **DirectoryCTA** - Call-to-action sections (Submit, Sponsor, Newsletter variants)

### Listing Views

- **CardGrid** - Responsive grid of listing cards
- **ListView** - Vertical list of listings with detailed info
- **TableView** - Tabular view with sortable columns
- **ListingCard** - Individual listing card component

### Detail Page

- **DetailHero** - Hero section for individual item pages
- **DetailSection** - Content sections with titles and descriptions
- **DetailActions** - Action buttons (website, GitHub, share, bookmark)
- **HierarchyNav** - Parent/child navigation for hierarchical content
- **RelatedItems** - Grid of related or similar items
- **CodeBlock** - Syntax-highlighted code snippets

### Utilities

- **cn** - Class name merging utility
- **formatNumber** - Number formatting helper
- **truncate** - Text truncation helper
- **slugify** - URL slug generator
- **getInitials** - Extract initials from names

## Peer Dependencies

- `react` ^18.0.0 || ^19.0.0
- `@mdxui/primitives` - Required for base UI components
- `@mdxui/themes` - Required for theming
- `mdxui` - Required for type definitions

## Links

- [Documentation](https://mdxui.dev)
- [GitHub](https://github.com/dot-do/ui)
- [npm](https://www.npmjs.com/package/@mdxui/discovery)

## License

MIT
npm package: @mdxui/dochat
Description: AI chat components for MDXUI - build conversational AI experiences
Latest version: 3.0.1

# @mdxui/dochat

AI chat components for building conversational experiences with MDXUI.

## Installation

```bash
pnpm add @mdxui/dochat @mdxui/primitives
```

## Components

### Chatbot Components
- `PromptInput` - Composable chat input with attachments, model selector
- `Message` - User/assistant message display with markdown support
- `Conversation` - Thread container with auto-scroll
- `CodeBlock` - Syntax highlighted code with copy button
- `Reasoning` - Collapsible thinking/reasoning sections
- `Sources` - Expandable source citations
- `Suggestion` - Suggestion chips with horizontal scroll
- `Tool` - Tool call status indicators
- `Loader` - Typing/thinking indicators

## Usage

```tsx
import {
  PromptInput,
  PromptInputBody,
  PromptInputTextarea,
  PromptInputFooter,
  PromptInputSubmit,
} from '@mdxui/dochat/chatbot'

export function ChatInput() {
  return (
    <PromptInput onSubmit={(message) => console.log(message)}>
      <PromptInputBody>
        <PromptInputTextarea placeholder="Ask anything..." />
      </PromptInputBody>
      <PromptInputFooter>
        <div />
        <PromptInputSubmit />
      </PromptInputFooter>
    </PromptInput>
  )
}
```
npm package: @mdxui/docs
Description: Documentation site layouts and components for MDXUI
Latest version: 1.0.2

# @mdxui/docs

Documentation site layouts and components for MDXUI, designed for creating beautiful and functional documentation with MDX and YAML-LD frontmatter.

## Installation

```bash
pnpm add @mdxui/docs
```

## Features

- Documentation-specific layouts
- Sidebar navigation
- API reference components
- Code blocks with syntax highlighting
- Search integration
- Versioning support
- Multi-language support
- Light/dark mode

## Usage

```tsx
import { 
  DocsLayout, 
  APIReference, 
  CodeBlock 
} from '@mdxui/docs'

// In your MDX file
---
$type: DocumentationPage
title: API Reference
version: 1.0.0
---

export default function APIDoc({ children }) {
  return (
    <DocsLayout>
      <APIReference>
        {children}
      </APIReference>
    </DocsLayout>
  )
}

// Example usage in MDX
<CodeBlock language="typescript">
  const example = "Hello World";
</CodeBlock>
```

## Components

- `DocsLayout` - Main documentation layout with navigation
- `APIReference` - API documentation component
- `CodeBlock` - Syntax highlighted code blocks
- `VersionSelector` - Documentation version switcher
- `LanguageSelector` - Documentation language switcher
- `SearchBar` - Documentation search
- `Sidebar` - Documentation navigation sidebar

## Related Packages

- `@mdxui/types` - TypeScript type definitions
- `@mdxui/shared` - Shared components and utilities
- `@mdxui/widgets` - Interactive components like search

## License

MIT © 2024 [Drivly](https://driv.ly)
npm package: @mdxui/marketing
Description: Landing page and marketing site components for MDXUI
Latest version: 1.0.2

# @mdxui/marketing

Landing page and marketing site components for MDXUI, designed for creating high-converting marketing pages with MDX and YAML-LD frontmatter.

## Installation

```bash
pnpm add @mdxui/marketing
```

## Features

- Landing page layouts
- Hero sections
- Feature grids
- Pricing tables
- Testimonial components
- Call-to-action sections
- Newsletter signup forms
- Analytics integration
- A/B testing support

## Usage

```tsx
import { 
  MarketingLayout, 
  Hero, 
  FeatureGrid,
  PricingTable 
} from '@mdxui/marketing'

// In your MDX file
---
$type: LandingPage
title: Product Landing Page
---

export default function LandingPage({ children }) {
  return (
    <MarketingLayout>
      <Hero
        title="Your Product Name"
        subtitle="The best solution for your needs"
        ctaText="Get Started"
      />
      <FeatureGrid features={features} />
      <PricingTable plans={plans} />
      {children}
    </MarketingLayout>
  )
}
```

## Components

- `MarketingLayout` - Marketing page layout
- `Hero` - Hero section with CTA
- `FeatureGrid` - Feature showcase grid
- `PricingTable` - Pricing comparison table
- `Testimonials` - Customer testimonials
- `Newsletter` - Newsletter signup form
- `CTASection` - Call-to-action sections
- `LogoCloud` - Partner/client logos display

## Related Packages

- `@mdxui/types` - TypeScript type definitions
- `@mdxui/shared` - Shared components and utilities
- `@mdxui/widgets` - Interactive components

## License

MIT © 2024 [Drivly](https://driv.ly)
npm package: @mdxui/shared
Description: Shared components, layouts, and utilities for MDXUI
Latest version: 1.0.2

# @mdxui/shared

Shared components, layouts, libraries, hooks, configurations and utilities for MDXUI.

## Installation

```bash
pnpm add @mdxui/shared
```

## Features

- Common React components and layouts
- Shared hooks for data fetching and state management
- Configuration utilities
- Theme management
- Common utilities for MDX processing
- Shared TypeScript configurations

## Usage

```typescript
import { 
  useTheme, 
  Layout, 
  Container, 
  MDXProvider 
} from '@mdxui/shared'

function App({ children }) {
  const { theme, setTheme } = useTheme()
  
  return (
    <Layout>
      <Container>
        <MDXProvider>
          {children}
        </MDXProvider>
      </Container>
    </Layout>
  )
}
```

## Components

- `Layout` - Base layout component
- `Container` - Responsive container
- `MDXProvider` - MDX context provider
- `ThemeProvider` - Theme context provider
- And more...

## Hooks

- `useTheme` - Theme management
- `useMDX` - MDX utilities
- `useConfig` - Configuration management

## Related Packages

- `@mdxui/types` - TypeScript type definitions
- `@mdxui/shadcn` - shadcn/ui components
- `@mdxui/tremor` - Tremor chart components

## License

MIT © 2024 [Drivly](https://driv.ly)
npm package: @mdxui/types
Description: Core TypeScript types extending schema-dts for MDXUI
Latest version: 1.0.2

# @mdxui/types

Core TypeScript types extending schema-dts to support `$type` alongside `@type` for YAML-LD frontmatter in MDX files.

## Installation

```bash
pnpm add @mdxui/types
```

## Usage

```typescript
import { BlogPost, DocumentationPage } from '@mdxui/types'

// In your MDX frontmatter
---
$type: BlogPost
title: My Blog Post
date: 2024-03-20
---

// Type checking in your components
interface Props {
  frontmatter: BlogPost
}
```

## Features

- Extended schema.org types with `$type` support
- Full TypeScript definitions for all MDXUI components
- Type safety for YAML-LD frontmatter
- Integration with schema-dts

## Related Packages

- `@mdxui/shared` - Shared utilities and components
- `@mdxui/blog` - Blog-specific implementations
- `@mdxui/docs` - Documentation specific implementations

## License

MIT © 2024 [Drivly](https://driv.ly)
npm package: @mdxui/widgets
Description: Complex, interactive UI widgets for building applications.
Latest version: 6.1.0

# @mdxui/widgets

Complex, interactive UI widgets for building applications.

## Installation

```bash
pnpm add @mdxui/widgets
```

## Widgets

| Widget | Description | Import |
|--------|-------------|--------|
| **Calendar** | Event calendar with day/week/month views | `@mdxui/widgets/calendar` |
| **ChatBox** | AI chat interface with streaming support | `@mdxui/widgets/chatbox` |
| **Editor** | Rich text editors (Markdown, Code, WYSIWYG, Block, MDX, Email) | `@mdxui/widgets/editor` |
| **KanbanBoard** | Drag-and-drop kanban board | `@mdxui/widgets/kanban-board` |
| **LinkShortener** | URL shortening interface | `@mdxui/widgets/link-shortener` |
| **Onboarding** | Multi-step wizard with field components | `@mdxui/widgets/onboarding` |
| **SearchBox** | Command palette search (⌘K) | `@mdxui/widgets/searchbox` |
| **SecretsManager** | Environment variable/secrets management | `@mdxui/widgets/secrets-manager` |
| **SmartDateTimePicker** | Natural language date/time input | `@mdxui/widgets/smart-datetime-picker` |
| **SurveyBuilder** | Drag-and-drop survey/form builder | `@mdxui/widgets/survey-builder` |

## Usage

### Main Entry

Import everything from the main entry:

```tsx
import { ChatBox, Editor, Calendar, KanbanBoard } from '@mdxui/widgets'
import { SearchProvider, SearchPalette, SearchTrigger } from '@mdxui/widgets'
import { OnboardingWizard, BooleanField, TextInputField } from '@mdxui/widgets'
```

### Subpath Imports (Tree-Shaking)

For smaller bundles, use subpath imports:

```tsx
import { Calendar } from '@mdxui/widgets/calendar'
import { ChatBox } from '@mdxui/widgets/chatbox'
import { SearchProvider, SearchPalette, SearchTrigger } from '@mdxui/widgets/searchbox'
import { KanbanBoard } from '@mdxui/widgets/kanban-board'
```

### Editor Components

Individual editors can be imported directly:

```tsx
import { MarkdownEditor } from '@mdxui/widgets/editor/markdown'
import { CodeEditor } from '@mdxui/widgets/editor/code'
import { WYSIWYGEditor } from '@mdxui/widgets/editor/wysiwyg'
import { BlockEditor } from '@mdxui/widgets/editor/block'
import { MDXEditor } from '@mdxui/widgets/editor/mdx'
import { EmailBuilder } from '@mdxui/widgets/editor/email'
```

### Hooks

```tsx
import { useAutosave } from '@mdxui/widgets/hooks/use-autosave'
import { useMediaQuery } from '@mdxui/widgets/hooks/use-media-query'
import { useEditorLayout } from '@mdxui/widgets/hooks/use-editor-layout'
```

## Storybook

View live examples and documentation:

```bash
# From monorepo root
pnpm storybook
```

Then navigate to **Widgets** in the sidebar.

## Styles

Import the widget styles in your app:

```tsx
import '@mdxui/widgets/styles.css'
```