Header & Footer Code: add head/body snippets from the admin, no theme edits (native plugin, on npm)

[jithinsk]

Hi everyone,

I built Header & Footer Code mainly to learn how plugins work in EmDash. I wanted to go through the native plugin model end to end: definePlugin, the page:fragments hook, plugin storage and kv, React admin pages, and shipping on npm.

For a subject I picked something I'd actually use: the EmDash equivalent of WordPress's Insert Headers and Footers / WPCode. You paste a snippet (a verification tag, an analytics pixel, a chat widget, a bit of CSS) into the admin and it shows up on your public pages, with no theme edits or redeploys. When I started I couldn't find a general-purpose plugin like this in the community lists. Since then I've come across emdash-tracking-scripts, which handles GTM/GA4 and raw snippets. This one leans more general: per-snippet targeting, priorities, a change log and an extension API.

It turned out to be a good tour of the platform, so I'm sharing it both as a usable plugin and as a worked example of a native plugin.

What it does

• Three placements: head, body:start and body:end, rendered through <EmDashHead />, <EmDashBodyStart /> and <EmDashBodyEnd />
• Targeting per snippet: include and exclude paths (exact or trailing *, exclude wins), content vs custom pages, and locales
• Priority ordering within a placement, plus an enabled toggle per snippet
• Kill switch: one toggle turns off all output without deleting anything, for when a bad snippet breaks the site
• Change log: who created, edited, enabled, disabled or deleted what, and when
• Roles: only Admins can write; Editors see the list read-only and never see the code
• Fast: at most one small storage read per request, with a per-isolate cache keyed on a version number that every admin write bumps, so changes reach every server instance within about a second. It's designed with Cloudflare Workers isolates in mind; so far I've tested it on Node with SQLite.
• Extensible: a transforms API lets another package rewrite or drop snippets before they render. My next step is a consent plugin that gates scripts by cookie category on top of this.

It never runs anything on the server; it only emits the markup you give it. Because page:fragments is trusted-only, this is a native plugin (installed from npm, not the registry), and it runs as first-party code with no sandbox. The README says so up front.

Trying it

npm i emdash-header-footer-code

// astro.config.mjs
import { headerFooterCode } from "emdash-header-footer-code";

export default defineConfig({
  integrations: [
    emdash({
      plugins: [headerFooterCode()],
      // …database, storage…
    }),
  ],
});

Restart the dev server, then open Header & Footer Code in the admin sidebar.

• npm: https://www.npmjs.com/package/emdash-header-footer-code (published with provenance)
• Source (MIT): https://github.com/jithinsk/emdash-header-footer-code

It's tested with unit tests and Playwright end-to-end tests against an EmDash 1.0.1 starter site, including a test that installs the packed tarball into a production build. The repo also includes the design spec and implementation plan under docs/, if you're curious how a native plugin fits together.

Feedback is very welcome, especially from anyone who knows the plugin internals better than I do: anything I'm doing against the grain of how EmDash expects plugins to behave, targeting rules you'd want next (regex? device? scheduling?), and the transforms API before it settles.