unhead

Full-stack <head> manager built for any framework

Features

🚀 Framework agnostic - works with any framework
🔄 Reactive head management
🔍 SEO-friendly with rich meta tag support
🖥️ Server-side rendering support
📦 Lightweight and tree-shakable
⚡ Performance optimized with minimal runtime overhead
🎯 Type-safe with full TypeScript support

Installation

# npm
npm install unhead

# yarn
yarn add unhead

# pnpm
pnpm add unhead

Usage

Basic Usage

import { createHead, useHead } from 'unhead'

// Create a head instance
const head = createHead()

// Use head tags
useHead({
  title: 'My App',
  meta: [
    {
      name: 'description',
      content: 'My awesome application'
    }
  ]
}, { head })

Server-Side Rendering

import { createHead } from 'unhead/server'

const head = createHead()

// Add head entries
useHead({
  title: 'SSR App',
  meta: [{ name: 'description', content: 'Server-rendered app' }]
}, { head })

// Render head tags
const { headTags, bodyTags } = head.render()

Client-Side Rendering

import { createHead } from 'unhead/client'

// Create head instance (auto-renders on changes)
const head = createHead()

// Add reactive head entries
useHead({
  title: 'Client App'
}, { head })

Custom Renderers

import { createServerRenderer, createUnhead } from 'unhead/server'

// Create a custom renderer with options
const renderer = createServerRenderer({ omitLineBreaks: true })

// Pass renderer to createUnhead
const head = createUnhead(renderer, { /* options */ })

// Render using head.render()
const html = head.render()

Framework Integrations

Unhead provides optimized integrations for popular frameworks:

Vue: @unhead/vue
React: @unhead/react
Angular: @unhead/angular
Svelte: @unhead/svelte
SolidJS: @unhead/solid-js

Documentation

Visit the documentation site for comprehensive guides and API references.

License

MIT