Unhead: Full Stack Head Manager

What is a head manager?

Adding tags to <head> is a fundamental web-development task, whether you're setting a page title with <title> or loading JavaScript with a <script> tag.

While setting tags in an HTML document is simple, JavaScript frameworks have moved us away from pure HTML and into a world of fully dynamic client-side pages and server-side rendering.

Modern JavaScript applications need to render code outside the app entry (typically <div id="app"></div>) in both server-rendered and client-rendered environments.

The role of a head manager is to manage tags in <head>, attributes on <html> and <body>, and supported tags outside the app entry.

<!DOCTYPE html>
<html>  <!-- Unhead: htmlAttrs -->
  <head>
    <!-- Unhead: head -->
  </head>
  <body> <!-- Unhead: bodyAttrs -->
    <!-- Unhead: bodyOpen -->
    <div id="app"></div> <!-- Your app -->
    <!-- Unhead: bodyClose -->
  </body>
</html>

Introducing Unhead

Unhead was built as a universal head manager for JavaScript applications. It initially allowed frameworks such as Vue and Nuxt to offload head management to a standalone library.

Many frameworks implement their own head-management solutions, but supporting every way tags can be inserted into a document is difficult.

As a dedicated library, Unhead provides a head-management API, plugins, and integrations that can be shared across frameworks.

What Unhead Provides

• Lazy DOM patching: A small DOM diffing engine updates only the tags that changed.
• Typed API: Tag and attribute types include inline MDN documentation.
• Flat SEO metadata: Manage more than 100 meta tags without nested objects using useSeoMeta().
• Schema.org support: Generate typed structured data with useSchemaOrg().
• Script API: Load third-party scripts with proxied APIs, triggers, and resource hints using useScript().
• SSR and CSR: Render on the server, then adopt and update those tags on the client.
• Framework integrations: Use Unhead with Vue, React, Svelte, Solid, Angular, or vanilla TypeScript.

Install for Your Framework

• Vue Installation
• React Installation
• Svelte Installation
• Solid Installation
• Angular Installation
• TypeScript (Vanilla)

For framework-independent behavior, start with these guides:

• Page Titles: Set titles and title templates
• Tag Positions: Control tag placement and ordering
• Loading Scripts: Manage script loading and APIs