Getting Started - Demo Docs

Requirements

Node.js 22+ and an Astro 7 project. Run pnpm create astro@latest if you don’t have one yet.

Quick Start

Install the package

pnpm add @mizuchilabs/lyvo @pagefind/component-ui sharp

npm install @mizuchilabs/lyvo @pagefind/component-ui sharp

bun add @mizuchilabs/lyvo @pagefind/component-ui sharp

Tailwind, MDX, the sitemap and Pagefind are set up by the integration. sharp is Astro’s image optimizer and needs to be in your project.

Add the integration

import { defineConfig } from 'astro/config';
import lyvo from '@mizuchilabs/lyvo';

export default defineConfig({
	site: 'https://my-app.dev',
	integrations: [lyvo({ title: 'My App' })]
});

Register the content collections

import { defineLyvoCollections } from '@mizuchilabs/lyvo/collections';

export const collections = defineLyvoCollections();

Write your first page

Create src/content/docs/introduction.mdx with a title in the frontmatter, then run pnpm dev. The page is live at http://localhost:4321/docs/introduction.

Project Structure

src
- assets
  - logo.svg
- content
  - docs
    introduction.mdx
    guides
    install.mdx
- pages
  - index.astro
- styles
  - custom.css
- content.config.ts
public
- openapi.json
astro.config.mjs

Your landing page is a normal Astro page in src/pages/index.astro built from the landing blocks. Docs, the API reference, OG images, llms.txt, robots.txt and the 404 page are generated.

Building for Production

pnpm build

This writes a static site to dist and runs Pagefind to build the search index. Preview it with pnpm preview.