Unhead: Full Stack Head Manager
What is head manager?
Setting tags in your <head> is one of the fundamental tasks in web development. Whether it be setting a page title using <title> or
loading in a JavaScript framework using <script> tags.
While setting tags in a HTML document is dead simple, JavaScript frameworks have moved us well away from the days of pure HTML 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 a
server-rendered and client-rendered environment.
The role of the "head manager" is then to manage the tags in the <head> and all 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. Allowing frameworks such as Vue and Nuxt, to offload the complex work of managing the head to a standalone library.
While many frameworks themselves implement solutions for managing the above tags, it can be difficult to maintain for the diverse ways tags can be inserted into the document.
As Unhead is a dedicated library it can innovate on the head management developer experience, providing an ecosystem of plugins and integrations that can be used across all frameworks.
Innovating on Head Management
- Lazy DOM Patching with tiny DOM diffing engine
- Fully typed API with MDN documentation
- Flat SEO meta tags with
useSeoMeta() - Schema.org support with
useSchemaOrg() - Script API with
useScript()
Getting Started
Ready to jump in? Check out the installation guide to get started with Unhead.