Knowledge Base for VitePress with Metakit

Give your VitePress Knowledge Base a visual editor backed by Git. Writers draft in a beautiful UI — developers keep full control over rendering.

Start building →

Managing Knowledge Base in VitePress shouldn't be this hard

Your content files live as .mdx files in a directory. Every edit requires opening a code editor, understanding frontmatter schemas, and creating a pull request. Your marketing writer wants to fix a typo? They need to learn Git. You could adopt a headless CMS, but then you lose the colocated content model, your build gets slower with API calls, and you introduce a dependency on a third-party service for what should be simple markdown files.

Getting started

1

Install the SDK

Run `npm install @metakit/vitepress` to add Metakit to your project. The SDK auto-detects your configuration and sets up content schemas.

2

Connect your repository

Link your GitHub repo to Metakit. We detect your VitePress project structure and configure content paths automatically.

3

Start editing visually

Open the Metakit editor and start creating Knowledge Base content. Rich text, images, frontmatter — all managed through a beautiful interface with live preview.

4

Deploy to Netlify

Every save creates a Git commit. Push triggers your existing CI/CD pipeline. Content goes live through the same deployment process your team already uses.

What you get

  • ⚡Framework compatible — Works with your existing VitePress setup. No client-side SDK required.
  • 🚀Fast builds — Content is statically generated at build time with on-demand revalidation.
  • 👁Live preview — Changes in the visual editor hot-reload in your dev server. Writers see exactly what ships.
  • 💻Type-safe content — Auto-generated types from your content schema. Catch broken references at build time.
  • 🌍Automatic sitemap & RSS — Metakit generates sitemap.xml and RSS feeds from your Knowledge Base content.
  • 🔒Git-backed history — Every edit is a Git commit. Full history, branch-based previews, and PR reviews.

Integration

Install with a single command, then start using Metakit in your existing VitePress codebase.

Terminal
npm install @metakit/vitepress
example.knowledge-base.tsx
import { metakit } from '@metakit/react';

const content = metakit({ contentType: 'knowledge-base' });

export default async function Page({ params }) {
  const item = await content.get(params.slug);

  return (
    <article>
      <h1>{item.title}</h1>
      <content.Render content={item} />
    </article>
  );
}

Related guides

Knowledge Base on other frameworks

Next.js · Nuxt · Astro · SvelteKit · Remix · Gatsby · Laravel · Rails · Django · Hugo · Docusaurus · Eleventy · Mintlify

Start building your knowledge base →

Deploy to Netlify. Content managed visually. Git history preserved.

Start for free →