What is Velite?

Velite is a modern content layer that transforms your markdown, MDX, and other content formats into type-safe data for your Next.js application. yes! Yas!

Key Features

• Custom Loaders - Support any file format
• Image Processing - Automatic optimization and blur placeholders
• Type Safety - Full TypeScript support
• Flexible Schema - Define complex content structures

Getting Started

Install Velite and configure your collections:

export default defineConfig({
  collections: {
    posts: {
      pattern: 'posts/**/*.md',
      schema: s.object({
        title: s.string(),
        date: s.isodate(),
        content: s.markdown(),
      }),
    },
  },
})

Image Handling

Velite automatically processes images:

Images get blur placeholders and optimized paths.

Related Resources

Check out the documentation for more details.

Custom Content Loaders

Velite allows you to define custom loaders for any file format. This demo uses a custom EditorJS loader.

Defining a Loader

const customLoader = defineLoader({
  test: /\.custom$/,
  load: (vfile) => {
    const data = parseCustomFormat(vfile.toString())
    return { data }
  },
})

Loader Components

Each loader needs:

• test - Regex pattern to match files
• load - Function to transform content

EditorJS Example

The EditorJS loader in this project:

1. Matches .editorjs files
2. Parses JSON block format
3. Converts to HTML using editorjs-html
4. Reads companion .meta.json for metadata

Configuration

Add loaders to your Velite config:

export default defineConfig({
  loaders: [editorjsLoader],
  collections: { ... }
})

This approach enables support for any content format while maintaining type safety.