solidjs/solid-meta

Write meta tags to the document head

158

stars

commits

TypeScript

primary language

Aug 12, 2026

updated

README

Solid Meta

Asynchronous SSR-ready Document Head management for Solid based on React Head

For Solid 1.0 use 0.27.x or greater. For versions of Solid 0.x use 0.26.x.

Motivation

This module allows you to define document.head tags anywhere in your component hierarchy. The motivations are similar to react-helmet in that you may only have the information for certain tags contextually deep in your component hiearchy. There are no dependencies and it should work fine with asynchronous rendering.

Installation

npm i @solidjs/meta

How it works

You wrap your App with <MetaProvider />
To insert head tags within your app, just render one of <Title />, <Meta />, <Style />, <Link />, and <Base /> components as often as needed.
On the server, if you render the <head> element using SolidJS in JSX, you are all good. Otherwise use getAssets from solid-js/web to insert the assets where you want.

On the server, the tags are collected, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags).

[!IMPORTANT] Be sure to avoid adding any normal <title /> tags in any server files (be it entry-server.jsx|tsx in SolidStart projects or inside your server file), as they would override the functionality of @solid/meta!

SolidStart setup

Wrap your app with <MetaProvider /> inside of the root of the <Router /> component.
You can optionally provide a <title /> fallback by providing a <Title /> component inside of <MetaProvider />.

`app.jsx` / `app.tsx`

// @refresh reload
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import { Suspense } from "solid-js";
import "./app.css";

export default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Server setup

Wrap your app with <MetaProvider /> on the server, using a tags[] array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags.

import { renderToString, getAssets } from 'solid-js/web';
import { MetaProvider } from '@solidjs/meta';
import App from './App';

// ... within the context of a request ...
const app = renderToString(() =>
  <MetaProvider>
    <App />
  </MetaProvider>
);

res.send(`
  <!doctype html>
  <html>
    <head>
      ${getAssets()}
    </head>
    <body>
      <div id="root">${app}</div>
    </body>
  </html>
`);

Client setup

There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the <head />.

import { MetaProvider, Title, Link, Meta } from '@solidjs/meta';

const App = () => (
  <MetaProvider>
    <div class="Home">
      <Title>Title of page</Title>
      <Link rel="canonical" href="http://solidjs.com/" />
      <Meta name="example" content="whatever" />
      // ...
    </div>
  </MetaProvider>
);

Contributors

48 commits

8 commits

4 commits

3 commits

Similar repos

rehypejs/rehype-meta

plugin to add metadata to the head of a document

solidjs/solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.

36,013

same org

solidjs/solid-router

A universal router for Solid inspired by Ember and React Router

1,318

same org

solidjs/solid-refresh

same org

solidjs/solid-styled-jsx

A Styled JSX wrapper for Solid

same org

solidjs/solid-vite-plugin

A simple integration to run solid-js with vite

519

same org

solidjs/solid-docs

Official documentation for the Solid ecosystem

291

same org

solidjs/solid-site

Code that powers the SolidJS.com platform.

167

same org

Languages

TypeScript

96.2%

JavaScript

3.8%

solidjs/solid-meta

Write meta tags to the document head

158

stars

commits

TypeScript

primary language

Aug 12, 2026

updated

README

Solid Meta

Asynchronous SSR-ready Document Head management for Solid based on React Head

For Solid 1.0 use 0.27.x or greater. For versions of Solid 0.x use 0.26.x.

Motivation

Installation

npm i @solidjs/meta

How it works

You wrap your App with <MetaProvider />
To insert head tags within your app, just render one of <Title />, <Meta />, <Style />, <Link />, and <Base /> components as often as needed.
On the server, if you render the <head> element using SolidJS in JSX, you are all good. Otherwise use getAssets from solid-js/web to insert the assets where you want.

[!IMPORTANT] Be sure to avoid adding any normal <title /> tags in any server files (be it entry-server.jsx|tsx in SolidStart projects or inside your server file), as they would override the functionality of @solid/meta!

SolidStart setup

Wrap your app with <MetaProvider /> inside of the root of the <Router /> component.
You can optionally provide a <title /> fallback by providing a <Title /> component inside of <MetaProvider />.

`app.jsx` / `app.tsx`

// @refresh reload
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import { Suspense } from "solid-js";
import "./app.css";

export default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Server setup

Wrap your app with <MetaProvider /> on the server, using a tags[] array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags.

import { renderToString, getAssets } from 'solid-js/web';
import { MetaProvider } from '@solidjs/meta';
import App from './App';

// ... within the context of a request ...
const app = renderToString(() =>
  <MetaProvider>
    <App />
  </MetaProvider>
);

res.send(`
  <!doctype html>
  <html>
    <head>
      ${getAssets()}
    </head>
    <body>
      <div id="root">${app}</div>
    </body>
  </html>
`);

Client setup

There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the <head />.

import { MetaProvider, Title, Link, Meta } from '@solidjs/meta';

const App = () => (
  <MetaProvider>
    <div class="Home">
      <Title>Title of page</Title>
      <Link rel="canonical" href="http://solidjs.com/" />
      <Meta name="example" content="whatever" />
      // ...
    </div>
  </MetaProvider>
);