Graphene

Graphene is a Phoenix component library built on Carbon Web Components. It ships Elixir components plus a small JS package that wires up hooks and lazy-loads web components on demand.

Install in a Phoenix app

1. Add the Elixir dependency:

defp deps do
  [
    {:graphene, "~> 2.47.0"}
  ]
end

2. Serve Graphene's vendored assets from your endpoint:

plug Plug.Static,
  at: "/graphene",
  from: :graphene,
  gzip: false,
  only: ~w(assets)

3. Include Graphene's CSS + JS in your root layout:

<link rel="stylesheet" href={~p"/graphene/assets/graphene.css"} />
<script type="module">
  import * as Graphene from "<%= ~p"/graphene/assets/index.js" %>";
  window.Graphene = Graphene;
</script>

4. Wire Graphene into your LiveView entrypoint (assets/js/app.js or assets/js/app.ts):

import { LiveSocket } from "phoenix_live_view";
import { Socket } from "phoenix";

const { WebComponentManager, Hooks, mergeWebComponentsAttrs } = window.Graphene;
const componentManager = new WebComponentManager();
componentManager.connect();

const liveSocket = new LiveSocket("/live", Socket, {
  hooks: Hooks,
  dom: { onBeforeElUpdated: mergeWebComponentsAttrs }
});

liveSocket.connect();

5. Expose Graphene components in your app:

defmodule MyAppWeb.Components do
  use Phoenix.Component
  use Graphene.Components
end

Notes:

• Graphene ships Carbon styles + IBM Plex fonts inside priv/static/assets, so no Carbon-related npm packages are required.
• When developing this repo locally (the demo app), run mix assets.build at the repo root to refresh vendored Graphene assets.
• Optional (reduce flicker): preload Graphene’s CSS + a couple of IBM Plex font files. Use the helper to avoid hardcoding hashed filenames:

<link rel="preload" as="style" href={~p"/graphene/assets/graphene.css"} />
<link rel="stylesheet" href={~p"/graphene/assets/graphene.css"} />
<%= if path = Graphene.Font.path("Regular", "Latin1") do %>
  <link rel="preload" as="font" type="font/woff2" crossorigin href={path} />
<% end %>
<%= if path = Graphene.Font.path("SemiBold", "Latin1") do %>
  <link rel="preload" as="font" type="font/woff2" crossorigin href={path} />
<% end %>

Development (this repo)

• mix setup
• mix assets.build
• cd demo && mix setup