Open Source · Next.js + Preact

Markdesk

A complete help center with markdown articles, product updates, contact form, and an embeddable beacon widget.

npx skills add charlieclark/markdesk

View on GitHub

Features

Everything you need for a self-hosted help center.

📝

Markdown Articles

Write help articles in markdown with frontmatter. Organized by category with full-text search.

📢

Product Updates

Changelog entries with badge categories. Show new updates as modal popups in the beacon.

💬

Beacon Widget

Embeddable ~47KB Preact widget with search, articles, contact form, and update notifications.

📧

Contact Form

Built-in contact form with support for SendGrid, Resend, or Nodemailer (SMTP).

🎨

Configurable

Single config file for branding, colors, email provider, footer links, and more.

⚡

Next.js 16

Built on Next.js with static generation, API routes, and Tailwind CSS.

Quick Start

Up and running in under a minute.

# Set up with the Vercel Skill
npx skills add charlieclark/markdesk

# Or clone manually
git clone https://github.com/charlieclark/markdesk.git my-help-center
cd my-help-center && rm -rf .git

# Configure, install, and run
# Edit markdesk.config.ts
npm install && npm run dev

Configuration

All settings live in a single markdesk.config.ts file.

{
  name: 'My Product',
  siteUrl: 'https://help.example.com',
  productUrl: 'https://example.com',
  supportEmail: 'support@example.com',
  fromEmail: 'help@example.com',
  colors: { primary: '#4b68af' },
  emailSender: 'resend',
  footer: { termsUrl: '', privacyUrl: '' },
  allowedOrigins: [],
  beacon: { title: 'Help' },
}

Beacon API

Embed the beacon on any site with two script tags.

<script>
  window.MarkdeskConfig = {
    helpCenterUrl: 'https://help.example.com',
    title: 'Help',
  };
</script>
<script src="https://help.example.com/beacon.js" async></script>

JavaScript API

Method	Description
`Markdesk.open('answers')`	Open beacon to Answers tab
`Markdesk.open('updates')`	Open beacon to Updates tab
`Markdesk.open('ask')`	Open beacon to Contact tab
`Markdesk.close()`	Close the beacon
`Markdesk.toggle()`	Toggle beacon open/closed
`Markdesk.identify({email})`	Pre-fill contact form email
`Markdesk.showModal()`	Enable update modal (when autoShowModal is false)
`Markdesk.article(slug)`	Open a specific article

Email Providers

The contact form supports three email providers out of the box.

Provider	Config Value	Environment Variable
Resend	`'resend'`	`RESEND_API_KEY`
SendGrid	`'sendgrid'`	`SENDGRID_API_KEY`
Nodemailer	`'nodemailer'`	`SMTP_HOST`, `SMTP_PORT`, `SMTP_USER`, `SMTP_PASS`